Nativebase logo
NativeBase
Data Display
Typography
Disclosure
Media and Icons
Others
CheckBox
The Checkbox component is used in forms when a user needs to select multiple values from several options.
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
wrapperRef
Ref to be passed to Icon's wrapper Box
Type: any
size
The size (width and height) of the checkbox.
Type: ResponsiveValue<"sm" | "md" | "lg">
Default: 'md'
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.
Type: boolean
isReadOnly
If true, the checkbox is marked as readonly.
Type: boolean
icon
If given, will use this icon instead of the default.
Type: Element
_disabled
Passed props wilICheckboxGroupPropsl be applied on disabled state.
Type: Omit<ICheckboxProps, "_disabled">
_checked
Passed props will be applied on checked state.
Type: Omit<ICheckboxProps, "_checked">
_unchecked
Passed props will be applied on unchecked state.
Type: Omit<ICheckboxProps, "_unchecked">
_focus
Passed props will be applied on focus state.
Type: Omit<ICheckboxProps, "_focus">
_hover
Passed props will be applied on hover state.
Type: Omit<ICheckboxProps, "_hover">
_invalid
Passed props will be applied on invalid state.
Type: Omit<ICheckboxProps, "_invalid">
_pressed
Passed props will be applied on pressed state on native.
Type: Omit<ICheckboxProps, "_pressed">
_readOnly
Passed props will be applied on readonly state.
Type: Omit<ICheckboxProps, "_readOnly">
_icon
Icon related props can be passed in _icon.
_interactionBox
You can style interaction box around the checkbox using this.
Type: Omit<ICheckboxProps, "_interactionBox">
onChange
Function called when the state of the checkbox changes.
Type: (isSelected: boolean) => void
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: string
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
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