CheckBox | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
CheckBox
The Checkbox component is used in forms when a user needs to select multiple values from several options.
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
id
assign id to checkbox
Type: string
name
The name of the input field in a checkbox.
Type: string
value
The value to be used in the checkbox input. This is the value that will be returned on form submission.
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: string
defaultIsChecked
If true, the checkbox will be initially checked. (use defaultValue prop if using it inside Checkbox.Group)
Type: boolean
isChecked
If true, the checkbox will be checked. You'll need to pass onChange to update it's value (since it's now controlled).
Type: boolean
isIndeterminate
If true, the checkbox will be indeterminate. This only affects the icon shown inside checkbox.
Type: boolean
isDisabled
If true, the checkbox will be disabled
Type: boolean
isInvalid
If true, the checkbox is marked as invalid. Changes style of unchecked state.
Type: boolean
size
The size (width and height) of the checkbox.
Type: "sm" | "md" | "lg"
Default: 'md'
icon
If given, will use this icon instead of the default.
Type: Element
onChange
Function called when the state of the checkbox changes.
Type: (isSelected: boolean) => void
wrapperRef
Ref to be passed to Icon's wrapper Box
Type: any
Checkbox.Group
id
assign id to checkbox group
Type: string
value
The value of the checkbox group.
Type: any[]
defaultValue
The initial value of the checkbox group.
Type: any[]
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: string
size
The size (width and height) of the checkbox.
Type: "sm" | "md" | "lg"
onChange
The callback fired when any children Checkbox is checked or unchecked.
Type: (values: any) => any
Styling
NativeBase ships with a default theme for each component. Check out the default theme of the 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