Radio

Single-choice selection from a group. Vertical by default; add .lb-radio-group--horizontal for a wrapping row. Use when the user must pick exactly one option and you want all options visible at once (≤5–7). For larger sets prefer Select or Dropdown. Disable a row with disabled on the input plus .lb-radio-wrap--disabled on its wrapping label.

a11y (built in): plain native <input type="radio"> sharing one name — there is no JS controller, so arrow-key roving, the single tab stop per group and form submission are the browser's own. Each input sits inside its <label class="lb-radio-wrap">, which makes the visible text the accessible name and the whole row a hit target, and the wrapper carries role="radiogroup" + aria-label. Checked state is drawn as a thicker ring (border-width), not colour alone, and focus uses the standard :focus-visible outline.

Usage: Pure CSS — nothing to init and no js/lb.js dependency; the styling rides entirely on .lb-radio, so the stylesheets alone are enough. Wire it like any native form control: change bubbles from the inputs, so one listener on the .lb-radio-group wrapper hears every selection change, and the current value reads as document.querySelector('input[name="…"]:checked').value or via FormData. No custom events, no JS handle — and rows added after load need no re-sweep, because there is nothing to hydrate.


Radio Demo