!Draft Switch

Binary setting control with toggle-switch visuals for immediate on/off changes.

Open Switch Playground

Preview

Use Switch for settings that turn a behavior on or off immediately. For binary selection inside a form list, use Checkbox.

Usage

<label class="switch-field">
  <input class="switch" type="checkbox" role="switch" />
  <span class="switch-field__text">Notifications</span>
</label>

{% import "macros/ui.njk" as ui %}

{{ ui.switch("Notifications") }}
{{ ui.switch("Auto updates", true) }}
{{ ui.switch("Airplane mode", false, true) }}

import { Switch } from "ui-foundations/react";

<Switch label="Notifications" />
<Switch defaultChecked label="Auto updates" />
<Switch disabled label="Airplane mode" />

Used tokens

Token
--_switch-block-size
--_switch-inline-size
--_switch-padding
--_switch-thumb-size
--color-border-brand
--color-border-default
--color-border-disabled
--color-fill-brand
--color-fill-disabled
--color-fill-surface
--color-focus
--color-overlay-active
--color-overlay-hover
--color-text-default
--color-text-disabled
--shadow-focus
--size-border-100
--size-radius-full
--size-spacing-100
--size-spacing-600
--size-spacing-1000
--typography-label-font-family
--typography-label-font-size
--typography-label-font-weight
--typography-label-gap
--typography-label-line-height