shadcn-html / switch

Built with: CSS

Switch

A toggle control for on/off states. Built on native <input type="checkbox" role="switch"> with CSS-only thumb animation.

Component Skill — components/switch/component-skill.md

Native basis

<input type="checkbox" role="switch"> element styled as a toggle switch.

Web Platform APIs

Classes

.switch .switch-item .switch-item-block .switch-description

Sizes (data-size)

smHeight: 1rem

Accessibility

• role="switch" tells screen readers this is an on/off toggle, not a checkbox.

• aria-checked is automatically set by the browser for type="checkbox".

• :focus-visible provides keyboard-only focus ring.

• prefers-reduced-motion disables all transitions.

• forced-colors provides Windows High Contrast Mode support.

Notes

• Pure CSS — no JavaScript needed.

• The thumb slides via :checked and translateX().

• Uses appearance: none with ::after for the thumb.

• Wrap in .switch-item for auto disabled label styling via :has().

• aria-invalid="true" shows the track in the destructive color.

Default

Toggle switch with label.

<div class="switch-item">
  <input class="switch" type="checkbox" role="switch" id="airplane">
  <label for="airplane">Airplane Mode</label>
</div>

With Description

Switch with label and description text using .switch-item-block.

Focus is shared across devices, and turns off when you leave the app. 
<div class="switch-item-block">
  <label for="share">Share across devices</label>
  <input class="switch" type="checkbox" role="switch" id="share" checked>
  <span class="switch-description">Focus is shared across devices.</span>
</div>

Small

<div class="switch-item">
  <input class="switch" data-size="sm" type="checkbox" role="switch">
  <label>Small switch</label>
</div>

Checked by default

<div class="switch-item">
  <input class="switch" type="checkbox" role="switch" checked>
  <label>Notifications</label>
</div>

Disabled

Disabled state — .switch-item auto-dims the label via :has().

<div class="switch-item">
  <input class="switch" type="checkbox" role="switch" disabled>
  <label>Disabled</label>
</div>

Invalid

Validation error state with aria-invalid="true".

You must accept the terms and conditions to continue. 
<div class="switch-item-block">
  <label for="terms">Accept terms and conditions</label>
  <input class="switch" type="checkbox" role="switch" id="terms" aria-invalid="true">
  <span class="switch-description" style="color:var(--destructive);">You must accept the terms.</span>
</div>

CSS view file

/* -- Switch component ------------------------------------------- */

@layer components {
  .switch {
    appearance: none;
    width: 2.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: var(--input);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background-color 150ms;
    border: none;
    outline: none;

    /* Thumb */
    &::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: calc(1.25rem - 4px);
      height: calc(1.25rem - 4px);
      border-radius: 50%;
      background: var(--background);
      transition: transform 150ms;
      box-shadow: 0 1px 2px oklch(0 0 0 / 0.15);
    }

    &:checked {
      background: var(--primary);

      &::after {
        transform: translateX(1rem);
      }
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    &[aria-invalid="true"] {
      background: var(--destructive);

      &:checked {
        background: var(--destructive);
      }
    }

    /* -- Sizes ----------------------------------------------- */
    &[data-size="sm"] {
      width: 1.75rem;
      height: 1rem;

      &::after {
        width: calc(1rem - 4px);
        height: calc(1rem - 4px);
      }

      &:checked::after {
        transform: translateX(0.75rem);
      }
    }
  }

  /* -- Switch item layout ----------------------------------- */
  .switch-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    & > label {
      font-size: 0.875rem;
      cursor: pointer;
    }
  }

  /* With-description layout */
  .switch-item-block {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 0.75rem;
    align-items: center;

    & > .switch {
      grid-row: 1 / 3;
    }

    & > label {
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
    }

    & > .switch-description {
      font-size: 0.8125rem;
      color: var(--muted-foreground);
      line-height: 1.5;
    }
  }

  /* Label disabled styling via :has() */
  .switch-item:has(.switch:disabled),
  .switch-item-block:has(.switch:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* -- Accessibility ---------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .switch,
    .switch::after {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    .switch {
      background: ButtonFace;
      border: 1px solid ButtonText;

      &::after {
        background: ButtonText;
        box-shadow: none;
      }

      &:checked {
        background: Highlight;
        border-color: Highlight;

        &::after {
          background: HighlightText;
        }
      }

      &:disabled {
        border-color: GrayText;

        &::after {
          background: GrayText;
        }
      }
    }
  }
}