Toggle Switch Component

Default Toggle (Medium)

<label class="elv-toggle">
  <input type="checkbox" class="elv-toggle__input" aria-label="Toggle setting">
  <span class="elv-toggle__track">
    <span class="elv-toggle__thumb"></span>
  </span>
</label>

With Label (Right)

Enable notifications Auto-save enabled

<label class="elv-toggle">
  <input type="checkbox" class="elv-toggle__input">
  <span class="elv-toggle__track">
    <span class="elv-toggle__thumb"></span>
  </span>
  <span class="elv-toggle__label">Enable notifications</span>
</label>

With Label (Left)

Email notifications Two-factor authentication

<label class="elv-toggle elv-toggle--label-left">
  <input type="checkbox" class="elv-toggle__input">
  <span class="elv-toggle__track">
    <span class="elv-toggle__thumb"></span>
  </span>
  <span class="elv-toggle__label">Email notifications</span>
</label>

Size Variants

Small toggle (36x20)

Medium toggle (48x24) — Default

Large toggle (60x28)

<!-- Small -->
<label class="elv-toggle elv-toggle--sm">
  <input type="checkbox" class="elv-toggle__input">
  <span class="elv-toggle__track">
    <span class="elv-toggle__thumb"></span>
  </span>
  <span class="elv-toggle__label">Small toggle</span>
</label>

<!-- Medium (default) -->
<label class="elv-toggle">
  <input type="checkbox" class="elv-toggle__input">
  <span class="elv-toggle__track">
    <span class="elv-toggle__thumb"></span>
  </span>
  <span class="elv-toggle__label">Medium toggle</span>
</label>

<!-- Large -->
<label class="elv-toggle elv-toggle--lg">
  <input type="checkbox" class="elv-toggle__input">
  <span class="elv-toggle__track">
    <span class="elv-toggle__thumb"></span>
  </span>
  <span class="elv-toggle__label">Large toggle</span>
</label>

States

Off state (hover to see effect)

On state (purple background)

Focus state (tab to see outline)

Disabled off

Disabled on

<!-- Off state -->
<label class="elv-toggle">
  <input type="checkbox" class="elv-toggle__input">
  <span class="elv-toggle__track">
    <span class="elv-toggle__thumb"></span>
  </span>
  <span class="elv-toggle__label">Off state</span>
</label>

<!-- On state -->
<label class="elv-toggle">
  <input type="checkbox" class="elv-toggle__input" checked>
  <span class="elv-toggle__track">
    <span class="elv-toggle__thumb"></span>
  </span>
  <span class="elv-toggle__label">On state</span>
</label>

<!-- Disabled -->
<label class="elv-toggle elv-toggle--disabled">
  <input type="checkbox" class="elv-toggle__input" disabled>
  <span class="elv-toggle__track">
    <span class="elv-toggle__thumb"></span>
  </span>
  <span class="elv-toggle__label">Disabled</span>
</label>

With Helper Text

Marketing emails

Receive updates about new features and products

Share usage data

Help us improve by sharing anonymous usage statistics

<div class="form-group">
  <label class="elv-toggle">
    <input type="checkbox" class="elv-toggle__input" checked>
    <span class="elv-toggle__track">
      <span class="elv-toggle__thumb"></span>
    </span>
    <span class="elv-toggle__label">Marketing emails</span>
  </label>
  <p class="elv-toggle-helper">Receive updates about new features</p>
</div>

Settings Panel Example

Notification Settings

Push notifications

Get notified about important updates

Email notifications

Receive email summaries of your activity

SMS notifications

Get text messages for critical alerts

Desktop notifications

Requires desktop app installation

Accessibility Notes

Keyboard Navigation: Tab to focus, Space to toggle on/off
Focus State: 2px purple outline with offset — CRITICAL for accessibility
ARIA Labels: Include aria-label when label text is not visible
Screen Readers: Native checkbox announces "checked" or "not checked" state
Reduced Motion: Respects prefers-reduced-motion setting
Touch Targets: Minimum 24px height for default, meets WCAG guidelines
Disabled State: Use disabled attribute and add elv-toggle--disabled class to label
Helper Text: Use descriptive text below toggle to explain what it controls

Design System Specs

Property	Small	Medium (Default)	Large
Track Width × Height	36px × 20px	48px × 24px	60px × 28px
Thumb Size	12px × 12px	16px × 16px	20px × 20px
Label Font Size	12px	14px	16px
Track (Off)	#dfdfe2 (border-light)
Track (On)	#5746b2 (P100)
Track (Hover Off)	#b0afb6 (N40)
Track (Hover On)	#45388f (P120)
Track (Disabled Off)	#f2f2f3 (N10)
Track (Disabled On)	#b0afb6 (N40)
Thumb Color	#ffffff (Pure White)
Thumb Shadow	0 2px 4px 0 rgba(32, 31, 35, 0.12)
Focus Outline	2px solid #5746b2 (P100) with 2px offset
Border Radius	50% of height (pill shape)
Transition Duration	150ms cubic-bezier(0.4, 0, 0.2, 1)
Label Weight	600 (Semibold)
Gap (label to track)	8px (space-2)

Usage Guidelines

When to use toggles:

Settings and preferences that take effect immediately
Binary on/off states (enable/disable features)
Individual settings in a list or panel

When NOT to use toggles:

Form submissions that require a "Save" action (use checkbox instead)
Multiple related options (use checkbox group or radio buttons)
Destructive or critical actions (use explicit button confirmation)

Best practices:

Use descriptive labels that clearly state what the toggle controls
Add helper text to explain the impact of toggling on/off
Place label on the left for settings panels (standard pattern)
Use medium size (default) for most UI contexts
Group related toggles together in panels or sections