Radio Button

Related components

The RadioButton component implements the Radio component from Radix with default styling.

It needs to be wrapped with the RadioButtonGroup as it will not load without it. If only one RadioButton is needed please consider using a checkbox instead.

A RadioButton needs to be associated with a label for accessibility purposes and to display the text for it. So rather than using the RadioButton component directly in a UI, consider using a RadioButtonField, which provides a Label and displays validation errors. Use this RadioButton to compose more complex Field type components.

<RadioButtonGroup defaultValue="online" direction="row" aria-label="How will pupils take the assessment?">
  <RadioButton value="online" aria-label="Online" />
  <RadioButton value="paper" aria-label="On paper" />
</RadioButtonGroup>

With a label

Wrap a RadioButton in an InlineFieldWrapper to give it a visible, clickable label. This is what RadioButtonField.Item does for you.

<RadioButtonGroup defaultValue="online" direction="column" aria-label="How will pupils take the assessment?">
  <InlineFieldWrapper label="Online">
    <RadioButton value="online" />
  </InlineFieldWrapper>
  <InlineFieldWrapper label="On paper">
    <RadioButton value="paper" />
  </InlineFieldWrapper>
</RadioButtonGroup>

Direction

RadioButtonGroup accepts direction: row or column. row adds 32px between items and wraps when there isn't enough space.

<div className="flex flex-col gap-6">
  <RadioButtonGroup direction="row" defaultValue="online" aria-label="Row">
    <InlineFieldWrapper label="Online"><RadioButton value="online" /></InlineFieldWrapper>
    <InlineFieldWrapper label="On paper"><RadioButton value="paper" /></InlineFieldWrapper>
  </RadioButtonGroup>
  <RadioButtonGroup direction="column" defaultValue="online" aria-label="Column">
    <InlineFieldWrapper label="Online"><RadioButton value="online" /></InlineFieldWrapper>
    <InlineFieldWrapper label="On paper"><RadioButton value="paper" /></InlineFieldWrapper>
  </RadioButtonGroup>
</div>

Size

These are the available sizes for this component: md (16px) and lg (24px). The default is md. Size can change by breakpoint.

<div className="flex gap-8">
  <RadioButtonGroup defaultValue="a" aria-label="Medium">
    <RadioButton size="md" value="a" aria-label="Medium" />
  </RadioButtonGroup>
  <RadioButtonGroup defaultValue="a" aria-label="Large">
    <RadioButton size="lg" value="a" aria-label="Large" />
  </RadioButtonGroup>
</div>

Disabled

Disable a single option with disabled on the RadioButton, or the whole group with disabled on the RadioButtonGroup.

<div className="flex flex-col gap-6">
  <RadioButtonGroup defaultValue="online" direction="column" aria-label="One option disabled">
    <InlineFieldWrapper label="Online"><RadioButton value="online" /></InlineFieldWrapper>
    <InlineFieldWrapper label="On paper (no printer set up)"><RadioButton value="paper" disabled /></InlineFieldWrapper>
  </RadioButtonGroup>
  <RadioButtonGroup defaultValue="online" direction="column" disabled aria-label="Whole group disabled">
    <InlineFieldWrapper label="Online"><RadioButton value="online" /></InlineFieldWrapper>
    <InlineFieldWrapper label="On paper"><RadioButton value="paper" /></InlineFieldWrapper>
  </RadioButtonGroup>
</div>

Controlled

Pass value and onValueChange to the RadioButtonGroup to control the selection.

const Example = () => {
  const [value, setValue] = React.useState('teachers')
  return (
    <div className="flex flex-col gap-4">
      <RadioButtonGroup value={value} onValueChange={setValue} direction="column" aria-label="Who can see results?">
        <InlineFieldWrapper label="Teachers only"><RadioButton value="teachers" /></InlineFieldWrapper>
        <InlineFieldWrapper label="Teachers and pupils"><RadioButton value="pupils" /></InlineFieldWrapper>
      </RadioButtonGroup>
      <Text size="sm">Selected: {value}</Text>
    </div>
  )
}
render(<Example />)