Checkbox

A control that allows the user to toggle between checked and unchecked states.

export default function CheckboxHero() {
  return (
    <div className="flex flex-col gap-2">
      <label className="flex items-center gap-2">
        <Checkbox defaultChecked />
        <span className="text-sm text-foreground">Checked</span>
      </label>
      <label className="flex items-center gap-2">
        <Checkbox />
        <span className="text-sm text-foreground">Unchecked</span>
      </label>
      <label className="flex items-center gap-2">
        <Checkbox indeterminate />
        <span className="text-sm text-foreground">Indeterminate</span>
      </label>
    </div>
  );
}

Installation

pnpm dlx shadcn@latest add "https://ora-ui.com/r/checkbox.json"

Usage

import { Checkbox } from '@/registry/ui/checkbox';

<label className="flex items-center gap-2">
  <Checkbox defaultChecked />
  <span>Accept terms and conditions</span>
</label>;

Examples

Default

A checkbox paired with a label using a native label element.

export default function CheckboxDefault() {
  return (
    <label className="flex items-center gap-2">
      <Checkbox defaultChecked />
      <span className="text-sm text-foreground">Accept terms and conditions</span>
    </label>
  );
}

Variant

Two visual styles are available: solid fills the checkbox on check, surface uses a border treatment.

export function CheckboxSolid() {
  return (
    <label className="flex items-center gap-2">
      <Checkbox variant="solid" defaultChecked />
      <span className="text-sm text-foreground">Accept terms and conditions</span>
    </label>
  );
}

Theme

Use the theme prop to apply a color theme. gray is the default; accent uses the brand color.

export function CheckboxGray() {
  return (
    <label className="flex items-center gap-2">
      <Checkbox theme="gray" defaultChecked />
      <span className="text-sm text-foreground">Accept terms and conditions</span>
    </label>
  );
}

Indeterminate

Set indeterminate to render a mixed state, useful for parent checkboxes in a group.

export default function CheckboxIndeterminate() {
  const [values, setValues] = React.useState(['email']);

  const allChecked = values.length === OPTIONS.length;
  const someChecked = values.length > 0 && !allChecked;

  return (
    <CheckboxGroup value={values} onValueChange={setValues} allValues={OPTIONS.map((o) => o.value)}>
      <label className="flex items-center gap-2">
        <Checkbox
          parent
          checked={allChecked}
          indeterminate={someChecked}
          onCheckedChange={() => setValues(allChecked ? [] : OPTIONS.map((o) => o.value))}
        />
        <span className="text-sm text-foreground">All notifications</span>
      </label>
      <div className="ml-6 flex flex-col gap-2 border-l border-line-subtle pl-4">
        {OPTIONS.map((option) => (
          <label key={option.value} className="flex items-center gap-2">
            <Checkbox value={option.value} />
            <span className="text-sm text-foreground">{option.label}</span>
          </label>
        ))}
      </div>
    </CheckboxGroup>
  );
}

API Reference

For more information, see the Base UI Checkbox API Reference.