Switch — uicraft

Default

Basic on and off switch states.

html

Off

On

<!-- Off -->
<button role="switch" aria-checked="false"
  class="uc-switch uc-bg-neutrals-muted">
  <span class="uc-switch-thumb"></span>
</button>

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

Sizes

Small, default, and large switch sizes.

html

Small

Default

Large

<button class="uc-switch uc-switch-sm uc-active uc-bg-accents-blue">
  <span class="uc-switch-thumb"></span>
</button>

<button class="uc-switch uc-active uc-bg-accents-blue">
  <span class="uc-switch-thumb"></span>
</button>

<button class="uc-switch uc-switch-lg uc-active uc-bg-accents-blue">
  <span class="uc-switch-thumb"></span>
</button>

With Label

Switch paired with a text label.

html

Airplane Mode

Wi-Fi

Bluetooth

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

Disabled

Switches in disabled state cannot be interacted with.

html

Off (disabled)

On (disabled)

<button role="switch" disabled
  class="uc-switch uc-bg-neutrals-muted uc-opacity-50 uc-cursor-not-allowed">
  <span class="uc-switch-thumb"></span>
</button>

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

Colors

Switch with different active track colors.

html

Primary

Success

Danger

Warning

<button class="uc-switch uc-active uc-bg-accents-blue">...</button>
<button class="uc-switch uc-active uc-bg-accents-green">...</button>
<button class="uc-switch uc-active uc-bg-accents-red">...</button>
<button class="uc-switch uc-active uc-bg-accents-orange">...</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
`uc-switch`	Base	Base switch track styles -- rounded pill shape, transition
`uc-switch-thumb`	Base	Sliding thumb knob inside the switch track
`uc-active`	State	Active/on state -- translates thumb to the right
`uc-switch-sm`	Size	Small switch variant
`uc-switch-lg`	Size	Large switch variant
`uc-bg-neutrals-muted`	Color	Off-state track background
`uc-bg-accents-blue`	Color	Primary on-state track color
`uc-bg-accents-green`	Color	Success on-state track color
`uc-bg-accents-red`	Color	Danger on-state track color
`uc-bg-accents-orange`	Color	Warning on-state track color
`uc-opacity-50 uc-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