What are the key radio button states to consider?

Deep dive

Traditionally, there are two radio button states: default (unselected) and selected.

But there are also other states like disabled, hover, and focus. These visual cues help guide users by using patterns they already know and understand. They’re optional, but they might make interacting with the button feel smoother.

Let's take a closer look.

Default (unselected) state

A default radio button state is when the button is not yet chosen by the user. It indicates that no option in the group has been selected. It can also be called an active radio button state. 

Sometimes, a default option in a group of radio buttons is pre-selected. In that case, the default state would be the option already chosen for the user, while others remain unselected.

Consider the following: 

• Clarity: The default effect should be clear and easily recognizable. Create a clear differentiation from the selected effect

• Visual hierarchy: Use visual cues like color, size, or border to highlight the default option.

• Accessibility: Ensure that the default state is accessible to users with disabilities, including those using screen readers. Use a high contrast ratio (at least 4.5:1) with a background.

Guidelines: 

• Use a visible outline of at least 1px thick (1.5px is recommended for better visibility).

• Choose neutral colors, such as gray-400 or similar.

• Ensure the shape remains a clear circle.

• Opt for a size between 16-20px, with 18px being the standard.

Ask yourself: 

• Is the active radio button clearly indicated?

• Does it align with user expectations?

• How does the visual hierarchy emphasize the default state?

Selected state

A selected radio button effect means that the button has been chosen by the user. It visually indicates that this particular option in the group is active or selected.

Consider the following: 

• Clear indication: Use a clear visual indicator to show the selected radio button. It can be a prominent fill or check mark. 

• Accessibility: Maintain strong contrast with the background.

• Consistency: Maintain a consistent visual style for the selected state across your interface.

Guidelines: 

• Provide instant visual feedback.

• Consider animation for state change (150-200ms transition).

• Fill with your primary brand color. 

• The inner dot should be 6-8px (roughly 40-50% of total size).

Ask yourself:

• Is the selected option clearly highlighted?

• How does the selected state indicate the user's choice?

• Is the visual style consistent with other selected elements in the interface?

Disabled state

A disabled radio button state means the button is not interactive—it can't be selected by the user. 

Consider the following: 

• Clear communication: Use a clear visual indicator to show that this is an inactive radio button. Disabled buttons are typically grayed out. 

• Contextual explanation: Provide a clear explanation for why the option is disabled.

Guidelines: 

• Reduce opacity (typically 40-50%).

• Remove hover effects.

• Keep a label readable but visually distinct.

• Add a not-allowed cursor.

• Maintain the basic shape.

Ask yourself:

• When should options be disabled vs. hidden?

• Is there a visually clear indication when a radio button is disabled?

• Are users provided with contextual information on why an option is disabled?

• How does the disabled state prevent user confusion and errors?

Hover state

A hover radio button effect occurs when a user moves their pointer over the button. It provides a visual indication, like a color change or outline, to show that the button is interactive. 

Hover effects are typically used in desktop designs, where users interact with a pointer or mouse. They are usually not used in mobile design since touchscreens don’t have a hover interaction—users directly tap to interact.

The hover state is not mandatory for radio buttons.

Consider the following: 

• Feedback: Provide visual feedback when the user hovers over a radio button.

• Consistency: Maintain consistent hover effects across your interface.

Guidelines: 

• Provide a subtle visual change (slight color shift or background shadow with 10-15% opacity).

• Change a cursor to a pointer.

• Optional: provide a slight scaling (1.02-1.05).

• Maintain a hover state for the parent label.

Ask yourself:

• Is the hover state distinct enough without being distracting?

• Does it provide clear feedback to the user?

• Is there a consistent hover effect throughout the interface?

• How does the hover state enhance user interaction?

Focus state

A focus radio button effect highlights the button when it is selected using a keyboard or another input device, typically showing a visual indicator like an outline. This helps users navigate forms and options, especially for accessibility purposes. It can be used for both mobile and desktop designs. 

Consider adding this state if you aim to meet accessibility standards. 

Consider the following: 

• Accessibility: Ensure that the focus state is clearly visible to users with visual impairments.

• Keyboard navigation: Make sure that keyboard users can easily navigate between radio buttons using the tab key.

Guidelines:

• Don’t remove a visible focus ring. Ensure it fully surrounds the control.

• Add a high-contrast outline. Use a 2px outline offset.

• Match the focus color with your system's focus state.

Ask yourself:

• Does our focus effect meet WCAG requirements?

• Is it visible on all background colors?

• Can users easily navigate between radio buttons using the keyboard?

Interactive state to consider

Error state 

A radio button error state indicates that the user's selection is invalid or required but not selected. It usually includes a visual cue, like a red outline or error message, to inform the user that they need to correct their input. It’s not mandatory.

Source

Ask yourself: How do we handle invalid selections in a radio group?

Guidelines:

• Use system error color for the outline.

• Add an error icon if space permits.

• Ensure a radio button error message is associated via aria-describedby.

• Maintain focus state visibility even in error.

Rationale

By carefully designing these radio button states, you can significantly improve the usability and accessibility of your interface.

• Clarity and consistency: Clear and consistent visual cues help users quickly understand the state of each radio button.

• Accessibility: Adhering to accessibility guidelines ensures that your interface is usable by people with disabilities.

• User experience: Well-designed radio buttons can reduce user errors and frustration.

Key considerations

Follow this step-by-step framework to ensure your design meets both accessibility and usability standards.

1. Audit current implementation

• Check all states against WCAG 2.1 requirements.

• Verify how keyboard navigation works.

• Test design with major screen readers.

• Validate contrast ratios.

2. Define visual and interaction specifications

• Document exact colors and sizes.

• Create consistent spacing rules.

• Specify transition timings.

• Define error state behaviors.

• Ensure a clickable label area.

• Handle dynamic option loading.

• Account for long label text.

• Consider mobile touch targets (min 44x44px).

3. Implementation checklist

• Use semantic HTML (<input type="radio">).

• Group related options with fieldset/legend.

• Implement proper aria-labels.

• Test cross-browser compatibility.

4. Quality assurance

• Test design with keyboard only.

• Verify screen reader announcements.

• Check color contrast.

• Validate responsive behavior.

Remember to test your radio button states with:

• Keyboard navigation;

• Screen readers;

• Different color vision deficiencies;

• Various input devices (touch, mouse, keyboard);

• High contrast mode.

Should I create an indeterminate radio button state?

An indeterminate radio button is not a standard UI component or pattern. Radio buttons are typically designed to offer mutually exclusive choices, where users can select only one option from a group. The concept of an indeterminate state is more commonly associated with checkboxes, where it represents a state that is neither checked nor unchecked. 

Nevertheless, you can find the following examples of display on the web:

Is this the right approach for using this component? Probably not.

If you need to represent an indeterminate state for a selection within a group of radio buttons, consider exploring alternative design patterns, such as:

1. Use toggle buttons: Instead of traditional radio buttons, you could consider using toggle buttons that allow users to cycle through three states: selected, indeterminate, and unselected.

2. Custom icons: Design custom icons or visual representations that convey the different states (selected, indeterminate, unselected) and use these icons within your interface.

3. Segmented controls: If your design allows, use segmented controls with additional states (e.g., selected, indeterminate, unselected). This approach could work well in certain contexts.

4. Custom designs: Depending on your app's design language, you might create a custom solution that clearly communicates the indeterminate state within the context of your UI.

❓Questions designers should ask themselves

By asking the right questions, designers can question their decisions, find areas to improve, make sure nothing is overlooked, and reduce mistakes, leading to better, more thoughtful designs.

• Are we dealing with critical or reversible decisions?

• What's the cognitive state of our users? (tired, rushed, distracted?)

• How often will users interact with these controls?

• Do we need to support high-contrast mode?

• What's our minimum supported browser version?

• Do we need to handle dynamic state changes?

• What's our target WCAG compliance level?

• Do we need to support specific assistive technologies?

• Are there industry-specific accessibility guidelines?

⚠️ Common mistakes to avoid

Learning from your mistakes is important, but many problems can indeed be predicted and avoided. Based on Cieden's collective expertise, we're sharing the most common ones.

• Removing focus indicators for aesthetics;

• Using color alone to indicate state;

• Inconsistent hover behaviors across states;

• Insufficient contrast ratios (below 3:1);

• Ambiguous selected vs. unselected states;

• Overcomplicated transition animations;

• Breaking keyboard navigation;

• Missing aria labels;

• Inconsistent touch targets.

🛠️ Useful tools 

These tools will make your job easier and more effective.

• Radix UI: Provides accessible radio components.

• Adobe Spectrum: Guidelines for radio groups.

• Axe DevTools: Test radio button accessibility.

• Contrast Checker: Verify state visibility.

🤝 Credits

Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!

• UI cheat sheet: radio buttons, checkboxes, and other selectors by Tess Gadd

📚 Keep exploring 

Never stop growing. Explore resources thoughtfully handpicked by Cieden’s designers.

• Radio button states by Material Design 2