Radio Button

Radio buttons should be used when the user needs to see all available options. If there are more than five options or space is limited, consider using a dropdown menu instead.

Introduction

The MD3 Expressive Radio Button is designed for clarity and precision. It uses smooth SVG animations to transition the center dot from hidden to visible, providing a clear confirmation of selection. Typically used within a RadioGroup, it ensures that only one option can be active at a time, making it ideal for mutually exclusive settings.

Anatomy

• Outer Circle: The boundary of the radio button.
• Center Dot: The indicator that appears when the option is selected.
• Label (Optional): Descriptive text associated with the radio button.
• State Layer: Handles hover and pressed states with a ripple effect.

Variants

Basic Radio Group

The standard vertical list of choices.

Horizontal Layout

Useful for compact areas or when the labels are very short.

Features

Group Management

The RadioGroup component handles the selection logic, keyboard navigation, and ARIA roles for its children, ensuring a consistent and accessible experience.

States

Radio buttons support error, disabled, and readOnly states. The error state highlights the button in the theme's error color.

Usage

Basic Usage

import { RadioGroup, RadioButton } from "@bug-on/m3-expressive";

<RadioGroup name="storage-plan" defaultValue="free">
  <RadioButton value="free" label="Free (5GB)" />
  <RadioButton value="pro" label="Pro (50GB)" />
  <RadioButton value="business" label="Business (1TB)" />
</RadioGroup>

Controlled Component

const [plan, setPlan] = useState("free");

<RadioGroup value={plan} onValueChange={setPlan} name="plan">
  <RadioButton value="free" label="Free" />
  <RadioButton value="pro" label="Pro" />
</RadioGroup>

Best Practices

Do

• Use radio buttons for 2 to 5 mutually exclusive options.
• Always provide a label for each radio button.
• Group related radio buttons under a clear section heading.
• Set a default selection whenever possible to help users move through the form faster.

Don't

• Don't use radio buttons for more than 5 options; use a Dropdown or Menu instead.
• Don't use a radio button for a binary choice that can be handled by a single Checkbox or Switch.
• Avoid placing radio buttons in a way that makes it unclear which label belongs to which button.

Accessibility

• Keyboard: Navigate between options using Arrow keys. Select with Space.
• Roles: Correctly implements role="radiogroup" and role="radio".
• Linking: Automatically links labels to their respective inputs using id and htmlFor.
• Focus: Visible focus rings are applied during keyboard navigation.

API Reference

RadioGroup

RadioButton