Radio Group
Radio Group is a native web component that groups child <pura-radio> elements, allowing only one option to be selected at a time. It renders a wrapper with role=radiogroup, offers arrow-key navigation (roving tabindex), and reflects the chosen option in the value attribute. Use it when the user needs to choose exactly one alternative among a few visible options.
Preview
<pura-radio-group label="Subscription plan" value="pro">
<pura-radio name="plano" value="free">Free</pura-radio>
<pura-radio name="plano" value="pro">Professional</pura-radio>
<pura-radio name="plano" value="team">Team</pura-radio>
<pura-radio name="plano" value="legacy" disabled>Legacy (unavailable)</pura-radio>
</pura-radio-group>
<script type="module">
document.querySelector('pura-radio-group')
.addEventListener('change', (e) => console.log('selected:', e.detail.value));
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
label | string | — | Heading/legend text for the group, also used as the aria-label. |
orientation | "vertical" | "horizontal" | vertical | Layout direction of the options. |
value | string | — | Value of the selected option; it reflects and is reflected by the checked radio. |
disabled | boolean | false | Disables the entire group, blocking interaction. |
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/radio-group.js"></script>import "./pura/lib/radio-group.js";