CheckboxCheckboxes allow the user to select one or more items from a set.
They can be used to turn an option on or off, or to indicate approval or verification.

Overview

Usage Examples

Styles

Property	Component
Default
Light

States

Property	Component
Un-Checked
Checked
Indeterminate
Validation Error
Disabled

Accessories

Property	Component
Label A label can be displayed next to the Checkbox.

Spec

SizeThe checkbox comes only in one size, and cannot be resized. Size: 24x24

UX Guidelines

PositionFor screens requiring multiple selections, use the Multi-Select List.
If a Checkbox is used to indicate approval or verification, place it with a label to its right.

Checkbox GroupUse ListItem component to group multiple options for the user to choose from.

Dev

PlaygroundCode Example

INFO

This component support margin, background modifiers.

TIP

This component extends the basic/TouchableOpacity props.

APIThis is the list of additional props for the component

borderRadius

number

The Checkbox border radius

color

string

The Checkbox color

containerStyle

ViewStyle

Custom styling for the checkbox and label container

disabled

boolean

Whether the checkbox should be disabled

iconColor

string

The selected icon color

label

string

Add a label to the Checkbox

labelProps

TextProps

Props to pass on to the label component

labelStyle

TextStyle

Pass to style the label

onChangeValidity

(isValid: boolean) => void

Callback for when field validity has changed

onValueChange

(value) => void

Callback function for value change event

outline

boolean

Alternative Checkbox outline style

required

boolean

Whether the checkbox is required

selectedIcon

ImageRequireSource

The icon asset to use for the selected indication

size

number

The Checkbox size, affect both width and height

style

ViewStyle

Custom styling for the Checkbox

value

boolean

The Checkbox value. If true the switch will be turned on. Default value is false