Orbit

Checkbox

Source

A binary control for toggling a single option on or off, with support for an indeterminate mixed state. Built on Radix UI.

Overview

Use Checkbox for boolean choices in forms and lists. It is controlled via checked and onCheckedChange, and accepts the full Radix Checkbox API.

The indeterminate state communicates a partial selection, such as a parent checkbox whose children are only partly selected. Always pair a checkbox with a label for accessibility.

Basic

A controlled checkbox driven by React state.

const [checked, setChecked] = useState(true)

<Checkbox checked={checked} onCheckedChange={setChecked} />

States

Unchecked, checked, indeterminate and disabled.

<Checkbox checked={false} />
<Checkbox checked />
<Checkbox checked="indeterminate" />
<Checkbox checked disabled />

With a label

Wrap the control and its Text in a Box rendered as a label so the whole row is clickable.

<Box as="label" alignItems="center" columnGap="s">
  <Checkbox checked={checked} onCheckedChange={setChecked} />
  <Text variant="label" as="span">Send me product updates</Text>
</Box>

Props

checked

CheckboxPrimitive.CheckedState

Controlled checked state. Pass indeterminate to render the mixed state.

defaultChecked

CheckboxPrimitive.CheckedState

Initial state when the checkbox is uncontrolled.

onCheckedChange

((checked: CheckboxPrimitive.Ch…

Called when the checked state changes.

disabled

booleandefault: false

Prevents interaction and dims the control.

required

booleandefault: false

Marks the field as required within a form.

name

string

Form field name submitted with the form.

value

string

Value submitted when the checkbox is checked.

className

string

Merged onto the root element via class names.