Switch — Veritheme

Default

Basic on and off switch states.

html

Off

On

<!-- Off -->
<button role="switch" aria-checked="false"
  class="vt-switch vt-bg-surfaces-moderate">
  <span class="vt-switch-thumb"></span>
</button>

<!-- On -->
<button role="switch" aria-checked="true"
  class="vt-switch vt-active vt-bg-accents-brand">
  <span class="vt-switch-thumb"></span>
</button>

Sizes

Small, default, and large switch sizes.

html

Small

Default

Large

<button class="vt-switch vt-switch-sm vt-active vt-bg-accents-brand">
  <span class="vt-switch-thumb"></span>
</button>

<button class="vt-switch vt-active vt-bg-accents-brand">
  <span class="vt-switch-thumb"></span>
</button>

<button class="vt-switch vt-switch-lg vt-active vt-bg-accents-brand">
  <span class="vt-switch-thumb"></span>
</button>

With Label

Switch paired with a text label.

html

Airplane Mode

Wi-Fi

Bluetooth

<div class="vt-flex vt-items-center vt-justify-between">
  <span class="vt-text-sm vt-font-medium">Airplane Mode</span>
  <button role="switch" aria-checked="false"
    class="vt-switch vt-bg-surfaces-moderate">
    <span class="vt-switch-thumb"></span>
  </button>
</div>

Disabled

Switches in disabled state cannot be interacted with.

html

Off (disabled)

On (disabled)

<button role="switch" disabled
  class="vt-switch vt-bg-surfaces-moderate vt-opacity-50 vt-cursor-not-allowed">
  <span class="vt-switch-thumb"></span>
</button>

<button role="switch" disabled
  class="vt-switch vt-active vt-bg-accents-brand vt-opacity-50 vt-cursor-not-allowed">
  <span class="vt-switch-thumb"></span>
</button>

Colors

Switch with different active track colors.

html

Primary

Success

Danger

Warning

<button class="vt-switch vt-active vt-bg-accents-brand">...</button>
<button class="vt-switch vt-active vt-bg-success-primary">...</button>
<button class="vt-switch vt-active vt-bg-error-primary">...</button>
<button class="vt-switch vt-active vt-bg-warning-primary">...</button>

In Card

Switch rows inside a card container, similar to iOS Settings.

Airplane Mode

Wi-Fi

AirPlay

Phone

Notifications

API Reference

All CSS classes available for the Switch component.

Class	Type	Description
`vt-switch`	Base	Base switch track styles -- rounded pill shape, transition
`vt-switch-thumb`	Base	Sliding thumb knob inside the switch track
`vt-active`	State	Active/on state -- translates thumb to the right
`vt-switch-sm`	Size	Small switch variant
`vt-switch-lg`	Size	Large switch variant
`vt-bg-surfaces-moderate`	Color	Off-state track background
`vt-bg-accents-brand`	Color	Primary on-state track color (brand)
`vt-bg-info-primary`	Color	Blue on-state track color
`vt-bg-success-primary`	Color	Success on-state track color
`vt-bg-error-primary`	Color	Danger on-state track color
`vt-bg-warning-primary`	Color	Warning on-state track color
`vt-opacity-50 vt-cursor-not-allowed`	State	Disabled switch appearance

Accessibility

Keyboard and screen reader support.

Feature	Details
Role	Use input[type="checkbox"] with role="switch" for toggle semantics
Label	Always provide a visible label linked via for/id
Keyboard	Space toggles the switch, Tab moves focus
State	aria-checked="true/false" announces the toggle state