A checkbox enables users to select one or more options from a visible list.
Example
⌘ Cmd + ⌥ Option + 1
Properties
| property | propType | required | default | description |
|---|---|---|---|---|
| labelWeight | oneOf 'light' | 'normal' | 'bold' | - | 'normal' | Font weight for the label text |
| checked | bool | - | - | Boolean to set checkbox, for controlled component |
| defaultChecked | bool | - | - | Boolean for how checkbox renders initially |
| isDisabled | bool | - | - | Prevents checkbox from being modified and appears disabled |
| label | string | node | - | - | Label that describes the checkbox |
| onChange | func | - | - | Function that fires when the checkbox is clicked |
| testSection | string | - | - | Hook for automated JavaScript tests |
Usage
Use input checkboxes when you want to offer the user one or more selectable options. Input checkboxes require a label and are used in conjunction with a button to apply the selection.
Best Practices
Do
Place the checkbox on the left side of the label
Keep the checkbox label text short
Don't
Place the checkbox on the right side of the label
Alter the size, color, or alignment