Checkbox, Radio, Switch

Choices

<div class="dsgn-cluster" data-gap="l">
  <label class="dsgn-choice"><input type="checkbox" class="dsgn-checkbox" checked> Send a copy to me</label>
  <label class="dsgn-choice"><input type="radio" class="dsgn-radio" name="dx-plan" checked> Monthly</label>
  <label class="dsgn-choice"><input type="radio" class="dsgn-radio" name="dx-plan"> Yearly</label>
  <label class="dsgn-choice"><input type="checkbox" role="switch" class="dsgn-switch" checked> Reminders</label>
  <label class="dsgn-choice"><input type="checkbox" class="dsgn-checkbox" disabled> Locked</label>
</div>

Usage

Native inputs, restyled. The whole label is the click target and is exactly one control height tall (line-height + 2 × pad-y), so a checkbox row lines up with a button or input. Checkbox/radio box = control-indicator; switch track = line-height tall, line-height + indicator wide. States: :hover, :focus-visible, :checked, :indeterminate (checkbox), aria-invalid, :disabled.

Details

Classes

.dsgn-choice .dsgn-checkbox .dsgn-radio .dsgn-switch

Tokens used

--dsgn-border --dsgn-border-strong --dsgn-border-width --dsgn-control-font-size --dsgn-control-gap --dsgn-control-indicator --dsgn-control-line-height --dsgn-control-pad-y --dsgn-control-solid --dsgn-control-solid-hover --dsgn-control-solid-text --dsgn-danger-solid --dsgn-duration --dsgn-duration-fast --dsgn-ease --dsgn-focus --dsgn-focus-offset --dsgn-focus-width --dsgn-font-icon --dsgn-font-sans --dsgn-font-weight-regular --dsgn-icon-grade --dsgn-neutral-subtle --dsgn-neutral-subtle-pressed --dsgn-neutral-text --dsgn-radius-full --dsgn-radius-m --dsgn-radius-s --dsgn-shadow-control --dsgn-space-4 --dsgn-surface-raised --dsgn-text --dsgn-text-disabled --dsgn-text-muted

In Figma

Checkbox · Radio · Switch

Import alone

dsgn.systems/components/choice.css