Version: 3.2.0

CheckBox

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

Examples#

Basic#

Controlled#

Uncontrolled#

Disabled#

Invalid#

Custom Color#

Custom Icon#

Size#

Checkbox Group#

Form Controlled#

Basic (With Ref)#

Props#

Checkbox#

Name Type Description Default
wrapperRef any Ref to be passed to Icon's wrapper Box -
id string assign id to checkbox -
name string The name of the input field in a checkbox. -
value string The value to be used in the checkbox input. This is the value that will be returned on form submission. -
colorScheme string The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red"). -
defaultIsChecked boolean If true, the checkbox will be initially checked. (use defaultValue prop if using it inside Checkbox.Group) -
isChecked boolean If true, the checkbox will be checked. You'll need to pass onChange to update it's value (since it's now controlled). -
isIndeterminate boolean If true, the checkbox will be indeterminate. This only affects the icon shown inside checkbox. -
isDisabled boolean If true, the checkbox will be disabled. -
isInvalid boolean If true, the checkbox is marked as invalid. -
isReadOnly boolean If true, the checkbox is marked as readonly. -
size ResponsiveValue<"sm" | "md" | "lg"> The size (width and height) of the checkbox. 'md'
icon Element If given, will use this icon instead of the default. -
_disabled Omit<ICheckboxProps, "_disabled"> Passed props wilICheckboxGroupPropsl be applied on disabled state. -
_checked Omit<ICheckboxProps, "_checked"> Passed props will be applied on checked state. -
_unchecked Omit<ICheckboxProps, "_unchecked"> Passed props will be applied on unchecked state. -
_focus Omit<ICheckboxProps, "_focus"> Passed props will be applied on focus state. -
_hover Omit<ICheckboxProps, "_hover"> Passed props will be applied on hover state. -
_invalid Omit<ICheckboxProps, "_invalid"> Passed props will be applied on invalid state. -
_pressed Omit<ICheckboxProps, "_pressed"> Passed props will be applied on pressed state on native. -
_readOnly Omit<ICheckboxProps, "_readOnly"> Passed props will be applied on readonly state. -
_icon IIconProps Icon related props can be passed in _icon. -
_interactionBox Omit<ICheckboxProps, "_interactionBox"> You can style interaction box around the checkbox using this. -
onChange (isSelected: boolean) => void Function called when the state of the checkbox changes. -

Checkbox implements Box

Checkbox.Group#

Name Type Description Default
id string assign id to checkbox group -
value string[] The value of the checkbox group. -
defaultValue string[] The initial value of the checkbox group. -
colorScheme string The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red"). -
size ResponsiveValue<"sm" | "md" | "lg"> The size (width and height) of the checkbox. -
onChange (values: any) => any The callback fired when any children Checkbox is checked or unchecked. -

CheckboxGroup implements Box

Styling#

NativeBase ships with a default theme for each component. Checkout the default theme of checkbox
We can easily extend the checkbox component theme using extendTheme function as shown below.
import { extendTheme, NativeBaseProvider } from "native-base";
const theme = extendTheme({
components: {
Checkbox: {
baseStyle: {},
defaultProps: {},
variants: {},
sizes: {},
}
}
});
function MyApp() {
return (
<NativeBaseProvider theme={theme}>
{/* Rest of the app goes here */}
</NativeBaseProvider>
)
}
Read more about extending component theme here.

Accessibility#

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

Keyboard Interactions#

KeyDescription
SpaceChecks/unchecks the checkbox.