Checkbox

Multi-select option, single yes/no, grouped lists.
One job, a platform's own control: a Checkbox that is one setting (a yes/no, a consent, an opt-in) renders the platform's switch on iOS and Android, where a single setting is a switch (Material 3 on phones included), and stays a checkbox on the web; its role follows what renders (switch there, checkbox here). A Checkbox that selects items in a list, a table's rows or a "select all" parent takes selection: the web keeps the checkbox, Android the Material 3 checkbox, and iOS draws the edit-mode selection circle. indeterminate implies selection, since a mixed state belongs to a "select all" parent and a switch has none.
Pass ref to access the interactive checkbox row, including its label. Use useRef<ComponentRef<typeof Checkbox>>(null) from React, or useRef<View>(null) with React Native's View type. Object and callback refs are supported and detach on unmount. Calling ref.current?.focus() or .blur() delegates to the host without activating the control. Browser focus is supported; native focus depends on the platform and React Native version, and is separate from accessibility focus.
On the web, Space activates the focused control on key release, and Enter also activates it. Holding Space does not repeat the change. Moving focus away, disabling the control, or composing text cancels a pending Space press.
Email notifications
iOS
Email notifications
Android
Web
tsx
<Checkbox defaultChecked>Email notifications</Checkbox>

Props

Prop
Description
children
ReactNode
Label text (the option's title) shown beside the box.
description
ReactNode
Optional muted secondary line rendered under the label, for the common title-plus-description option (a notification setting, a consent row). Supplying it builds the stacked title/description layout inside the control, so the caller never hand-composes a Row + Column + two Typography nodes and the whole row stays tappable.
checked
boolean
Controlled checked state; omit for uncontrolled use.
defaultChecked
boolean
Initial state for uncontrolled use (a bare <Checkbox /> is interactive).
indeterminate
boolean
Mixed state: some-but-not-all selected. Shown as a dash, not a tick. Takes visual precedence over `checked`. Implies `selection`: a mixed state belongs to a list's select-all, and a switch has none.
selection
boolean
A checkbox that selects an item in a list or a bulk selection (a table's rows, a list in edit mode, a select-all), rather than one on/off setting. The web draws the checkbox, iOS the edit-mode selection circle, Android the Material 3 checkbox. Without it a Checkbox is one setting, which iOS and Android render as their switch (role `switch`), so a settings row reads the way each platform writes it.
onChange
(next: boolean) => void
Fired with the next checked value when the row is pressed (both modes). Web keyboard activation supports Space on release and Enter.
onValueChange
(next: boolean) => void
Alias of onChange, for parity with RN's value-style callbacks.
accessibilityLabel
string
Accessible name for a LABEL-LESS checkbox (one with no `children`, e.g. a row selector in a table). With a visible label the label itself is the name; without one this is what a screen reader announces.
testID
string
E2E hook forwarded to the pressable row.
small
boolean
Size (pick one; default is the base box).
large
boolean
Size (pick one; default is the base box).
disabled
boolean
State.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.
ref
React.Ref<View>
Ref to the interactive checkbox row, including its label. Typed as a React Native View. On web, React Native Web exposes its DOM host; focus() and blur() move browser focus. Native host behavior depends on the platform and React Native version. Calling focus() does not activate the control or call accessibility focus APIs.

Do & Don’t

Unchecked

Don’t
A consent box that starts checked opts users in by default; under GDPR pre-ticked consent is not consent.
Do
Leave opt-in consent unchecked so agreeing is a deliberate act the user takes.

Checked

Don’t
A fully checked parent claims every child is selected when only one is, so the state reads as a lie.
Do
Show the parent indeterminate (a dash, not a tick) when only some children are checked.

Disabled

Don’t
A disabled option with no reason leaves users stuck and guessing.
Do
Say why it's unavailable, like a plan gate, or don't show it at all.

Selection

Don’t
Plan
Checkboxes allow multiple selections; for a one-of choice they let users pick contradictory options.
Do
Plan
Radios for one-of-many; reserve checkboxes for independent multi-select.

With description

Don’t
Email notifications
Get notified when activity happens on your account.
A detached checkbox makes only the 16px box tappable; the label text does nothing.
Do
Pass a description and the control stacks the title over its secondary line for you, box aligned to the first text line and the whole row tappable.
← ButtonGroup
Chip →