Radio Component

Overview

Radio slides its active dot from the previous choice to the new one, and in card layouts the selected background glides between options. Optional elastic feedback adds a short bounce on press, while the group keeps standard single-selection behaviour.

Use it for mutually exclusive choices users should compare before picking, such as delivery methods, billing periods, roles, and product variants. Animation should make the active choice clearer, not add noise.

Theme and Interaction Customisation

Choose inline or card layouts, outlined, filled, or solid controls, muted or primary card backgrounds, per-option accent colours, and whether the icon shows. Interactions include the sliding dot, sliding card background, elastic feedback, and draggable ordering.

Example Production Use Case

An ecommerce checkout can list Standard, Express, Same day, and Collect delivery as cards with prices and estimates. Choosing Express glides the highlight across while the order total updates.

A SaaS billing page can use inline radios for monthly or yearly billing, with the sliding dot making the switch obvious at a glance.

An onboarding step can ask users to pick their role from text-led cards with the icon hidden, keeping the choice visual and quick on mobile.

Best Used For

• Checkout and delivery preferences.
• Subscription and billing periods.
• Product variants and configuration modes.
• SaaS onboarding questions with one answer.
• Account settings with exclusive choices.
• Questionnaires and booking flows.

Not For

When users can pick several options, use Checkbox instead.

Very large lists need a searchable selector or dropdown rather than dozens of visible radios.

For page navigation use Tabs, and for instant on/off settings use a toggle. Only enable drag reordering when order actually matters.

Performance Budget

Animate the shared indicator without per-frame layout work, follow the latest selection during rapid switching, keep elastic effects short, and use stable IDs when reordering. Don’t animate while the group is idle.

Accessibility and Mobile

Use semantic radio groups with labels, accurate checked states, arrow-key navigation, and focus styles distinct from selection. With the icon hidden, selection must still show without relying on colour alone. On mobile, keep targets comfortable and indicators aligned when labels wrap, offer an alternative to dragging, and with reduced motion remove sliding and bounce.

Common Mistakes

• Allowing more than one active option.
• Letting the indicator drift from the real form value.
• Using sliding or elastic settings outside their supported layouts.
• Losing the selection during reordering.
• Styling focus and selection the same way.
• Overusing elastic bounce.
• Ignoring reduced-motion preferences.