Radio

Radio buttons let users select exactly one option from a mutually exclusive set.

Overview

catnip-radio is a form-associated custom element for one option (circle + label text in the default slot), with optional supporting text below the row for errors or hints. The visible circle matches the Figma radio button spec (sizes m / l, checked, disabled, read-only, and danger validation). For a labelled group with shared supporting copy and mutually exclusive selection logic, use Radio Group. Shared field patterns are summarised on Inputs overview.

The visible ring, selected dot, and focus treatment use concentric vector geometry so they remain circular and centred across browser zoom levels.

Live example

Accessibility

• Native <input type="radio"> (visually hidden) drives semantics and keyboard support.
• Space or Arrow keys selects when focused; provide a visible label (default slot) or aria-label.
• intent="danger" sets aria-invalid for validation states.
• readonly keeps the option focusable without applying the component focus ring and prevents selection changes. Because aria-readonly is not supported on the individual radio role, Catnip exposes the unavailable state with aria-disabled="true" without setting native disabled.