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

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

CheckboxInput

Feature this project

Loading component example…

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

SelectInput

Status

Controls where the project appears in the workflow.

Loading component example…

SelectInput wraps ReactSelect 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.

Was this page helpful?

See what others are building with Payload.

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Get the resources you need to start building today

Microsoft chose Payload to tell the world about AI.