Radio Group

The Radio Group component allows users to select a single option from a related set of choices.

Usage & Examples

Default

Choose an option
default.tsx
const radioOptions = [
  { label: "Option A", value: "a" },
  { label: "Option B", value: "b" },
  { label: "Option C", value: "c" },
];

const [selected, setSelected] = useState("b");

<RadioGroup
  legend="Choose an option"
  name="radio-group-example"
  theme="secondary"
  value={selected}
  options={radioOptions}
  onChange={setSelected}
/>

Horizontal

Choose an option
horizontal.tsx
<RadioGroup
  legend="Choose an option"
  name="radio-group-horizontal-example"
  theme="primary"
  value={selected}
  options={radioOptions}
  orientation="horizontal"
  onChange={setSelected}
/>

With description

Notification preference
Only one option can be selected at a time.
with-description.tsx
<RadioGroup
  legend="Notification preference"
  name="radio-group-description-example"
  theme="tertiary"
  value={selected}
  options={radioOptions}
  description="Only one option can be selected at a time."
  onChange={setSelected}
/>

Props API

20 props
Columns
Radio Group props API
Default
Description
classNamestringNostyling—Custom class name for the root fieldset.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
descriptionReactNodeNoprops—Visible helper text for the radio group.
disabledbooleanNopropsfalseWhether every option in the group is disabled.
errorMessageReactNodeNoprops—Visible error message for invalid state.
glassbooleanNoprops—Applies a translucent frosted-glass treatment to each radio option.
invalidbooleanNopropsfalseMarks the radio group as invalid.
legendReactNodeNoprops—Accessible group label displayed as a legend.
namestringYesprops—Name shared by all radio buttons in the group.
onChange(value: string) => voidYesevents—Callback triggered with the selected option value.
optionsRadioButtonOption[]Yesprops—Available radio options.
optionsClassNamestringNoprops—Custom class name for the options wrapper.