Switch
Switch is a native web component (zero dependencies) that represents a binary on/off state, ideal for enabling or disabling settings instantly. Use it when the action takes effect immediately, without needing a confirmation button. The label text goes in the default slot, and it fires a change event on every toggle.
Preview
<div style="display: flex; flex-direction: column; gap: 1rem;">
<pura-switch checked>Email notifications</pura-switch>
<pura-switch>Dark mode</pura-switch>
<pura-switch disabled>Feature unavailable</pura-switch>
</div>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | Sets whether the switch is on; reflects the .checked property. |
disabled | boolean | false | Disables interaction and removes the switch from the focus order. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/switch.js"></script>import "./pura/lib/switch.js";