Radio Group

The preview has been updated.

CopySharePrettify

<RadioGroup aria-label="Choose a style">
  <Radio value="elegant">Elegant</Radio>
  <Radio value="modern">Modern</Radio>
  <Radio value="ugly">Ugly</Radio>
</RadioGroup>

<RadioGroup aria-label="Choose a style"> <Radio value="elegant">Elegant</Radio> <Radio value="modern">Modern</Radio> <Radio value="ugly">Ugly</Radio> </RadioGroup>

Disabled

Use disabled on any Radios within Radio Group to prevent them from being selected or deselected.

To disable the entire group, use disabled on each item.

The preview has been updated.

CopySharePrettify

<RadioGroup aria-label="Disabled example">
  <Radio value="elegant" disabled>
    Elegant
  </Radio>
  <Radio value="modern" disabled>
    Modern
  </Radio>
  <Radio value="ugly" disabled>
    Ugly
  </Radio>
</RadioGroup>

<RadioGroup aria-label="Disabled example"> <Radio value="elegant" disabled> Elegant </Radio> <Radio value="modern" disabled> Modern </Radio> <Radio value="ugly" disabled> Ugly </Radio> </RadioGroup>

Required

Use required on a single Radio in the Radio Group to indicate that an option must be selected.

The preview has been updated.

CopySharePrettify

<RadioGroup aria-label="Required example">
  <Radio value="elegant" required>
    Elegant
  </Radio>
  <Radio value="modern">Modern</Radio>
  <Radio value="ugly">Ugly</Radio>
</RadioGroup>

<RadioGroup aria-label="Required example"> <Radio value="elegant" required> Elegant </Radio> <Radio value="modern">Modern</Radio> <Radio value="ugly">Ugly</Radio> </RadioGroup>

Labels, helpers, and error text

Use the FormField components to add a label, error message, or helper text to a Radio Group. They apply the necessary ARIA attributes for you, so you don't need to add them yourself.

Managing State

Controlled

Use selectedValue and onSelectedValueChange on Radio Group to control the selected value. selectedValue is the value of the currently selected Radio, or an empty string ('') if nothing is selected. onSelectedValueChange receives the newly selected value and the native change event. Update your state in the handler so the group reflects the new selection.

The preview has been updated.

CopySharePrettify

() => {
  const [shippingMethod, setShippingMethod] = React.useState('standard')

  return (
    <RadioGroup
      aria-label="Select a shipping method"
      selectedValue={shippingMethod}
      onSelectedValueChange={setShippingMethod}
    >
      <Radio value="standard">Standard</Radio>
      <Radio value="express">Express</Radio>
    </RadioGroup>
  )
}

() => { const [shippingMethod, setShippingMethod] = React.useState('standard') return ( <RadioGroup aria-label="Select a shipping method" selectedValue={shippingMethod} onSelectedValueChange={setShippingMethod} > <Radio value="standard">Standard</Radio> <Radio value="express">Express</Radio> </RadioGroup> ) }

Uncontrolled

Omit selection to allow the browser to manage the state. Optionally, use defaultSelection to set the initially selected values, and/or pass onSelectionChange to react to changes (for example, to track the selection) without taking over the state.

The preview has been updated.

CopySharePrettify

<RadioGroup
  aria-label="Select a shipping method"
  defaultSelection="standard"
  onSelectionChange={selection => trackSelection(selection)}
>
  <Radio value="standard">Standard</Radio>
  <Radio value="express">Express</Radio>
</RadioGroup>

<RadioGroup aria-label="Select a shipping method" defaultSelection="standard" onSelectionChange={selection => trackSelection(selection)} > <Radio value="standard">Standard</Radio> <Radio value="express">Express</Radio> </RadioGroup>

Accessibility

Both Radio Group and Radio must have a localized accessible name.

Radio Group

Use a FormLabel to provide a visible and accessible name (recommended, see Labels, helpers, and error text). Alternatively, use custom ARIA labels (see Accessibility guidelines).

Radio

By default, a Radio is named by its contents, so rich contents (e.g. a product name, image, price, or button) become a long, cluttered name to a screen reader.

To override the default name with a short custom one, use aria-label or aria-labelledby to reuse text from another element (see Accessibility guidelines). If you set both, aria-label wins. The Radio's full contents then become its description (using aria-describedby), so it stays easy to identify without losing information.