UI — form

Radio

Accessible radio group following the WAI-ARIA APG pattern. Tab enters the group; arrow keys move focus and selection simultaneously; Home/End jump to first/last.

Sourcesrc/components/ui/radio.tsx

Controlled with descriptions

Bind to useState, show a label + muted description for each option. Try arrow keys — focus and selection move together.

HobbyFree forever — 1 project, community support.Pro$20/mo — unlimited projects, priority email.Team$80/mo — SSO, audit log, seat-based pricing.

Selected: pro

Horizontal orientation

Arrow-left / arrow-right cycle selection when orientation is horizontal.

SmallMediumLarge

Per-option disabled

Disable individual radios — they're skipped by arrow-key navigation.

Credit cardVisa, Mastercard, AmexBank transferACH, 1-2 business daysCryptoComing soon