Checkbox
Native web component that renders a labeled checkbox, used for on/off options in forms. Supports checked and disabled states, keyboard navigation (Space/Enter), and ARIA attributes. Use it when the user needs to turn a single option on or off independently.
Preview
<pura-checkbox checked>I accept the terms of use</pura-checkbox>
<pura-checkbox>Receive news by email</pura-checkbox>
<pura-checkbox disabled>Unavailable option</pura-checkbox>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | Sets whether the box is checked; reflects the state and syncs aria-checked. |
disabled | boolean | false | Disables interaction and removes keyboard focus. |
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/checkbox.js"></script>import "./pura/lib/checkbox.js";