Toggles — Switch states and sizes

Two columns compare default and small switches in off, on and disabled states. Use them to choose switch dimensions and review native state and focus behavior.

ReactHTML

1440 × 480

Open in new tab

Component.tsx57 lines

export default function TogglesSwitchStates() {
  return (
    <div className="grid w-72 grid-cols-2 gap-4 text-neutral-900 sm:w-[24rem]">
      <fieldset>
        <legend className="text-xs text-neutral-500">Default · 44×24</legend>
        <div className="mt-3 grid gap-4">
          <label className="relative flex min-h-6 items-center gap-2 text-xs">
            <input type="checkbox" role="switch" aria-label="Default switch: off" className="peer sr-only focus-visible:outline-hidden" />
            <span aria-hidden="true" className="cursor-pointer relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-neutral-300 bg-neutral-200 p-px transition-colors peer-checked:bg-neutral-900 peer-checked:[&>span]:translate-x-5 peer-enabled:hover:bg-neutral-300 peer-checked:peer-enabled:hover:bg-neutral-700 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-900 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 forced-colors:border-[ButtonText]"><span className="size-5 rounded-full bg-white shadow-sm transition-transform motion-reduce:transition-none forced-colors:bg-[CanvasText]" /></span>
            <span>Off</span>
          </label>
          <label className="relative flex min-h-6 items-center gap-2 text-xs">
            <input type="checkbox" role="switch" aria-label="Default switch: on" defaultChecked className="peer sr-only focus-visible:outline-hidden" />
            <span aria-hidden="true" className="cursor-pointer relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-neutral-300 bg-neutral-200 p-px transition-colors peer-checked:bg-neutral-900 peer-checked:[&>span]:translate-x-5 peer-enabled:hover:bg-neutral-300 peer-checked:peer-enabled:hover:bg-neutral-700 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-900 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 forced-colors:border-[ButtonText]"><span className="size-5 rounded-full bg-white shadow-sm transition-transform motion-reduce:transition-none forced-colors:bg-[CanvasText]" /></span>
            <span>On</span>
          </label>
          <label className="relative flex min-h-6 items-center gap-2 text-xs">
            <input type="checkbox" role="switch" aria-label="Default switch: disabled off" disabled className="peer sr-only focus-visible:outline-hidden" />
            <span aria-hidden="true" className="cursor-pointer relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-neutral-300 bg-neutral-200 p-px transition-colors peer-checked:bg-neutral-900 peer-checked:[&>span]:translate-x-5 peer-enabled:hover:bg-neutral-300 peer-checked:peer-enabled:hover:bg-neutral-700 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-900 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 forced-colors:border-[ButtonText]"><span className="size-5 rounded-full bg-white shadow-sm transition-transform motion-reduce:transition-none forced-colors:bg-[CanvasText]" /></span>
            <span className="opacity-50">Disabled off</span>
          </label>
          <label className="relative flex min-h-6 items-center gap-2 text-xs">
            <input type="checkbox" role="switch" aria-label="Default switch: disabled on" defaultChecked disabled className="peer sr-only focus-visible:outline-hidden" />
            <span aria-hidden="true" className="cursor-pointer relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-neutral-300 bg-neutral-200 p-px transition-colors peer-checked:bg-neutral-900 peer-checked:[&>span]:translate-x-5 peer-enabled:hover:bg-neutral-300 peer-checked:peer-enabled:hover:bg-neutral-700 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-900 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 forced-colors:border-[ButtonText]"><span className="size-5 rounded-full bg-white shadow-sm transition-transform motion-reduce:transition-none forced-colors:bg-[CanvasText]" /></span>
            <span className="opacity-50">Disabled on</span>
          </label>
        </div>
      </fieldset>
      <fieldset>
        <legend className="text-xs text-neutral-500">Small · 36×20</legend>
        <div className="mt-3 grid gap-4">
          <label className="relative flex min-h-6 items-center gap-2 text-xs">
            <input type="checkbox" role="switch" aria-label="Small switch: off" className="peer sr-only focus-visible:outline-hidden" />
            <span aria-hidden="true" className="cursor-pointer relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-neutral-300 bg-neutral-200 p-px transition-colors peer-checked:bg-neutral-900 peer-checked:[&>span]:translate-x-4 peer-enabled:hover:bg-neutral-300 peer-checked:peer-enabled:hover:bg-neutral-700 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-900 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 forced-colors:border-[ButtonText]"><span className="size-4 rounded-full bg-white shadow-sm transition-transform motion-reduce:transition-none forced-colors:bg-[CanvasText]" /></span>
            <span>Off</span>
          </label>
          <label className="relative flex min-h-6 items-center gap-2 text-xs">
            <input type="checkbox" role="switch" aria-label="Small switch: on" defaultChecked className="peer sr-only focus-visible:outline-hidden" />
            <span aria-hidden="true" className="cursor-pointer relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-neutral-300 bg-neutral-200 p-px transition-colors peer-checked:bg-neutral-900 peer-checked:[&>span]:translate-x-4 peer-enabled:hover:bg-neutral-300 peer-checked:peer-enabled:hover:bg-neutral-700 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-900 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 forced-colors:border-[ButtonText]"><span className="size-4 rounded-full bg-white shadow-sm transition-transform motion-reduce:transition-none forced-colors:bg-[CanvasText]" /></span>
            <span>On</span>
          </label>
          <label className="relative flex min-h-6 items-center gap-2 text-xs">
            <input type="checkbox" role="switch" aria-label="Small switch: disabled off" disabled className="peer sr-only focus-visible:outline-hidden" />
            <span aria-hidden="true" className="cursor-pointer relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-neutral-300 bg-neutral-200 p-px transition-colors peer-checked:bg-neutral-900 peer-checked:[&>span]:translate-x-4 peer-enabled:hover:bg-neutral-300 peer-checked:peer-enabled:hover:bg-neutral-700 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-900 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 forced-colors:border-[ButtonText]"><span className="size-4 rounded-full bg-white shadow-sm transition-transform motion-reduce:transition-none forced-colors:bg-[CanvasText]" /></span>
            <span className="opacity-50">Disabled off</span>
          </label>
          <label className="relative flex min-h-6 items-center gap-2 text-xs">
            <input type="checkbox" role="switch" aria-label="Small switch: disabled on" defaultChecked disabled className="peer sr-only focus-visible:outline-hidden" />
            <span aria-hidden="true" className="cursor-pointer relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-neutral-300 bg-neutral-200 p-px transition-colors peer-checked:bg-neutral-900 peer-checked:[&>span]:translate-x-4 peer-enabled:hover:bg-neutral-300 peer-checked:peer-enabled:hover:bg-neutral-700 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-900 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 forced-colors:border-[ButtonText]"><span className="size-4 rounded-full bg-white shadow-sm transition-transform motion-reduce:transition-none forced-colors:bg-[CanvasText]" /></span>
            <span className="opacity-50">Disabled on</span>
          </label>
        </div>
      </fieldset>
    </div>
  )
}

Pattern notes

When to use: Use to document on/off and disabled states in two sizes. Pick toggles-switch-list for real settings with descriptions. Variations: use only the default column, choose a different initial checked pair, or add longer descriptions in a settings card.
Hierarchy: Each column reads its size caption, then Off, On, Disabled off and Disabled on. All controls are native checkbox inputs with role=switch, named with size and state. Knobs and tracks are decorative; visible labels stay short, at most two words.
Responsive: Only width changes at 640px, from 288px to 384px. Both columns retain 24px minimum row heights and the same switch sizes, labels and gaps. The root is 172px tall.
Layout: A 288px (w-72) grid widens to 384px (sm:w-[24rem]); two equal columns stay side by side with a 16px gap. Each fieldset has a 12px neutral-500 legend, then a grid after 12px with 16px row gaps. Rows have min-h-6, 12px labels and an 8px switch-to-text gap. Default tracks are 44×24px (w-11 h-6); small tracks are 36×20px (w-9 h-5), each with a 1px neutral-300 border, rounded-full and 1px padding. White shadow-sm knobs are 20px and 16px respectively.
States: On examples start defaultChecked; the final two examples in each column are native disabled. Checked tracks fill neutral-900, and knobs translate 20px or 16px. Enabled hover fills neutral-300 when off and neutral-700 when on. Track focus uses peer-focus-visible to show a 2px neutral-900 outline offset 2px. Disabled tracks and labels have 50% opacity and tracks use a not-allowed cursor. Knobs slide over 150ms, removed by reduced-motion preference. Forced-colors mode gives tracks a ButtonText border and knobs a CanvasText fill, so position remains legible.

Desktop wireframe

┌──────────────────────────────────────────┐
│ Default / 44 x 24       Small / 36 x 20  │
│ [o-] Off               [o-] Off          │
│ [-o] On                [-o] On           │
│ [o-] Disabled off      [o-] Disabled off │
│ [-o] Disabled on       [-o] Disabled on  │
└──────────────────────────────────────────┘

View all

Toggles — Checkbox group with nested options
Layout tags: stacked,form,compact
Toggles — Checkbox tile grid
Layout tags: grid,form,compact
Toggles — Checklist rows with descriptions
Layout tags: list,form,compact

Toggles — Switch states and sizes

Pattern notes

More in Toggles

Toggles — Checkbox group with nested options

Toggles — Checkbox tile grid

Toggles — Checklist rows with descriptions