switch component

Drop-in semantic component. See examples, sizes, variants, and source.

Toggle switch for binary on/off settings. Compose a switch label around an input type="checkbox", a track, and a thumb. For labelled rows use switch labeled; for full settings rows use switch-card or switch-list. Programmatic helpers ship in switch.js.

Basic Switches

Default Switch States

Default

Checked

Disabled

Disabled Checked

<div class="stack">
  <!-- Default State -->
  <div class="flex items-center justify-between">
    <span class="subhead text-gray-600">Default</span>
    <label class="switch">
      <input type="checkbox" />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <!-- Checked State -->
  <div class="flex items-center justify-between">
    <span class="subhead text-gray-600">Checked</span>
    <label class="switch">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <!-- Disabled State -->
  <div class="flex items-center justify-between">
    <span class="subhead text-gray-600">Disabled</span>
    <label class="switch">
      <input type="checkbox" disabled />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <!-- Disabled Checked -->
  <div class="flex items-center justify-between">
    <span class="subhead text-gray-600">Disabled Checked</span>
    <label class="switch">
      <input type="checkbox" checked disabled />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>
</div>

<div class="stack">
  
  <div class="flex items-center justify-between">
    <span class="subhead text-gray-600">Default</span>
    <label class="switch">
      <input type="checkbox" />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

<div class="flex items-center justify-between">
    <span class="subhead text-gray-600">Checked</span>
    <label class="switch">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

<div class="flex items-center justify-between">
    <span class="subhead text-gray-600">Disabled</span>
    <label class="switch">
      <input type="checkbox" disabled />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

<div class="flex items-center justify-between">
    <span class="subhead text-gray-600">Disabled Checked</span>
    <label class="switch">
      <input type="checkbox" checked disabled />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>
</div>

Size Variants

Tiny

Small

Default

Large

Big

<div class="stack">
  <div class="flex items-center justify-between">
    <span class="subhead text-gray-600 w-20">Tiny</span>
    <label class="switch xs">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <div class="flex items-center justify-between">
    <span class="subhead text-gray-600 w-20">Small</span>
    <label class="switch sm">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <div class="flex items-center justify-between">
    <span class="subhead text-gray-600 w-20">Default</span>
    <label class="switch">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <div class="flex items-center justify-between">
    <span class="subhead text-gray-600 w-20">Large</span>
    <label class="switch xl">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <div class="flex items-center justify-between">
    <span class="subhead text-gray-600 w-20">Big</span>
    <label class="switch lg">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>
</div>

<div class="flex items-center justify-between">
    <span class="subhead text-gray-600 w-20">Small</span>
    <label class="switch sm">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

<div class="flex items-center justify-between">
    <span class="subhead text-gray-600 w-20">Default</span>
    <label class="switch">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

<div class="flex items-center justify-between">
    <span class="subhead text-gray-600 w-20">Large</span>
    <label class="switch xl">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

Color Variants

Primary

Positive

Negative

Warning

Info

Purple

<div class="grid grid-cols-3 gap-4">
  <div class="row compact flex-col">
    <label class="switch primary">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
    <span class="footnote text-gray-600">Primary</span>
  </div>

  <div class="row compact flex-col">
    <label class="switch positive">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
    <span class="footnote text-gray-600">Positive</span>
  </div>

  <div class="row compact flex-col">
    <label class="switch negative">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
    <span class="footnote text-gray-600">Negative</span>
  </div>

  <div class="row compact flex-col">
    <label class="switch warning">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
    <span class="footnote text-gray-600">Warning</span>
  </div>

  <div class="row compact flex-col">
    <label class="switch info">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
    <span class="footnote text-gray-600">Info</span>
  </div>

  <div class="row compact flex-col">
    <label class="switch purple">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
    <span class="footnote text-gray-600">Purple</span>
  </div>
</div>

<div class="grid grid-cols-3 gap-4">
  <div class="row compact flex-col">
    <label class="switch primary">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
    <span class="footnote text-gray-600">Primary</span>
  </div>

<div class="row compact flex-col">
    <label class="switch positive">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
    <span class="footnote text-gray-600">Positive</span>
  </div>

<div class="row compact flex-col">
    <label class="switch negative">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
    <span class="footnote text-gray-600">Negative</span>
  </div>

<div class="row compact flex-col">
    <label class="switch warning">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
    <span class="footnote text-gray-600">Warning</span>
  </div>

<div class="row compact flex-col">
    <label class="switch purple">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
    <span class="footnote text-gray-600">Purple</span>
  </div>
</div>

Switches with Labels

Label Variations

Enable notifications

Dark mode

Marketing emails Receive emails about new products, features, and more.

<div class="stack">
  <!-- Label on Right -->
  <div class="switch labeled">
    <label>
      <input type="checkbox" />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
    <span class="label">Enable notifications</span>
  </div>

  <!-- Label on Left (Flipped) -->
  <div class="switch labeled flip">
    <label>
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
    <span class="label">Dark mode</span>
  </div>

  <!-- With Description -->
  <div class="switch labeled with-description">
    <label>
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
    <div class="label-content">
      <span class="label">Marketing emails</span>
      <span class="description">Receive emails about new products, features, and more.</span>
    </div>
  </div>
</div>

Switch Cards

Card Styles

Wi-Fi

Connect to wireless networks

Push Notifications

Get notified about important updates

Advanced Security

Premium feature - Upgrade to enable

<div class="space-y-3">
  <!-- Basic Card -->
  <div class="switch-card">
    <div class="content">
      <div class="text">
        <div class="title">Wi-Fi</div>
        <div class="subtitle">Connect to wireless networks</div>
      </div>
    </div>
    <label class="switch">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <!-- Card with Icon -->
  <div class="switch-card">
    <div class="content">
      <i class="icon bell w-5 h-5"></i>
      <div class="text">
        <div class="title">Push Notifications</div>
        <div class="subtitle">Get notified about important updates</div>
      </div>
    </div>
    <label class="switch">
      <input type="checkbox" />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <!-- Disabled Card -->
  <div class="switch-card disabled">
    <div class="content">
      <i class="icon lock w-5 h-5"></i>
      <div class="text">
        <div class="title">Advanced Security</div>
        <div class="subtitle">Premium feature - Upgrade to enable</div>
      </div>
    </div>
    <label class="switch">
      <input type="checkbox" disabled />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>
</div>

<div class="space-y-3">
  
  <div class="switch-card">
    <div class="content">
      <div class="text">
        <div class="title">Wi-Fi</div>
        <div class="subtitle">Connect to wireless networks</div>
      </div>
    </div>
    <label class="switch">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

<div class="switch-card">
    <div class="content">
      <i class="icon bell w-5 h-5"></i>
      <div class="text">
        <div class="title">Push Notifications</div>
        <div class="subtitle">Get notified about important updates</div>
      </div>
    </div>
    <label class="switch">
      <input type="checkbox" />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

<div class="switch-card disabled">
    <div class="content">
      <i class="icon lock w-5 h-5"></i>
      <div class="text">
        <div class="title">Advanced Security</div>
        <div class="subtitle">Premium feature - Upgrade to enable</div>
      </div>
    </div>
    <label class="switch">
      <input type="checkbox" disabled />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>
</div>

List Style

Airplane Mode

Disable all wireless connections

Bluetooth

Connect to nearby devices

Location Services

Allow apps to use your location

Do Not Disturb

Silence calls and notifications

<div class="border border-gray-200 rounded-lg overflow-hidden">
  <div class="switch-list">
    <div class="content">
      <div class="text">
        <div class="title">Airplane Mode</div>
        <div class="subtitle">Disable all wireless connections</div>
      </div>
    </div>
    <label class="switch">
      <input type="checkbox" />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <div class="switch-list">
    <div class="content">
      <div class="text">
        <div class="title">Bluetooth</div>
        <div class="subtitle">Connect to nearby devices</div>
      </div>
    </div>
    <label class="switch">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <div class="switch-list">
    <div class="content">
      <div class="text">
        <div class="title">Location Services</div>
        <div class="subtitle">Allow apps to use your location</div>
      </div>
    </div>
    <label class="switch">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <div class="switch-list">
    <div class="content">
      <div class="text">
        <div class="title">Do Not Disturb</div>
        <div class="subtitle">Silence calls and notifications</div>
      </div>
    </div>
    <label class="switch">
      <input type="checkbox" />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>
</div>

<div class="border border-gray-200 rounded-lg overflow-hidden">
  <div class="switch-list">
    <div class="content">
      <div class="text">
        <div class="title">Airplane Mode</div>
        <div class="subtitle">Disable all wireless connections</div>
      </div>
    </div>
    <label class="switch">
      <input type="checkbox" />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

<div class="switch-list">
    <div class="content">
      <div class="text">
        <div class="title">Bluetooth</div>
        <div class="subtitle">Connect to nearby devices</div>
      </div>
    </div>
    <label class="switch">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

<div class="switch-list">
    <div class="content">
      <div class="text">
        <div class="title">Location Services</div>
        <div class="subtitle">Allow apps to use your location</div>
      </div>
    </div>
    <label class="switch">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

<div class="switch-list">
    <div class="content">
      <div class="text">
        <div class="title">Do Not Disturb</div>
        <div class="subtitle">Silence calls and notifications</div>
      </div>
    </div>
    <label class="switch">
      <input type="checkbox" />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>
</div>

Integration Switches

Grouped Switches

Notification Channels

SMS

Push

Privacy Settings

Profile Visibility

Make your profile public

Show Online Status

Let others see when you're active

<!-- Horizontal Integration -->
<div class="integration-switch horizontal mb-6">
  <h4 class="title-3-semibold text-gray-700 mb-3">Notification Channels</h4>
  <div class="switches">
    <div class="switch labeled">
      <label>
        <input type="checkbox" checked />
        <span class="track">
          <span class="thumb"></span>
        </span>
      </label>
      <span class="label">Email</span>
    </div>

    <div class="switch labeled">
      <label>
        <input type="checkbox" checked />
        <span class="track">
          <span class="thumb"></span>
        </span>
      </label>
      <span class="label">SMS</span>
    </div>

    <div class="switch labeled">
      <label>
        <input type="checkbox" />
        <span class="track">
          <span class="thumb"></span>
        </span>
      </label>
      <span class="label">Push</span>
    </div>
  </div>
</div>

<!-- Vertical Integration with Cards -->
<div class="integration-switch">
  <h4 class="title-3-semibold text-gray-700 mb-3">Privacy Settings</h4>
  <div class="switches stack compact">
    <div class="switch-card">
      <div class="content">
        <div class="text">
          <div class="title">Profile Visibility</div>
          <div class="subtitle">Make your profile public</div>
        </div>
      </div>
      <label class="switch">
        <input type="checkbox" checked />
        <span class="track">
          <span class="thumb"></span>
        </span>
      </label>
    </div>

    <div class="switch-card">
      <div class="content">
        <div class="text">
          <div class="title">Show Online Status</div>
          <div class="subtitle">Let others see when you're active</div>
        </div>
      </div>
      <label class="switch">
        <input type="checkbox" />
        <span class="track">
          <span class="thumb"></span>
        </span>
      </label>
    </div>
  </div>
</div>

<div class="integration-switch horizontal mb-6">
  <h4 class="title-3-semibold text-gray-700 mb-3">Notification Channels</h4>
  <div class="switches">
    <div class="switch labeled">
      <label>
        <input type="checkbox" checked />
        <span class="track">
          <span class="thumb"></span>
        </span>
      </label>
      <span class="label">Email</span>
    </div>

<div class="integration-switch">
  <h4 class="title-3-semibold text-gray-700 mb-3">Privacy Settings</h4>
  <div class="switches stack compact">
    <div class="switch-card">
      <div class="content">
        <div class="text">
          <div class="title">Profile Visibility</div>
          <div class="subtitle">Make your profile public</div>
        </div>
      </div>
      <label class="switch">
        <input type="checkbox" checked />
        <span class="track">
          <span class="thumb"></span>
        </span>
      </label>
    </div>

<div class="switch-card">
      <div class="content">
        <div class="text">
          <div class="title">Show Online Status</div>
          <div class="subtitle">Let others see when you're active</div>
        </div>
      </div>
      <label class="switch">
        <input type="checkbox" />
        <span class="track">
          <span class="thumb"></span>
        </span>
      </label>
    </div>
  </div>
</div>

Interactive Examples

Programmatic Control

<div class="stack">
  <div>
    <div class="flex gap-2 mb-3">
      <button
        onclick="toggleSwitch('#demo-switch', true)"
        class="px-3 py-1 bg-green-600 text-white text-sm rounded hover:bg-green-700"
      >
        Turn On
      </button>
      <button
        onclick="toggleSwitch('#demo-switch', false)"
        class="px-3 py-1 bg-gray-600 text-white text-sm rounded hover:bg-gray-700"
      >
        Turn Off
      </button>
      <button
        onclick="toggleSwitch('#demo-switch')"
        class="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700"
      >
        Toggle
      </button>
    </div>
    <label class="switch" id="demo-switch">
      <input type="checkbox" />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

  <div>
    <div class="flex gap-2 mb-3">
      <button
        onclick="setSwitchState('#controlled-switch', true)"
        class="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700"
      >
        Enable
      </button>
      <button
        onclick="setSwitchState('#controlled-switch', false)"
        class="px-3 py-1 bg-red-600 text-white text-sm rounded hover:bg-red-700"
      >
        Disable
      </button>
    </div>
    <label class="switch" id="controlled-switch">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>
</div>

<div class="stack">
  <div>
    <div class="flex gap-2 mb-3">
      <button
        onclick="toggleSwitch('#demo-switch', true)"
        class="px-3 py-1 bg-green-600 text-white text-sm rounded hover:bg-green-700"
      >
        Turn On
      </button>
      <button
        onclick="toggleSwitch('#demo-switch', false)"
        class="px-3 py-1 bg-gray-600 text-white text-sm rounded hover:bg-gray-700"
      >
        Turn Off
      </button>
      <button
        onclick="toggleSwitch('#demo-switch')"
        class="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700"
      >
        Toggle
      </button>
    </div>
    <label class="switch" id="demo-switch">
      <input type="checkbox" />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>

<div>
    <div class="flex gap-2 mb-3">
      <button
        onclick="setSwitchState('#controlled-switch', true)"
        class="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700"
      >
        Enable
      </button>
      <button
        onclick="setSwitchState('#controlled-switch', false)"
        class="px-3 py-1 bg-red-600 text-white text-sm rounded hover:bg-red-700"
      >
        Disable
      </button>
    </div>
    <label class="switch" id="controlled-switch">
      <input type="checkbox" checked />
      <span class="track">
        <span class="thumb"></span>
      </span>
    </label>
  </div>
</div>

Event Handling

Status: OFF

<div>
  <label class="switch" id="event-switch">
    <input
      type="checkbox"
      onchange="document.getElementById('switch-status').textContent = this.checked ? 'ON' : 'OFF'"
    />
    <span class="track">
      <span class="thumb"></span>
    </span>
  </label>
  <p class="mt-2 subhead text-gray-600">
    Status: <span id="switch-status" class="font-semibold">OFF</span>
  </p>
</div>

Class API Reference

Type	Class	Usage	Notes
Base	`switch`	The label that wraps the checkbox + track + thumb	Always required
	`track`	The pill-shaped background	Sibling of the input
	`thumb`	The sliding circle	Child of `track`
Sizes	`xs`	Tiny — 32×16px track	Modifier on `switch`
	`sm`	Small — 40×20px track	Modifier on `switch`
	(default)	Medium — 44×24px track	No size class needed
	`xl`	Large — 56×28px track	Modifier on `switch`
	`lg`	Big — 64×32px track	Modifier on `switch`
Intents	`primary`	Blue when checked	Modifier on `switch`
	`positive`	Green when checked	Modifier on `switch`
	`negative`	Red when checked	Modifier on `switch`
	`warning`	Yellow when checked	Modifier on `switch`
	`info`	Blue (sky) when checked	Modifier on `switch`
Extended Palette	`red` / `orange` / `yellow` / `olive` / `green` / `teal` / `blue` / `violet` / `purple` / `pink` / `brown` / `grey` / `black`	Direct palette colors	Use intents (primary/positive/...) when possible
States	`disabled`	Greyed out, not interactive	Or use the `disabled` attribute on the input
Layout	`labeled`	Switch with text label beside it	Add a `label` sibling
	`flip`	Reverses label/switch order	Combine with `labeled`
	`with-description`	Two-line label + description block	Combine with `labeled`
Wrapper	`switch-card`	Settings-row card with text + switch	Holds `content` and a `switch`
	`switch-list`	Settings-list row (no card chrome)	Use inside a bordered container
	`switches`	Container — children inherit color/size	Combine with `primary`/`positive`/etc.
	`integration-switch`	Group of switches with shared header	Add `horizontal` for inline rows