# Checkbox and Select Inputs

Source: https://payloadcms.com/docs/ui-components/checkbox-and-select-inputs

`CheckboxInput` and `SelectInput` provide the input-level controls used by Payload's Checkbox and Select fields. They are useful when a Custom Field needs standard Admin styling while controlling its own state.

## Import

```tsx
import { CheckboxInput, SelectInput } from '@payloadcms/ui'
```

## CheckboxInput

**Implementation**

```tsx
const [checked, setChecked] = useState(true)

<CheckboxInput
  checked={checked}
  label="Feature this project"
  name="featured"
  onToggle={(event) => setChecked(event.target.checked)}
/>
```

**Styling**

Style the checkbox control and its checked modifier while leaving the native input and label connection intact.

```css
.checkbox-input__input {
  border-color: var(--theme-elevation-400);
  border-radius: 4px;
}

.checkbox-input--checked .checkbox-input__input {
  background: var(--theme-elevation-800);
  color: var(--theme-elevation-0);
}
```

- `background`: Checked control surface.
- `border-color`: Checkbox outline.
- `border-radius`: Checkbox corner radius.
- `color`: Check icon color.

Use `checked` and `onToggle` to control the value. Set `partialChecked` to display the indeterminate treatment used by list-selection interfaces.

## SelectInput

**Implementation**

```tsx
const options = [
  { label: 'Planned', value: 'planned' },
  { label: 'In progress', value: 'in-progress' },
  { label: 'Complete', value: 'complete' },
]

const [value, setValue] = useState('in-progress')

<SelectInput
  label="Status"
  name="status"
  onChange={(option) => setValue(option?.value || '')}
  options={options}
  path="status"
  value={value}
/>
```

**Styling**

Customize the ReactSelect control within SelectInput while retaining Payload’s field label, description, and error structure.

```css
.field-type.select .rs__control {
  background: var(--theme-input-bg);
  border-color: var(--theme-elevation-250);
  border-radius: 6px;
}

.field-type.select .rs__control--is-focused {
  border-color: var(--theme-elevation-500);
}
```

- `--theme-input-bg`: Select control surface.
- `border-color`: Resting and focused outline color.
- `border-radius`: Select control corner radius.

`SelectInput` wraps [`ReactSelect`](/docs/v3/ui-components/react-select.md) with Payload's field label, description, and validation structure. Its controlled `value` contains the stored option value rather than the complete option object.

## CheckboxInput props

| Prop             | Type                                   | Default | Description                                |
| ---------------- | -------------------------------------- | ------- | ------------------------------------------ |
| `checked`        | `boolean`                              | `false` | Controls the checked state.                |
| `onToggle` \*    | `ChangeEventHandler<HTMLInputElement>` | —       | Receives changes from the native checkbox. |
| `label`          | `StaticLabel`                          | —       | Displays the checkbox label.               |
| `partialChecked` | `boolean`                              | `false` | Displays the indeterminate treatment.      |
| `readOnly`       | `boolean`                              | `false` | Disables interaction.                      |
| `required`       | `boolean`                              | `false` | Marks the native input as required.        |

## SelectInput props

| Prop          | Type                   | Default | Description                                   |
| ------------- | ---------------------- | ------- | --------------------------------------------- |
| `name` \*     | `string`               | —       | Names the select input.                       |
| `path` \*     | `string`               | —       | Identifies the field and connects its UI.     |
| `options` \*  | `OptionObject[]`       | —       | Supplies the available translated options.    |
| `value`       | `string \| string[]`   | —       | Supplies the selected stored value or values. |
| `onChange`    | `ReactSelect.onChange` | —       | Receives the selected option object.          |
| `hasMany`     | `boolean`              | `false` | Enables multiple values.                      |
| `isSortable`  | `boolean`              | `true`  | Enables reordering in multi-value mode.       |
| `isClearable` | `boolean`              | `true`  | Allows the selected value to be cleared.      |
| `readOnly`    | `boolean`              | `false` | Disables interaction.                         |
| `showError`   | `boolean`              | Form    | Displays the current validation error.        |

_\* An asterisk denotes that a prop is required._

## Provider requirements

Both inputs use Payload's translation context. `SelectInput` also composes the standard field label, description, and error components, which can read the surrounding form context in a Custom Field.