Component
<dom-toggle>
custom elementAccessible switch with role="switch", keyboard support, and aria-checked maintained as you toggle.
Demo
Switch
role="switch" with Space/Enter to toggle — emits dom:change with detail.checked.
basic.htmlhtml
<label class="inline-flex cursor-pointer items-center gap-3 text-sm text-fg">
<dom-toggle checked aria-label="Notifications"></dom-toggle>
<span>Notifications</span>
</label>
<script type="module">
import '@getdom/studio/headless/toggle.js';
</script>
Usage
Plain HTML
<dom-toggle checked aria-label="Notifications"></dom-toggle>
<script type="module">
import '@getdom/studio/headless';
document.querySelector('dom-toggle')
.addEventListener('dom:change', (e) => console.log(e.detail.checked));
</script> Register every <dom-*> in one import: import '@getdom/studio/headless'.
Attributes
| Name | Type | Description |
|---|---|---|
| checked | boolean | Reflects on/off state. |
| disabled | boolean | Disables the toggle. |
| aria-label | string | Accessible name when no visible label is provided. |
From dom-toggle.__doc.attributes.
Events
| Name | Payload | Description |
|---|---|---|
| dom:change | { checked } | Fired when the toggle is flipped. |
Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.
Keyboard
- Space / EnterToggle the value.
- TabMove focus through toggles in source order.
Related