Switch

Toggle switch using a button with role="switch". Requires the nanoui-switch Stimulus controller.

Default

Off

Disabled

<button type="button"
        class="nano-switch"
        role="switch"
        aria-checked="false"
        data-controller="nanoui-switch"
        data-action="nanoui-switch#toggle">
  <span class="nano-switch__thumb"></span>
  <span class="nano-sr-only">Enable notifications</span>
</button>

Stimulus controller

The nanoui-switch controller toggles aria-checked between "true" and "false" and dispatches a toggle event with detail.checked.