Checkbox
Boolean choice, accessible by default.
Usage
Use Checkbox.Root inside a label element. Bind to checked for two-way state.
Sizes
Three sizes from the size prop.
States
indeterminate renders the mixed state. Both indeterminate and disabled are fully accessible.
Props
| Prop | Type | Default |
|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' |
invalid Marks the control as failing validation. Always applies the invalid styling. Also sets `aria-invalid`, which this element's `checkbox` role supports. Prefer letting `Field` drive this: passing `Field` an `error` is what makes a field invalid, so the message the user reads and the state of the control cannot disagree. | boolean | false |
class | string | — |
checked bits-ui The checked state of the checkbox. It can be one of: - `true` for checked - `false` for unchecked | boolean | undefined | false |
child bits-ui | Snippet<[CheckboxRootSnippetProps & { props: Record<string, unknown>; }]> | undefined | — |
disabled bits-ui Whether the checkbox is disabled. | boolean | null | undefined | false |
id bits-ui | string | undefined | — |
indeterminate bits-ui Whether the checkbox is in an indeterminate state or not. | boolean | undefined | false |
name bits-ui The name of the checkbox used in form submission. If not provided, the hidden input will not be rendered. | any | undefined |
onCheckedChange bits-ui A callback function called when the checked state changes. | OnChangeFn<boolean> | undefined | — |
onIndeterminateChange bits-ui A callback function called when the indeterminate state changes. | OnChangeFn<boolean> | undefined | — |
readonly bits-ui Whether the checkbox is read only. If readonly, the checkbox will be focusable by the user, but will not be able to be checked/unchecked. | boolean | null | undefined | false |
ref bits-ui | HTMLElement | null | undefined | — |
required bits-ui Whether the checkbox is required (for form validation). | boolean | undefined | false |
value bits-ui The value of the checkbox used in form submission and to identify the checkbox when in a `Checkbox.Group`. If not provided while in a `Checkbox.Group`, the checkbox will use a random identifier. | string | undefined | undefined |
Plus all Bits Checkbox.Root props via prop spreading.