Overview

Key Features

• Label Placement: Supports label placement before or after the radio button.
• Accessibility: Fully keyboard and screen-reader accessible.

Anatomy

1. Radio:
   An interactive element that allows users to select a single option from a group of mutually exclusive choices.
2. Label:
   Text that clearly describes the purpose of the radio button selection.
3. Description text (optional):
   Additional context or instructions to guide the user on what the radio button controls.

Component States

A radio button has two states: Selected, where an option is chosen, and Unselected, where it is not. These states determine which option in a group is active.

Label Placement

The label can be placed before or after the radio button, allowing for flexible positioning.

Look and Feel

States

States define how the component behaves and appears in different interactions:

• Default: The standard appearance when inactive
• Hover: Highlights the field when the user hovers over it
• Focus: Indicates active input with a visible focus indicator.
• Disabled: Prevents interaction and input, appearing visually subdued.
• Read-only: Displays content without allowing edits while maintaining a standard appearance.

Errors

Errors communicate invalid input through clear visual cues to help users correct mistakes. The radio button turns red, and an error message appears below to guide users in resolving the issue.

Best Practice

Do:

• Provide a clear, descriptive label that explains the checkbox’s purpose
• Group related radio buttons together with a clear heading when part of a set.

Don’t:

• Don’t use radio buttons when multiple selections are allowed—use checkboxes instead.
• Don’t use radio buttons for actions—they should only be used for selecting values, not triggering changes.

Examples

Links

The latest UI designs are in the Figma file, while the components are available in Storybook — a visual workspace where UI elements can be viewed and interacted with like a live demo, while being coded, tested, and documented in isolation. Supported stacks include Web Component, Blazor, Angular, React, and VueJS, linked below.

Feedback

Have feedback, an idea, or a bug to report? Head over to our Contributions page.