Checkbox & Radio Component

Checkbox — Default

I agree to the terms and conditions Send me marketing emails

<label class="elv-choice elv-choice--checkbox">
  <input type="checkbox" class="elv-choice__input" />
  <span class="elv-choice__box"></span>
  <span class="elv-choice__label">Label text</span>
</label>

Checkbox — All States

Unchecked Checked Indeterminate (for "select all" scenarios) Disabled unchecked Disabled checked

Error state — you must accept terms

You must accept the terms to continue

Hover over this checkbox to see border change

<!-- Unchecked -->
<label class="elv-choice elv-choice--checkbox">
  <input type="checkbox" class="elv-choice__input" />
  <span class="elv-choice__box"></span>
  <span class="elv-choice__label">Unchecked</span>
</label>

<!-- Checked -->
<label class="elv-choice elv-choice--checkbox">
  <input type="checkbox" class="elv-choice__input" checked />
  <span class="elv-choice__box"></span>
  <span class="elv-choice__label">Checked</span>
</label>

<!-- Indeterminate (set via JavaScript) -->
<input type="checkbox" id="checkbox-id" class="elv-choice__input" />
<script>
  document.getElementById('checkbox-id').indeterminate = true;
</script>

<!-- Disabled -->
<input type="checkbox" class="elv-choice__input" disabled />

<!-- Error -->
<label class="elv-choice elv-choice--checkbox elv-choice--error">
  <input type="checkbox" class="elv-choice__input" aria-invalid="true" />
  <span class="elv-choice__box"></span>
  <span class="elv-choice__label">Label</span>
</label>
<p class="elv-choice__error" role="alert">Error message</p>

Checkbox — With Helper Text

Enable two-factor authentication

Adds an extra layer of security to your account

Subscribe to weekly digest

Get the best software reviews delivered to your inbox

<label class="elv-choice elv-choice--checkbox">
  <input type="checkbox" class="elv-choice__input" aria-describedby="helper-id" />
  <span class="elv-choice__box"></span>
  <span class="elv-choice__label">Label</span>
</label>
<p id="helper-id" class="elv-choice__helper">Helper text</p>

Checkbox Group — Stacked

Select your interests *

Design Software Development Tools Marketing Software Sales Tools

<div role="group" aria-labelledby="group-label">
  <span id="group-label" class="elv-choice-group__label">Group label</span>
  <div class="elv-choice-group">
    <label class="elv-choice elv-choice--checkbox">
      <input type="checkbox" class="elv-choice__input" name="group" value="1" />
      <span class="elv-choice__box"></span>
      <span class="elv-choice__label">Option 1</span>
    </label>
    <!-- More options... -->
  </div>
</div>

Checkbox Group — Inline

Notification preferences

Email SMS Push

<div class="elv-choice-group elv-choice-group--inline">
  <label class="elv-choice elv-choice--checkbox">...</label>
  <label class="elv-choice elv-choice--checkbox">...</label>
  <label class="elv-choice elv-choice--checkbox">...</label>
</div>

Radio — Default

Option A Option B (selected) Option C

<label class="elv-choice elv-choice--radio">
  <input type="radio" class="elv-choice__input" name="group-name" />
  <span class="elv-choice__box"></span>
  <span class="elv-choice__label">Label text</span>
</label>

Radio — All States

Unselected Selected Disabled unselected Disabled selected

Error state — selection required

Please select an option

Hover over this radio to see border change

<!-- Unselected -->
<label class="elv-choice elv-choice--radio">
  <input type="radio" class="elv-choice__input" name="group" />
  <span class="elv-choice__box"></span>
  <span class="elv-choice__label">Unselected</span>
</label>

<!-- Selected -->
<label class="elv-choice elv-choice--radio">
  <input type="radio" class="elv-choice__input" name="group" checked />
  <span class="elv-choice__box"></span>
  <span class="elv-choice__label">Selected</span>
</label>

<!-- Disabled -->
<input type="radio" class="elv-choice__input" disabled />

<!-- Error -->
<label class="elv-choice elv-choice--radio elv-choice--error">
  <input type="radio" class="elv-choice__input" aria-invalid="true" />
  <span class="elv-choice__box"></span>
  <span class="elv-choice__label">Label</span>
</label>
<p class="elv-choice__error" role="alert">Error message</p>

Radio — With Helper Text

Basic Plan

$9/month — Perfect for individuals

Pro Plan

$29/month — For growing teams

Enterprise Plan

Custom pricing — Advanced features and support

<label class="elv-choice elv-choice--radio">
  <input type="radio" class="elv-choice__input" aria-describedby="helper-id" />
  <span class="elv-choice__box"></span>
  <span class="elv-choice__label">Label</span>
</label>
<p id="helper-id" class="elv-choice__helper">Helper text</p>

Radio Group — Stacked

Choose your company size *

1-10 employees 11-50 employees 51-200 employees 201+ employees

<fieldset>
  <legend class="elv-choice-group__label">Group label</legend>
  <div class="elv-choice-group">
    <label class="elv-choice elv-choice--radio">
      <input type="radio" class="elv-choice__input" name="group" value="1" />
      <span class="elv-choice__box"></span>
      <span class="elv-choice__label">Option 1</span>
    </label>
    <!-- More options... -->
  </div>
</fieldset>

Radio Group — Inline

How did you hear about us?

Search Engine Social Media Referral Other

<div class="elv-choice-group elv-choice-group--inline">
  <label class="elv-choice elv-choice--radio">...</label>
  <label class="elv-choice elv-choice--radio">...</label>
  <label class="elv-choice elv-choice--radio">...</label>
</div>

Large Variant (Better Touch Targets)

Large checkbox for mobile Large radio for mobile

<!-- Large checkbox -->
<label class="elv-choice elv-choice--checkbox elv-choice--lg">
  <input type="checkbox" class="elv-choice__input" />
  <span class="elv-choice__box"></span>
  <span class="elv-choice__label">Label</span>
</label>

<!-- Large radio -->
<label class="elv-choice elv-choice--radio elv-choice--lg">
  <input type="radio" class="elv-choice__input" name="group" />
  <span class="elv-choice__box"></span>
  <span class="elv-choice__label">Label</span>
</label>

Complete Form Example

Accessibility Notes

Labels: Always wrap input and label in a <label> element for clickability
Radio Groups: Use <fieldset> and <legend> for radio button groups
Checkbox Groups: Use role="group" and aria-labelledby for checkbox groups
Focus State: 3px solid #c3bde5 (light purple P40) outline offset by 1px — CRITICAL for keyboard navigation
Keyboard Navigation: Space to toggle checkbox/radio, Tab to move between inputs
Error States: Use aria-invalid="true" and aria-describedby for error messages
Helper Text: Use aria-describedby to link helper text to input
Required Fields: Use required attribute for form validation
Touch Targets: Minimum 20px × 20px, use 24px for better mobile accessibility (--lg variant)
Indeterminate: Set via JavaScript: checkbox.indeterminate = true

Design System Specs

Property	Value	Token
Box Size (default)	20px × 20px	—
Box Size (large)	24px × 24px	—
Background (unchecked)	#ffffff	N0 / neutral-0
Border (unchecked)	1px solid #b0afb6	border-medium / N40
Border Radius (checkbox)	4px	radius-xs
Border Radius (radio)	50%	—
Checked Background	#5746b2	P100
Checked Border	2px solid #5746b2	P100
Focus State	3px solid #c3bde5, offset 1px	P40
Hover Background (unchecked)	#ebe9f6	P20 / primary-20
Error Border	2px solid #eb2000	R120
Disabled Background	#f2f2f3	N10
Disabled Border	#dfdfe2	N20 / border-neutral
Disabled Checked Background	#dfdfe2	N20
Label Font Size	14px (default), 16px (large)	—
Label Font Weight	400	Regular
Label Color (checkbox)	#201f23	text-default
Label Color (radio)	#5746b2	text-primary / P100
Radio Inner Circle	sm: 6px, md: 12px, lg: 18px	scale-40/60/75
Helper Text Size	12px	—
Helper Text Color	#6f6d78	text-nonessential
Error Message Size	12px	—
Error Message Weight	600	Semibold
Error Message Color	#b21800	R140

Spacing Guidelines

Element	Spacing
Box to label (sm)	4px (gap-1)
Box to label (md/lg)	8px (gap-2)
Between choices (stacked)	12px
Between choices (inline)	24px
Label to helper text	4px
Group label to choices	8px