| title | Checkbox |
|---|---|
| parent | Controls and forms |
| grand_parent | Components |
{: .no_toc }
An independent on/off, with a third indeterminate state.
import { Checkbox } from '@textui/widgets';
<Checkbox label="Notify on failure" checked onChange={(checked) => console.log(checked)} />| Prop | Type | Default | |
|---|---|---|---|
label |
string |
||
checked |
boolean |
false |
|
indeterminate |
boolean |
Neither checked nor unchecked - a parent of mixed children. | |
onChange |
(checked: boolean) => void |
||
autoFocus |
boolean |
Take the keyboard on arrival. |
Plus everything on BoxProps.
Role: checkbox.
Space toggles it. indeterminate is the "some of the children" state for a parent checkbox; it is a display state only, and the next toggle resolves to checked.
Use a checkbox when the options are independent. When exactly one of several must be chosen, that is a RadioGroup, and when the thing takes effect immediately rather than on submit it reads better as a Switch.
- Editing keys and selection - the keys, the selection and the clipboard
- Switch - the same boolean, different promise
- RadioGroup - one of several
- Field - wrapping it in a form