About
An accessible toggle switch using a hidden checkbox internally for form participation.
Supports checked, disabled, label, and label-position attributes.
Fires ars-toggle:change with { checked: boolean } detail.
Full keyboard support (Space/Enter to toggle).
Basic Toggle
<ars-toggle label="Enable notifications"></ars-toggle>
<ars-toggle label="Dark mode" checked></ars-toggle>
Label Position
<ars-toggle label="End" label-position="end"></ars-toggle>
<ars-toggle label="Start" label-position="start"></ars-toggle>
Disabled State
<ars-toggle label="Disabled" disabled></ars-toggle>
<ars-toggle label="Disabled" checked disabled></ars-toggle>
Settings Panel
⚙️ Preferences
Custom Label (Slot)
<ars-toggle>
<span>✨ Enable premium features</span>
</ars-toggle>
Event Monitor
Listening for ars-toggle:change…
Theme Toggle
Usage
<ars-toggle label="Dark mode" checked></ars-toggle>
<script type="module">
import { ArsToggle } from 'ars-web-components';
document.querySelector('ars-toggle')
.addEventListener('ars-toggle:change', (e) => {
console.log('Checked:', e.detail.checked);
});
</script>