Radio
A single-selection control for choosing exactly one option from a set. Radio covers 5 variants, 3 sizes, and full interaction states, ready in Figma and React.
Loved by 2,000+ users worldwide.
Overview
Radio is a single-selection control for choosing exactly one option from a set. With 5 semantic variants, 3 sizes, and full interaction state coverage, it adapts to every form context, surface, and validation scenario, with token-driven styling that stays in sync with your theme.
Figma Preview
When should you use them?
Use a radio button when a user must choose exactly one option from a small, visible set of mutually exclusive choices, like a shipping method, a plan tier, or a yes/no preference. When more than one selection is allowed, use checkboxes instead.
How should you use them?
- Use radios for mutually exclusive options; use checkboxes when multiple choices are allowed.
- Always present radios as a group of two or more, never a single radio on its own.
- Pre-select a sensible default when one option is clearly the most common.
- Keep each option's label short and parallel in structure.
- Match the variant to context: Danger for risky choices, Success for confirmations.
- Keep the group keyboard-navigable with arrow keys, following native radio behavior.
Questions,
answered clearly.
Plans, pricing, licensing, updates, and technical questions, all answered in one place.
Still have questions?
Your current plan is a one-time payment, no subscriptions, no recurring charges for what you buy today. Some future Create UI products (such as AI-powered features) may be offered as optional add-on subscriptions, but these are entirely separate and will never affect your existing purchase. What you buy now, you own permanently.
Stop deciding. Start shipping.
Install it today and your next screen takes an hour instead of a day. Keep rebuilding from scratch, and next quarter looks exactly like this one.
Start Free Now. Upgrade whenever you need.
