Theme
Checkbox
A checkbox with its label, alone or in a group.
Examples
Notify me aboutSent to your email address.
Props
Checkbox
A checkbox with its label. Space toggles it; it can be indeterminate for a parent of several.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — |
Also takes 108 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
CheckboxGroup
Several checkboxes under one label, with one value: the list of those checked.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | The visible label. Every field has one; it names the field for screen readers too. Text, so it can also be the field's aria-label: see `useFallbackName`. |
description? | ReactNode | — | Help shown under the field and read with it. |
errorMessage? | ReactNode | ((validation: ValidationResult) => ReactNode) | — | Shown when the field is invalid; defaults to the browser's validation message. |
children | ReactNode | — |
Also takes 92 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
Keyboard
| Key | Does |
|---|---|
| Space | Toggles the focused checkbox |
| Tab | Moves to the next checkbox |
Accessibility
- A native checkbox underneath: forms submit it and screen readers know it.
- The whole label is the target, at least 24px tall.