RadioButton

A selectable Button for single selection.

One

Two

Three

Design guidance

When and how to use this

Use a RadioButton to represent a selection that has an immediate effect on the state of other interface items, such as a filter menu. It also works well for tabs.

When to consider something else

If a user can select multiple options, use a CheckButton. For forms, alongside other form controls, generally a standard Radio is more appropriate.

React

RadioButton composes the Button component and supports everything that Button does in addition to a selected state controlled by the isChecked prop.

<Stack direction="row" spacing="400">
  <RadioButton isChecked={false}>Idle</RadioButton>
  <RadioButton isChecked>Checked</RadioButton>
</Stack>

Prop	Description
`isChecked`	if `true`, the RadioButton will be checked. You'll need to pass `onChange` to update its value (since it is now controlled).
`isDisabled`	if `true`, the RadioButton will be disabled.

Group

Use a RadioButtonGroup to group a set of RadioButton components together that represent a single piece of state. This allows you to get and set state as a single value and disable the entire group via isDisabled.

<RadioButtonGroup display="flex" defaultValue="1" flexDirection="row" gap="400">
  <RadioButton value="1">Button 1</RadioButton>
  <RadioButton value="2">Button 2</RadioButton>
  <RadioButton value="3">Button 3</RadioButton>
</RadioButtonGroup>

Color Scheme

RadioButton supports color modes, but sometimes a design calls for the colorScheme to override the mode. Pass light or dark to set the color explicitly.

<Stack bg="neutral.800" p="400" m="-400">
  <RadioButtonGroup
    colorScheme="light"
    display="flex"
    defaultValue="1"
    flexDirection="row"
    gap="400"
  >
    <RadioButton value="1">Light 1</RadioButton>
    <RadioButton value="2">Light 2</RadioButton>
    <RadioButton value="3">Light 3</RadioButton>
  </RadioButtonGroup>
</Stack>

Variant

By default, RadioButton uses the tertiary Button variant. It also supports primary and ghost.

Primary

<RadioButtonGroup
  variant="primary"
  display="flex"
  defaultValue="1"
  flexDirection="row"
  gap="400"
>
  <RadioButton value="1">Primary 1</RadioButton>
  <RadioButton value="2">Primary 2</RadioButton>
  <RadioButton value="3">Primary 3</RadioButton>
</RadioButtonGroup>

Ghost

<RadioButtonGroup
  variant="ghost"
  display="flex"
  defaultValue="1"
  flexDirection="row"
  gap="400"
>
  <RadioButton value="1">Ghost 1</RadioButton>
  <RadioButton value="2">Ghost 2</RadioButton>
  <RadioButton value="3">Ghost 3</RadioButton>
</RadioButtonGroup>

Minimal

Pass isMinimal for the minimal style of each variant which only ever renders a single pixel border.

<RadioButtonGroup
  defaultValue="1"
  display="flex"
  flexDirection="row"
  gap="400"
  isMinimal
  variant="ghost"
>
  <RadioButton value="1">Ghost 1</RadioButton>
  <RadioButton value="2">Ghost 2</RadioButton>
  <RadioButton value="3">Ghost 3</RadioButton>
</RadioButtonGroup>

Radio

RemoveScroll