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}
    helperText="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.
disabledbooleanNopropsfalseWhether every option in the group is disabled.
errorMessageReactNodeNoprops—Visible error message for invalid state.
helperTextReactNodeNoprops—-
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.
orientation"horizontal" | "vertical"Noprops"vertical"Layout direction for the radio options.