RadioGroup

RadioGroup is used to render a short list of mutually exclusive options.

Page navigation navigation

React

readyNot reviewed for a11y

Storybook|Source

Rails

readyNot reviewed for a11y

Docs|Lookbook|Source

Figma

View in Figma|

React examples

Default

Choices

Choice one

Choice two

Choice three

<RadioGroup name="defaultRadioGroup">
  <RadioGroup.Label>Choices</RadioGroup.Label>
  <FormControl>
    <Radio value="one" />
    <FormControl.Label>Choice one</FormControl.Label>
  </FormControl>
  <FormControl>
    <Radio value="two" defaultChecked />
    <FormControl.Label>Choice two</FormControl.Label>
  </FormControl>
  <FormControl>
    <Radio value="three" />
    <FormControl.Label>Choice three</FormControl.Label>
  </FormControl>
</RadioGroup>

<RadioGroup name="defaultRadioGroup">
  <RadioGroup.Label>Choices</RadioGroup.Label>
  <FormControl>
    <Radio value="one" />
    <FormControl.Label>Choice one</FormControl.Label>
  </FormControl>
  <FormControl>
    <Radio value="two" defaultChecked />
    <FormControl.Label>Choice two</FormControl.Label>
  </FormControl>
  <FormControl>
    <Radio value="three" />
    <FormControl.Label>Choice three</FormControl.Label>
  </FormControl>
</RadioGroup>

With a caption

ChoicesThis is a caption

Choice one

Choice two

Choice three

<RadioGroup name="captionRadioGroup">
  <RadioGroup.Label>Choices</RadioGroup.Label>
  <RadioGroup.Caption>This is a caption</RadioGroup.Caption>
  <FormControl>
    <Radio value="one" />
    <FormControl.Label>Choice one</FormControl.Label>
  </FormControl>
  <FormControl>
    <Radio value="two" defaultChecked />
    <FormControl.Label>Choice two</FormControl.Label>
  </FormControl>
  <FormControl>
    <Radio value="three" />
    <FormControl.Label>Choice three</FormControl.Label>
  </FormControl>
</RadioGroup>

<RadioGroup name="captionRadioGroup">
  <RadioGroup.Label>Choices</RadioGroup.Label>
  <RadioGroup.Caption>This is a caption</RadioGroup.Caption>
  <FormControl>
    <Radio value="one" />
    <FormControl.Label>Choice one</FormControl.Label>
  </FormControl>
  <FormControl>
    <Radio value="two" defaultChecked />
    <FormControl.Label>Choice two</FormControl.Label>
  </FormControl>
  <FormControl>
    <Radio value="three" />
    <FormControl.Label>Choice three</FormControl.Label>
  </FormControl>
</RadioGroup>

With a validation message

See the form pattern documentation for more information on form validation patterns.

ChoicesSomething went wrong

Choice one

Choice two

Choice three

Something went wrong

<RadioGroup name="validationRadioGroup">
  <RadioGroup.Label>Choices</RadioGroup.Label>
  <FormControl>
    <Radio value="one" defaultChecked />
    <FormControl.Label>Choice one</FormControl.Label>
  </FormControl>
  <FormControl>
    <Radio value="two" />
    <FormControl.Label>Choice two</FormControl.Label>
  </FormControl>
  <FormControl>
    <Radio value="three" />
    <FormControl.Label>Choice three</FormControl.Label>
  </FormControl>
  <RadioGroup.Validation variant="error">Something went wrong</RadioGroup.Validation>
</RadioGroup>

<RadioGroup name="validationRadioGroup">
  <RadioGroup.Label>Choices</RadioGroup.Label>
  <FormControl>
    <Radio value="one" defaultChecked />
    <FormControl.Label>Choice one</FormControl.Label>
  </FormControl>
  <FormControl>
    <Radio value="two" />
    <FormControl.Label>Choice two</FormControl.Label>
  </FormControl>
  <FormControl>
    <Radio value="three" />
    <FormControl.Label>Choice three</FormControl.Label>
  </FormControl>
  <RadioGroup.Validation variant="error">Something went wrong</RadioGroup.Validation>
</RadioGroup>

Selection required

Choices

Choice one

Choice two

Choice three

<RadioGroup required name="requiredRadioGroup">
  <RadioGroup.Label>Choices</RadioGroup.Label>
  <FormControl>
    <Radio value="one" />
    <FormControl.Label>Choice one</FormControl.Label>
  </FormControl>
  <FormControl>
    <Radio value="two" defaultChecked />
    <FormControl.Label>Choice two</FormControl.Label>
  </FormControl>
  <FormControl>
    <Radio value="three" />
    <FormControl.Label>Choice three</FormControl.Label>
  </FormControl>
</RadioGroup>

<RadioGroup required name="requiredRadioGroup">
  <RadioGroup.Label>Choices</RadioGroup.Label>
  <FormControl>
    <Radio value="one" />
    <FormControl.Label>Choice one</FormControl.Label>
  </FormControl>
  <FormControl>
    <Radio value="two" defaultChecked />
    <FormControl.Label>Choice two</FormControl.Label>
  </FormControl>
  <FormControl>
    <Radio value="three" />
    <FormControl.Label>Choice three</FormControl.Label>
  </FormControl>
</RadioGroup>

More code examples

See the RadioGroup Storybook stories

Props

RadioGroup

Name	Default	Description
aria-labelledby		`string` Used when associating the input group with a label other than RadioGroup.Label
children Required		`RadioGroup.Label \| RadioGroup.Caption \| RadioGroup.Validation \| FormControl`
disabled	`false`	`boolean` Whether the input group allows user input
id	`A generated string`	`string` The unique identifier for this input group. Used to associate the label, validation text, and caption text. You may want a custom ID to make it easier to select elements in integration tests.
name Required		`string` The name used to identify this group of radios
onChange		`(selected: string \| null, e?: ChangeEvent<HTMLInputElement>) => void` An onChange handler that gets called when the selection changes
required	`false`	`boolean` If true, the user must make a selection before the owning form can be submitted
sx		`SystemStyleObject`

RadioGroup.Label

Name	Default	Description
visuallyHidden	`false`	`boolean` If true, the fieldset legend will be visually hidden
sx		`SystemStyleObject`

RadioGroup.Caption

Name	Default	Description
children		`React.ReactNode` The caption content
sx		`SystemStyleObject`

RadioGroup.Validation

Name	Default	Description
children		`React.ReactNode` The validation message
variant Required		`'error' \| 'success'` Changes the visual style to match the validation status
sx		`SystemStyleObject`