Version: 3.0.0-next.36

CheckBox

The Checkbox component is used in forms when a user needs to select multiple values from several options.

Implements#

Examples#

Basic#

Disabled#

Invalid#

Custom Color#

Custom Icon#

Size#

Checkbox Group#

Form Controlled#

Basic (With Ref)#

Accessibility#

Uses React Native ARIA @react-native-aria/checkbox which follows the Checkbox WAI-ARIA design pattern.

Keyboard Interactions#

KeyDescription
SpaceChecks/unchecks the checkbox.

Props#

Checkbox#

NameTypeDescriptionDefault
namestringThe name of the input field in a checkbox.-
valuenumber, stringThe value to be used in the checkbox input. This is the value that will be returned on form submission.-
colorSchemestringThe color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").default
defaultIsCheckedbooleanIf true, the checkbox will be initially checked. (use defaultValue prop if using it inside Checkbox.Group)-
isCheckedbooleanIf true, the checkbox will be checked. You'll need to pass onChange to update it's value (since it's now controlled).-
isIndeterminatebooleanIf true, the checkbox will be indeterminate. This only affects the icon shown inside checkbox.-
sizelg, md, smThe size (width and height) of the checkbox.md
isDisabledbooleanIf true, the checkbox will be disabled-
iconJSX.ElementIf given, will use this icon instead of the default.-
isInvalidbooleanIf true, the checkbox is marked as invalid. Changes style of unchecked state.-
onChangefunctionFunction called when the state of the checkbox changes.-
childrenJSX.ElementThe children of the checkbox.-

Checkbox.Group#

Checkbox.Group implements Box.

NameTypeDescriptionDefault
valueArrayThe value of the checkbox group.-
defaultValueArrayThe initial value of the checkbox group.-
onChangefunctionThe callback fired when any children Checkbox is checked or unchecked.-

The following props can be set on Checkbox.Group and they will be forwarded to all children Checkbox components.

Shared Style Props#

NameTypeDescriptionDefault
colorSchemestringThe color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").default
sizelg, md, smThe size (width and height) of the checkbox.md
isDisabledbooleanIf true, the checkbox will be disabled-
isInvalidbooleanIf true, the checkbox is marked as invalid. Changes style of unchecked state.-