For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.4.1/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.4.1/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.4.1/en/components/switch.md.

Switch

Switch immediately toggles an independent setting on or off and is not intended for a choice that takes effect only after form submission. When a remote update can fail, keep the control interactive, announce the pending or rejected outcome, and restore the previous value on rejection.

Airplane Mode

Airplane Mode is off.

InstallTerminal

npm install @a3s-lab/ui@0.4.1

<input type="checkbox" role="switch" class="input" />

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

Usage

Include CSS

Import Tailwind and one full A3S UI style bundle.

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

Or import only the base CSS, Switch component CSS, and one style pack.

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/switch.css";
@import "@a3s-lab/ui/styles/a3s.css";

Using CDN or bundler imports? See the Installation page.

Add your switch HTML

Add class="input" and role="switch" to a native checkbox. Use a native <label> or aria-label for accessible naming.

<input type="checkbox" role="switch" class="input" />

HTML structure

<input type="checkbox" role="switch" class="input">: The switch control. Use native checkbox state: add checked for an initially enabled switch, disabled for a disabled switch, and aria-invalid="true" for invalid state.
data-size="sm" Optional: Renders the smaller switch size.

Examples

Description

Share across devices

Focus is shared across devices, and turns off when you leave the app.

<div role="group" class="field" data-orientation="horizontal">
  <section>
    <label for="switch-focus-mode">Share across devices</label>
    <p id="switch-focus-mode-description">Focus is shared across devices, and turns off when you leave the app.</p>
  </section>
  <input type="checkbox" id="switch-focus-mode" role="switch" class="input" aria-describedby="switch-focus-mode-description" />
</div>

Choice card

Use a wrapping <label> when the whole card should toggle the switch.

Share across devices

Focus is shared across devices, and turns off when you leave the app.

Enable notifications

Receive notifications when focus mode changes.

<div role="group" class="grid w-full gap-3" aria-label="Focus settings">
  <label>
    <div role="group" class="field" data-orientation="horizontal">
      <section>
        <h3>Share across devices</h3>
        <p>Focus is shared across devices, and turns off when you leave the app.</p>
      </section>
      <input type="checkbox" role="switch" class="input" />
    </div>
  </label>
  <label>
    <div role="group" class="field" data-orientation="horizontal">
      <section>
        <h3>Enable notifications</h3>
        <p>Receive notifications when focus mode changes.</p>
      </section>
      <input type="checkbox" role="switch" class="input" defaultChecked />
    </div>
  </label>
</div>

Remote accept and reject

Hosts own persistence. These fixtures prove the UI keeps an accepted change and restores the previous value when a remote update is rejected.

Sync focus settings (reject)

This fixture always rejects the remote update and restores the previous value.

Ready to sync.

Sync focus settings (accept)

This fixture always accepts the remote update.

Ready to sync.

<div class="grid gap-4">
    <div class="grid gap-3" data-switch-remote-demo="en" data-switch-remote-outcome="reject" data-switch-value="off">
      <div role="group" class="field" data-orientation="horizontal">
        <section>
          <label for="switch-remote-reject-en">Sync focus settings (reject)</label>
          <p id="switch-remote-reject-en-description">This fixture always rejects the remote update and restores the previous value.</p>
        </section>
        <input type="checkbox" id="switch-remote-reject-en" role="switch" class="input" aria-describedby="switch-remote-reject-en-description"
          data-preview-onchange="const demo = document.querySelector('[data-switch-remote-demo=en][data-switch-remote-outcome=reject]'); const status = demo.querySelector('[data-switch-status]'); const next = this.checked; this.setAttribute('aria-busy', 'true'); this.checked = !next; status.textContent = 'Sync rejected. Previous setting restored.'; demo.setAttribute('data-switch-value', this.checked ? 'on' : 'off'); demo.setAttribute('data-switch-remote-result', 'rejected'); this.removeAttribute('aria-busy');" />
      </div>
      <p data-switch-status aria-live="polite">Ready to sync.</p>
    </div>
    <div class="grid gap-3" data-switch-remote-demo="en" data-switch-remote-outcome="accept" data-switch-value="off">
      <div role="group" class="field" data-orientation="horizontal">
        <section>
          <label for="switch-remote-accept-en">Sync focus settings (accept)</label>
          <p id="switch-remote-accept-en-description">This fixture always accepts the remote update.</p>
        </section>
        <input type="checkbox" id="switch-remote-accept-en" role="switch" class="input" aria-describedby="switch-remote-accept-en-description"
          data-preview-onchange="const demo = document.querySelector('[data-switch-remote-demo=en][data-switch-remote-outcome=accept]'); const status = demo.querySelector('[data-switch-status]'); const next = this.checked; this.setAttribute('aria-busy', 'true'); status.textContent = next ? 'Sync accepted. Setting is on.' : 'Sync accepted. Setting is off.'; demo.setAttribute('data-switch-value', next ? 'on' : 'off'); demo.setAttribute('data-switch-remote-result', 'accepted'); this.removeAttribute('aria-busy');" />
      </div>
      <p data-switch-status aria-live="polite">Ready to sync.</p>
    </div>
  </div>

Disabled

Add disabled to the switch and data-disabled="true" to the field wrapper when the surrounding field should use disabled styling. Keep the label and reason visible.

Disabled

Only an organization owner can change this setting.

<div role="group" class="field" data-orientation="horizontal" data-disabled="true">
  <input type="checkbox" id="switch-disabled-unchecked" role="switch" class="input" disabled />
  <section>
    <label for="switch-disabled-unchecked">Disabled</label>
    <p>Only an organization owner can change this setting.</p>
  </section>
</div>

Invalid

Add aria-invalid="true" to the switch and data-invalid="true" to the field wrapper.

Accept terms and conditions.

You must accept the terms and conditions to continue.

<div role="group" class="field" data-orientation="horizontal" data-invalid="true">
  <section>
    <label for="switch-invalid">Accept terms and conditions.</label>
    <p>You must accept the terms and conditions to continue.</p>
  </section>
  <input type="checkbox" id="switch-invalid" role="switch" class="input" aria-invalid="true" />
</div>

Size

Use data-size="sm" to render the smaller switch size.

Small

Default

<div role="group" class="grid w-full gap-4" aria-label="Switch sizes">
  <div role="group" class="field" data-orientation="horizontal">
    <input type="checkbox" id="switch-size-sm" role="switch" class="input" data-size="sm" />
    <label for="switch-size-sm">Small</label>
  </div>
  <div role="group" class="field" data-orientation="horizontal">
    <input type="checkbox" id="switch-size-default" role="switch" class="input" />
    <label for="switch-size-default">Default</label>
  </div>
</div>

RTL

Switch field layout uses document direction. Set dir="rtl" on the field or an ancestor.

المشاركة عبر الأجهزة

يتم مشاركة التركيز عبر الأجهزة، ويتم إيقاف تشغيله عند مغادرة التطبيق.

<div dir="rtl" role="group" class="field" data-orientation="horizontal">
  <section>
    <label for="switch-rtl">المشاركة عبر الأجهزة</label>
    <p id="switch-rtl-description">يتم مشاركة التركيز عبر الأجهزة، ويتم إيقاف تشغيله عند مغادرة التطبيق.</p>
  </section>
  <input type="checkbox" id="switch-rtl" role="switch" class="input" aria-describedby="switch-rtl-description" defaultChecked />
</div>

#Switch

#Usage

Include CSS

Add your switch HTML

#HTML structure

#Examples

#Description

#Choice card

Share across devices

Enable notifications

#Remote accept and reject

#Disabled

#Invalid

#Size

#RTL

Switch

Usage

HTML structure

Examples

Description

Choice card

Remote accept and reject

Disabled

Invalid

Size

RTL