Components

RadioGroup

Radio groups let users choose one option from a small set of mutually exclusive values.

Basic Usage

Keep radio options in a group so keyboard navigation and value selection remain mutually exclusive.

Supporting Descriptions

When the choice affects behavior, add a short supporting line so the options can stand on their own without extra nearby copy.

Disabled Options

Disable individual options when the broader choice is valid but one route is unavailable in the current context.

Layout and Error

Use horizontal layout for compact choices, and apply invalid state to the group when validation fails.

API reference

RadioGroup wraps Base UI Radio. Use the Base UI API reference for group value behavior, keyboard navigation, disabled state, and individual radio item props.

Edit this page
Last updated: May 22, 2026, 6:53 PM