Components

Checkbox

Toggle a boolean or select multiple items in a list. Checked state uses the Yuno primary. The CheckboxField compound handles label and description in a single component.

Updated Jul 18, 2026 by Juan Pablo Turina

Anatomy

Email notifications

Weekly summary and critical alerts.

1
Box (Checkbox root)
Radix Checkbox.Root: size-4, rounded-sm, border-input. Checked / indeterminate fill with the Yuno primary.
2
Indicator
The mark inside the box: a light Check when checked, a bold Minus when indeterminate.
3
Label
Clickable text-sm medium bound to the box via htmlFor. CheckboxField wires it for you.
4
Description
Optional muted line below the label for context (a privacy note, a consequence).
5
Field container
CheckboxField: a flex row (box + label/description column) with an 8px gap.

Primitive

The base Checkbox is just the box. Use it when you need a custom layout (e.g. checkbox inside a table cell).

Box only

Accept terms

<div className="flex items-center gap-2">
  <Checkbox id="terms" defaultChecked />
  <Label htmlFor="terms">Accept terms</Label>
</div>

States

<Checkbox />                          {/* Unchecked */}
<Checkbox defaultChecked />           {/* Checked */}
<Checkbox checked="indeterminate" />  {/* Indeterminate */}
<Checkbox disabled />                 {/* Disabled */}
<Checkbox disabled defaultChecked />  {/* Disabled checked */}

CheckboxField

Compound with optional label and description. Both are optional — you can render just the box, box + label, box + description, or all three.

Label only

Send me product updates

<CheckboxField
  id="marketing"
  label="Send me product updates"
  containerClassName="w-full max-w-sm"
/>

Label + description

I accept the terms and conditions

You can review them any time in Settings.

<CheckboxField
  id="terms-field"
  defaultChecked
  label="I accept the terms and conditions"
  description="You can review them any time in Settings."
  containerClassName="w-full max-w-sm"
/>

Multi-select list

Payins

Charges and one-off payments.

Payouts

Disbursements to sellers.

Refunds

Not available on your plan.

<div className="grid gap-4 w-full max-w-sm">
  <CheckboxField label="Payins" defaultChecked
    description="Charges and one-off payments." />
  <CheckboxField label="Payouts"
    description="Disbursements to sellers." />
  <CheckboxField label="Refunds" disabled
    description="Not available on your plan." />
</div>

Import

Copy this import line at the top of the file where you compose this atom.

Primitive + Field compound. Use Label only when composing the primitive by hand.

import { Checkbox, CheckboxField } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

Props

Everything else from the underlying HTML or Radix primitive is forwarded via ...props.

Prop	Type	Default	Description
checked / defaultChecked	boolean \| "indeterminate"	—	Controlled or uncontrolled state. Pass "indeterminate" for a partial selection (renders a Minus).
onCheckedChange	(checked: boolean \| 'indeterminate') => void	—	Fires when the user toggles the box.
disabled	boolean	false	Dims the box (opacity-50) and blocks interaction.
id	string	—	Associates the box with a Label via htmlFor. CheckboxField auto-generates one via useId if omitted.
aria-label	string	—	Required when no visible label is paired (e.g. Checkbox inside a table row).
CheckboxField.label	React.ReactNode	—	Visible label next to the box. Clicking it toggles the box.
CheckboxField.description	React.ReactNode	—	Optional muted line below the label for context.
CheckboxField.containerClassName	string	—	Merged with the outer flex container. Use w-* utilities to set row width.

When to use

Multi-select in lists.
Terms & conditions acceptance.
Boolean settings in a list of multiple related toggles.

When not to use

Mutually exclusive single choice — use a radio button.
Immediate on/off action — use Switch.

Usage

Prefer CheckboxField for form usage — the label click behavior is wired for you.
For 'agree to terms', use CheckboxField with label so the whole label is clickable.
For lists, align checkboxes vertically for scanability.
Use description for context that helps the user decide (privacy note, consequence).

Don't

Don't use for immediate actions (like enabling a feature) — use Switch.
Don't hide a required checkbox behind subtle styling.
Don't put critical warnings in the description — use a Callout below the field instead.

Cross-links to atoms and patterns you may reach for next.

Radio groupFor a single mutually-exclusive choice.
SwitchFor an immediate on/off action.
TableCheckbox column for bulk row selection.