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 8, 2026 by Leonardo Posada

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
<div className="flex items-center gap-3">
  <Checkbox id="terms" defaultChecked />
  <Label htmlFor="terms">I agree to the terms</Label>
</div>
States
<Checkbox />
<Checkbox defaultChecked />
<Checkbox disabled />
<Checkbox disabled defaultChecked />

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
<CheckboxField
  id="marketing"
  label="Send me marketing emails"
/>
Label + description

You can revoke consent from your account settings at any time.

<CheckboxField
  id="tos"
  defaultChecked
  label="I accept the Terms of Service"
  description="You can revoke consent from your account settings at any time."
/>
Description only

Include archived items in the search results.

<CheckboxField
  id="hidden-label"
  aria-label="Include archived items"
  description="Include archived items in the search results."
/>
Group

Weekly summary and critical alerts.

Only for account activity.

Not available on your plan.

<div className="grid gap-3">
  <CheckboxField label="Email notifications" defaultChecked
    description="Weekly summary and critical alerts." />
  <CheckboxField label="Push notifications"
    description="Only for account activity." />
  <CheckboxField label="SMS notifications" disabled
    description="Not available on your plan." />
</div>

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

Do
  • 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.