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

      • Switch

      Live previewHTML · CSS · JavaScript

      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

      Live previewHTML · CSS · JavaScript

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

      Choice card

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

      Live previewHTML · CSS · JavaScript

      Disabled

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

      Live previewHTML · CSS · JavaScript

      Invalid

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

      Live previewHTML · CSS · JavaScript

      You must accept the terms and conditions to continue.

      Size

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

      Live previewHTML · CSS · JavaScript

      RTL

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

      Live previewHTML · CSS · JavaScript

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