Switch

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Switch
  id="id"
  name="name"
  label="Switch"
  description="description"
  checked="false"
/>

Legacy mount name: data-component="Switch".

Props and attributes

Slots

This component does not declare a slot.

Events

• click

Source contract

Installed source: components/Switch.wrn

component Switch {
  props {
    class = ""
    id = ""
    name = ""
    label = "Switch"
    description = ""
    checked = false
    disabled = false
  }
  state on = checked
  view {
        <button id="{id}" type="button" role="switch" aria-checked="{on}" disabled="{disabled}" @click="on = !on" class="flex w-full items-center justify-between gap-4 rounded-xl p-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 disabled:opacity-50 {class}">
        <span>
        <span class="block text-sm font-semibold">{label}</span>
        <span data-show="description" class="text-sm text-slate-500">{description}</span>
        </span>
        <span class="relative inline-flex h-6 w-11 shrink-0 rounded-full transition {on ? 'bg-violet-600' : 'bg-slate-300 dark:bg-slate-700'}">
        <span class="absolute top-0.5 size-5 rounded-full bg-white shadow transition-transform {on ? 'translate-x-5' : 'translate-x-0.5'}">
        </span>
        </span>
        <input type="hidden" name="{name}" value="{on ? 'true' : 'false'}" />
        </button>
    }
}