Radio Button

Visual Variants

Size Variants

Orientation

The bordered/card variant is particularly effective for high-stakes choices like pricing tiers or shipping methods. Wrapping each option in a visible container increases the hit target (WCAG 2.5.8 Target Size) and makes the currently-selected option scannable at a glance.

Radio Group Properties

Individual Radio Properties

Critical: The name attribute is what creates the mutually exclusive group in native HTML. Without a shared name, radios won't deselect each other. In React component libraries, the parent RadioGroup component typically manages this automatically.

Design Token Mappings

The radio circle itself is always perfectly round (border-radius: 50%), so the Border Radius Generator doesn't apply to the radio control. However, for card/tile variants, the container card's corner radius is fully token-driven and customizable.

Interactive States

State Transitions

The selection transition should be snappy — 100–150ms with ease-out. The inner dot can scale from 0 to 1 for a satisfying "pop" effect. Avoid elaborate animations; radio selection must feel instantaneous because users are comparing options rapidly.

For card variants, the border color and optional shadow transition should be similarly fast. A box-shadow animation (e.g., adding --shadow-sm) on the selected card gives tactile feedback without feeling sluggish.

Accessibility Requirements

Radio buttons have excellent native HTML support — when you use <input type="radio"> correctly, the browser handles most accessibility behavior for free.

Semantic Structure (WCAG 1.3.1 Info and Relationships):

• Wrap the group in a <fieldset> with a <legend> that describes the question or label. Screen readers announce the legend before each option — "Shipping method: Standard, radio button, 1 of 3."
• Each <input type="radio"> must have an associated <label> via for/id pairing or wrapping.
• All radios in the group share the same name attribute.

Keyboard Interaction (WCAG 2.1.1 Keyboard):

• Tab moves focus to the radio group (landing on the selected radio, or the first radio if none is selected).
• Arrow Up / Arrow Left moves to the previous option and selects it.
• Arrow Down / Arrow Right moves to the next option and selects it.
• Arrow keys loop — pressing Down on the last option wraps to the first.
• Space selects the focused radio (though arrow keys already select, so Space is redundant but expected).

This "roving tabindex" pattern means the entire radio group is a single tab stop, which is more efficient than tabbing through every option individually.

Focus Visibility (WCAG 2.4.7 / 2.4.13):

• The focused radio must show a visible focus ring — at least 2px solid with an offset from the control.
• For card variants, the focus ring should surround the entire card, not just the radio circle inside it.

Error Identification (WCAG 3.3.1 / 3.3.3):

• When the group is required and no selection is made, display an error message associated with the group via aria-describedby on the <fieldset> pointing to the error text.
• Don't rely solely on red color to indicate errors (WCAG 1.4.1 Use of Color) — include an error icon and text.

Non-Text Contrast (WCAG 1.4.11):

• The radio circle border must have ≥3:1 contrast against the surrounding background.
• The filled selected state must also meet 3:1. Use the Contrast Checker to verify your primary color against the form background.

Target Size (WCAG 2.5.8):

• The clickable area for each radio option (including its label) should be at least 24×24px (Level AA). Card variants naturally exceed this. For standard radios, ensure the label is part of the click target by using proper <label> association.

Custom Radios: If you replace the native radio with a custom-styled element, you must:

1. Apply role="radiogroup" to the container and role="radio" to each option.
2. Manage aria-checked="true|false" on each option.
3. Implement roving tabindex (tabindex="0" on the selected/focused item, tabindex="-1" on others).
4. Handle all keyboard events (Arrow keys, Space).
5. Ensure focus is visible and programmatically managed.

Native <input type="radio"> with CSS hiding (appearance: none + custom styling) is almost always preferable to the ARIA approach. You get keyboard behavior, form integration, and screen reader support for free.

Do's

• Always group radios — a single radio is meaningless. Minimum 2 options.
• Pre-select a default when possible. If no default makes sense, add an explicit "None" option.
• Use a <fieldset> and <legend> to label the group. "Shipping method:" as the legend, not a heading above the group.
• Keep labels short — one line per option. Use the description slot for additional detail.
• List options in a logical order — alphabetical, by popularity, by ascending value, or by user preference data.
• Make the entire row clickable — not just the circle. Label association and adequate padding handle this.

Don'ts

• Don't use radios for actions — they're for selection, not execution.
• Don't nest radios — revealing sub-options based on a radio selection should use indented form fields, not nested radio groups.
• Don't dynamically change other radios — each group should be independent. If selection A hides Group B, use conditional rendering rather than disabling radios.
• Don't use more than ~7 options — beyond that, switch to a Select or Combobox.
• Don't mix radio and checkbox patterns — if some options are multi-select and others are single-select, redesign the form.
• Don't disable individual options without explanation — a tooltip or helper text should explain why an option is unavailable.

Card Radio Best Practices

When using bordered card variants for high-stakes selections (pricing tiers, plans):

• Include a visual indicator (filled circle or checkmark) in addition to the border highlight.
• Show price, features, or descriptions within the card to reduce cognitive load.
• Highlight the recommended option with a badge or subtle background differentiation.

Design System Implementations

Material Design 3 uses a 20px radio with a 10px inner dot and a "state layer" — a circular ripple that expands behind the control on hover (8% opacity) and press (12% opacity). Selected radios use the primary color for both the outer ring and inner dot. Material 3 introduced a subtle spring animation for the dot scaling in. The touch target is 48px minimum, achieved through transparent padding around the 20px control.

Ant Design provides Radio and Radio.Group with optionType="button" for segmented button-style radios. It supports buttonStyle="solid" (filled selected state) or buttonStyle="outline" (border-only selected state). Ant's radios support size (small, middle, large) and integrate directly with Form.Item for validation. The default radio uses a smooth CSS scale transition on the inner dot.

Radix UI offers an unstyled RadioGroup primitive with Root, Item, and Indicator sub-components. It handles roving tabindex, arrow-key navigation, and all ARIA attributes automatically. You supply all styling. The Indicator component renders only when the radio is selected, making animated entry straightforward with CSS.

Chakra UI provides RadioGroup and Radio with colorScheme, size (sm, md, lg), and isDisabled/isInvalid props. Chakra uses a CSS ::before pseudo-element for the inner dot with a scale transform, and applies a blue focus ring via its focus-visible system.

Headless UI (Tailwind Labs) offers a RadioGroup component built entirely with ARIA. It uses RadioGroup, RadioGroup.Option, RadioGroup.Label, and RadioGroup.Description. Selection is managed by value/onChange, and each option exposes render props (checked, active, disabled) for conditional styling. It's the most flexible headless implementation for card-style radios.

React Aria (Adobe) provides useRadioGroup and useRadio hooks with complete ARIA compliance, roving tabindex, and form integration. It handles label association, required validation, error messages, and internationalized announcements. The hooks work with any visual representation.

For verifying radio indicator contrast against backgrounds, use the Contrast Checker.