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.

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.