Checkbox

Demo

Default checkbox.

<Checkbox.Root />

Variants

Primary and neutral color variants in unchecked, checked, and indeterminate states.

<Checkbox.Root variant="primary" defaultChecked />
<Checkbox.Root variant="neutral" defaultChecked />

Disabled

Disabled checkbox in unchecked, checked, and indeterminate states.

<Checkbox.Root disabled />
<Checkbox.Root disabled checked />
<Checkbox.Root disabled checked="indeterminate" />

With Label

Checkboxes paired with Label component for form usage.

<div className="flex items-center gap-2">
  <Checkbox.Root id="c1" />
  <Label.Root htmlFor="c1">SMS Verification</Label.Root>
</div>

With Label Extended

Checkboxes with labels, sublabels, badges, descriptions, and link buttons.

<div className="flex items-center gap-2">
  <Checkbox.Root id="c1" />
  <Label.Root htmlFor="c1">
    Label
    <Label.Sub>(Sublabel)</Label.Sub>
    <Badge.Root>NEW</Badge.Root>
  </Label.Root>
</div>

With Form Field

Checkbox group composed with FormField for consistent label and hint.

<FormField.Root label="Notifications" hint="Choose how you want to be notified.">
  <div className="flex flex-col gap-3">
    <div className="flex items-center gap-2">
      <Checkbox.Root id="email" defaultChecked />
      <Label.Root htmlFor="email" className="text-paragraph-sm">
        Email notifications
      </Label.Root>
    </div>
    <div className="flex items-center gap-2">
      <Checkbox.Root id="sms" />
      <Label.Root htmlFor="sms" className="text-paragraph-sm">
        SMS notifications
      </Label.Root>
    </div>
    <div className="flex items-center gap-2">
      <Checkbox.Root id="push" />
      <Label.Root htmlFor="push" className="text-paragraph-sm">
        Push notifications
      </Label.Root>
    </div>
  </div>
</FormField.Root>

Checkbox.Root

The checkbox component with animated SVG check/indeterminate indicators.