[component]

Dev Mode
CheckBox
Description
CheckBox is used for multiple choice selection. They are independent of each other in a list, and therefore, different from RadioButton, one selection does not affect other checkboxes in the same list.
Selected
Size
Bg Color
Usage Guidelines
Do
Use a checkbox when selection doesn’t take immediate effect and requires form submission.
Keep text concise.
Use a tooltip if needed.
Don't
Do NOT use checkboxes if the checkbox will have an immediate state change. Use switches instead.
Accessibility
Labels should be readable by screen readers.
Labels should be able to be clicked or tapped to check/uncheck the checkboxes.
Keyboards should be able to tab back and forth between the checkboxes.
The checkboxes should have a focus state.
Props
Name
Type
Required
Description
selected
boolean
Required
If true, the checkbox is selected.
bgColor
The background color of the checkbox.
size
The size of the checkbox.
testID
string
Root test id for the primary interactive element or container.
Status
Documentation:
Figma:
Web:
iOS:
Android:
Additional Documentation
NN/g article
Related
Multiselect field, Radio field
Examples
Sizes
Small
Medium
Large
Colors
Default
Accent
Black