CheckBox | NativeBase | Universal Components for React and React Native

Data Display
Typography
Disclosure
Media and Icons
Others
CheckBox
The Checkbox component allows a user to select multiple values from various options in a form.
Show Code
Playground
Examples
Basic
Playground
Controlled
Playground
Uncontrolled
Playground
Disabled
Playground
Invalid
Playground
Custom Color
Playground
Custom Icon
Playground
Size
Playground
Checkbox Group
Playground
Form Controlled
Playground
Basic (With Ref)
Playground
Props
Checkbox
Checkbox.Group
id
assign id to checkbox group
Type: string
value
The value of the checkbox group.
Type: string[]
defaultValue
The initial value of the checkbox group.
Type: string[]
colorScheme
The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").
Type: ColorSchemeType
size
The size (width and height) of the checkbox.
Type: ResponsiveValue<"sm" | "md" | "lg">
onChange
The callback fired when any children Checkbox is checked or unchecked.
Type: (values: any) => any
_checkbox
Pass props will be passed to each checkbox.
Type: Partial<ICheckboxProps>
Styling
NativeBase ships with a default theme for each component. Checkout the default theme of checkbox.
Info: We can easily extend the checkbox component theme using extendTheme function as described in the documentation .
Accessibility
Uses React Native ARIA which follows the .
Keyboard Interactions
Key
Description
Space
Checks/unchecks the checkbox.
Nativebase logo
MadeWithNativeBase