Switch
A toggle control that lets users turn an option on or off immediately without requiring form submission.
Basic toggle
A single switch binding a boolean preference. The host app controls checked in response to the update event.
<diwa-switch>Enable notifications</diwa-switch>Multiple switches
Each switch manages an independent boolean. Group related toggles vertically with a consistent gap.
<div class="flex flex-col gap-3">
<diwa-switch checked>Push notifications</diwa-switch>
<diwa-switch>Dark mode</diwa-switch>
<diwa-switch checked>Auto-save</diwa-switch>
</div>Label alignment
Use align-label="start" to place the label before the track — useful in right-aligned form layouts.
<div class="flex flex-col gap-3">
<diwa-switch checked align-label="end">Label on end (default)</diwa-switch>
<diwa-switch checked align-label="start">Label on start</diwa-switch>
</div>States
The full set of visual states: unchecked, checked, disabled off, disabled on, and loading.
<div class="flex flex-col gap-3">
<diwa-switch>Unchecked</diwa-switch>
<diwa-switch checked>Checked</diwa-switch>
<diwa-switch disabled>Disabled (off)</diwa-switch>
<diwa-switch checked disabled>Disabled (on)</diwa-switch>
<diwa-switch loading>Loading</diwa-switch>
</div>Dense mode (compact)
Use compact to enable dense mode — it reduces track and thumb size while keeping label size unchanged.
<div class="flex flex-col gap-3">
<diwa-switch>Default size</diwa-switch>
<diwa-switch compact>Compact size</diwa-switch>
</div>