REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Form Controls

Checkbox

A compound checkbox component supporting individual and grouped selection with indicator, icon, and label sub-components.

Example

Preview

Code

Props

Checkbox Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the checkbox container.

value *

string

—

The value associated with this checkbox, used by CheckboxGroup.

isChecked

boolean

—

Controlled checked state of the checkbox.

defaultIsChecked

boolean

—

Initial checked state when uncontrolled.

onChange

(isChecked: boolean) => void

—

Callback invoked when the checkbox state changes.

isDisabled

boolean

false

Disables the checkbox.

isInvalid

boolean

false

Applies invalid/error styling to the checkbox.

size

'xs' | 'sm' | 'md' | 'lg' | 'xl'

'md'

Controls the size of the checkbox.

CheckboxGroup Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the checkbox group container.

value

string[]

—

The controlled selected values.

defaultValue

string[]

—

The initial selected values when uncontrolled.

onChange

(values: string[]) => void

—

Callback invoked when the selected values change.

isDisabled

boolean

false

Disables all checkboxes in the group.

isInvalid

boolean

false

Applies invalid styling to all checkboxes in the group.

size

'xs' | 'sm' | 'md' | 'lg' | 'xl'

'md'

Controls the size of all checkboxes in the group.

CheckboxIndicator Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the checkbox indicator box.

CheckboxIcon Props

Prop

Type

Default

Description

as

React.ElementType

—

The icon component to render when checked.

className

string

—

NativeWind utility classes for the checkbox icon.

CheckboxLabel Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the checkbox label text.

Usage Guidelines

When to use

Use Checkbox when users need to select one or more items from a list of options.

Best practices

•

Use CheckboxGroup when managing multiple related checkboxes.

•

Provide clear, concise labels via CheckboxLabel.

•

Use isInvalid with FormControl to show validation errors.

Accessibility

Checkbox includes built-in checked/unchecked state announcements. Labels are automatically associated.

Related Components

Radio

A compound radio button component for single-selection within a group, with indicator, icon, and label sub-components.

Switch

A toggle switch for boolean on/off states with customizable track and thumb colors.

FormControl

A compound wrapper that provides shared state (disabled, invalid, required, read-only) to its label, helper text, and error message children.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License