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 />
<Checkbox defaultChecked />
<Checkbox defaultChecked="indeterminate" />
<Checkbox defaultChecked disabled />

Emphasized

Pass emphasized to render the checkbox in the accent color. Use it sparingly, when the selection deserves extra attention.

<Checkbox emphasized />
<Checkbox emphasized defaultChecked />
<Checkbox emphasized defaultChecked="indeterminate" />
<Checkbox emphasized defaultChecked disabled />

With a label

Pass label to render the control inside a clickable label. Layout and spacing are handled by the component.

<Checkbox
  label="Send me product updates"
  checked={checked}
  onCheckedChange={setChecked}
/>

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.

label

string

Renders the checkbox inside a clickable label with the given content, handling layout and spacing internally.

emphasized

booleandefault: false

Renders the checkbox in the accent color instead of the monochromatic default.

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.