Toggle

Switch control for boolean states. Uses checkbox semantics with role=switch for accessibility.

Default

Base

Class	Description
`.ui-toggle`	Base class

Size

Class	Value
`.ui-toggle--sm`	sm
`.ui-toggle--lg`	lg

Override these CSS custom properties to customize the component.

Token	Default	Description
`--ui-toggle-track-width`	`calc(var(--ui-unit) * 5)`	Track width
`--ui-toggle-track-height`	`calc(var(--ui-unit) * 3)`	Track height
`--ui-toggle-track-bg`	`var(--ui-color-bg-inset)`	Track background
`--ui-toggle-track-bg-checked`	`var(--ui-color-primary)`	Track bg checked
`--ui-toggle-track-radius`	`calc(var(--ui-unit) * 1.5)`	Track corner radius
`--ui-toggle-thumb-size`	`calc(var(--ui-unit) * 2.5)`	Thumb control size
`--ui-toggle-thumb-bg`	`var(--ui-color-bg)`	Thumb background
`--ui-toggle-thumb-offset`	`calc(var(--ui-unit) / 4)`	Thumb control offset from anchor

Checked

<label class="ui-toggle">
  <input class="ui-toggle__input" type="checkbox" role="switch" checked></input>
  <span class="ui-toggle__track"></span>
  <span class="ui-toggle__thumb"></span>
</label>

Sizes

<div class="ui-flex ui-gap-2 ui-items-center">
  <label class="ui-toggle ui-toggle--sm">
    <input class="ui-toggle__input" type="checkbox" role="switch"></input>
    <span class="ui-toggle__track"></span>
    <span class="ui-toggle__thumb"></span>
  </label>
  <label class="ui-toggle">
    <input class="ui-toggle__input" type="checkbox" role="switch" checked></input>
    <span class="ui-toggle__track"></span>
    <span class="ui-toggle__thumb"></span>
  </label>
  <label class="ui-toggle ui-toggle--lg">
    <input class="ui-toggle__input" type="checkbox" role="switch"></input>
    <span class="ui-toggle__track"></span>
    <span class="ui-toggle__thumb"></span>
  </label>
</div>

Disabled

<div class="ui-flex ui-gap-2">
  <label class="ui-toggle">
    <input class="ui-toggle__input" type="checkbox" role="switch" disabled></input>
    <span class="ui-toggle__track"></span>
    <span class="ui-toggle__thumb"></span>
  </label>
  <label class="ui-toggle">
    <input class="ui-toggle__input" type="checkbox" role="switch" checked disabled></input>
    <span class="ui-toggle__track"></span>
    <span class="ui-toggle__thumb"></span>
  </label>
</div>

With Label

Enable notifications

<div class="ui-flex ui-items-center ui-gap-2">
  <label class="ui-toggle">
    <input class="ui-toggle__input" type="checkbox" role="switch" id="notifications"></input>
    <span class="ui-toggle__track"></span>
    <span class="ui-toggle__thumb"></span>
  </label>
  <label for="notifications">Enable notifications</label>
</div>