CheckboxCheckboxes allow the user to select one or more items from a set.
They can be used to turn an option on or off, or to indicate approval or verification.

- Overview
- UX Guidelines
- Dev
Usage Examples
Styles
Property | Component |
---|---|
Default | ![]() |
Light | ![]() |
States
Property | Component |
---|---|
Un-Checked | ![]() |
Checked | ![]() |
Indeterminate | ![]() |
Validation Error | ![]() |
Disabled | ![]() |
Accessories
Property | Component |
---|---|
Label A label can be displayed next to the Checkbox. | ![]() |
Spec
SizeThe checkbox comes only in one size, and cannot be resized.
Size: 24x24

PositionFor screens requiring multiple selections, use the Multi-Select List.
If a Checkbox is used to indicate approval or verification, place it with a label to its right.
Checkbox GroupUse ListItem component to group multiple options for the user to choose from.

PlaygroundCode Example
function Example(props) { const [value, setValue] = useState(false); return ( <div> <Checkbox value={value} onValueChange={setValue} /> </div> ); }

INFO
This component support margin, background modifiers.

TIP
This component extends the basic/TouchableOpacity props.
APIThis is the list of additional props for the component