 <RadioGroup.Root defaultValue="1" name="example">
  <RadioGroup.Item value="1">Default</RadioGroup.Item>
  <RadioGroup.Item value="2">Comfortable</RadioGroup.Item>
  <RadioGroup.Item value="3">Compact</RadioGroup.Item>
</RadioGroup.Root>

API Reference

This component inherits props from the Radio Group primitive and supports common margin props.

Root

Contains all the parts of a radio group.

Prop	Type	Default
`asChild`	`boolean`	`false`
`color`	`"gray" \| "purple"`	`"gray"`
`variant`	`"classic" \| "surface" \| "soft"`	`"surface"`
`size`	`"1" \| "2" \| "3"`	`"2"`

Item

An item in the group that can be checked.

Examples

Size

Use the size prop to control the radiobutton size.

 <Flex align="center" gap="2">
  <RadioGroup.Root size="1" defaultValue="1">
    <RadioGroup.Item value="1" />
  </RadioGroup.Root>

  <RadioGroup.Root size="2" defaultValue="1">
    <RadioGroup.Item value="1" />
  </RadioGroup.Root>

  <RadioGroup.Root size="3" defaultValue="1">
    <RadioGroup.Item value="1" />
  </RadioGroup.Root>
</Flex>

Variant

Use the variant prop to control the visual style of the radio buttons.

 <Flex gap="2">
  <Flex direction="column" asChild gap="2">
    <RadioGroup.Root variant="surface" defaultValue="1">
      <RadioGroup.Item value="1" />
      <RadioGroup.Item value="2" />
    </RadioGroup.Root>
  </Flex>

  <Flex direction="column" asChild gap="2">
    <RadioGroup.Root variant="classic" defaultValue="1">
      <RadioGroup.Item value="1" />
      <RadioGroup.Item value="2" />
    </RadioGroup.Root>
  </Flex>

  <Flex direction="column" asChild gap="2">
    <RadioGroup.Root variant="soft" defaultValue="1">
      <RadioGroup.Item value="1" />
      <RadioGroup.Item value="2" />
    </RadioGroup.Root>
  </Flex>
</Flex>

Color

Use the color prop to assign a specific color.

 <Flex gap="2">
  <RadioGroup.Root color="purple" defaultValue="1">
    <RadioGroup.Item value="1" />
  </RadioGroup.Root>

  <RadioGroup.Root color="gray" defaultValue="1">
    <RadioGroup.Item value="1" />
  </RadioGroup.Root>
</Flex>

High-contrast

Use the highContrast prop to increase color contrast with the background.

 <Grid rows="2" gap="2" display="inline-grid" flow="column">
  <RadioGroup.Root color="purple" defaultValue="1">
    <RadioGroup.Item value="1" />
  </RadioGroup.Root>

  <RadioGroup.Root color="purple" defaultValue="1" highContrast>
    <RadioGroup.Item value="1" />
  </RadioGroup.Root>

  <RadioGroup.Root color="gray" defaultValue="1">
    <RadioGroup.Item value="1" />
  </RadioGroup.Root>

  <RadioGroup.Root color="gray" defaultValue="1" highContrast>
    <RadioGroup.Item value="1" />
  </RadioGroup.Root>
</Grid>

Alignment

Composing RadioGroup.Item within Text automatically centers it with the first line of text.

 <Flex direction="column" gap="3" maxWidth="300px">
  <Text size="1">
    <RadioGroup.Root size="1" defaultValue="1">
      <RadioGroup.Item value="1">Default</RadioGroup.Item>
      <RadioGroup.Item value="2">Compact</RadioGroup.Item>
    </RadioGroup.Root>
  </Text>

  <Text size="2">
    <RadioGroup.Root size="2" defaultValue="1">
      <RadioGroup.Item value="1">Default</RadioGroup.Item>
      <RadioGroup.Item value="2">Compact</RadioGroup.Item>
    </RadioGroup.Root>
  </Text>

  <Text size="3">
    <RadioGroup.Root size="3" defaultValue="1">
      <RadioGroup.Item value="1">Default</RadioGroup.Item>
      <RadioGroup.Item value="2">Compact</RadioGroup.Item>
    </RadioGroup.Root>
  </Text>
</Flex>

Disabled

Use the native disabled attribute to create a disabled radiobutton.

OffOn

 <Flex direction="column" gap="2">
  <RadioGroup.Root defaultValue="2">
    <RadioGroup.Item value="1">Off</RadioGroup.Item>
    <RadioGroup.Item value="2">On</RadioGroup.Item>
  </RadioGroup.Root>

  <RadioGroup.Root defaultValue="2">
    <RadioGroup.Item value="1" disabled>
      Off
    </RadioGroup.Item>
    <RadioGroup.Item value="2" disabled>
      On
    </RadioGroup.Item>
  </RadioGroup.Root>
</Flex>

With helper text

Add helper text to provide additional context about the radio group.

Notification frequency

Daily digestWeekly summaryMonthly report

Choose how often you want to receive notifications.

 <Flex direction="column" gap="2" maxWidth="400px">
  <Text size="2" weight="bold">
    Notification frequency
  </Text>

  <RadioGroup.Root defaultValue="daily">
    <RadioGroup.Item value="daily">Daily digest</RadioGroup.Item>
    <RadioGroup.Item value="weekly">Weekly summary</RadioGroup.Item>
    <RadioGroup.Item value="monthly">Monthly report</RadioGroup.Item>
  </RadioGroup.Root>

  <Text size="2" color="gray">
    Choose how often you want to receive notifications.
  </Text>
</Flex>

With validation message

Display validation messages along with helper text to provide feedback and context.

Notification frequency

Daily digestWeekly summaryMonthly report

Please select a notification frequency.Choose how often you want to receive notifications.

 <Flex direction="column" gap="2" maxWidth="400px">
  <Text size="2" weight="bold">
    Notification frequency
  </Text>

  <RadioGroup.Root>
    <RadioGroup.Item value="daily">Daily digest</RadioGroup.Item>
    <RadioGroup.Item value="weekly">Weekly summary</RadioGroup.Item>
    <RadioGroup.Item value="monthly">Monthly report</RadioGroup.Item>
  </RadioGroup.Root>

  <Text size="2" color="red">
    Please select a notification frequency.
  </Text>

  <Text size="2" color="gray">
    Choose how often you want to receive notifications.
  </Text>
</Flex>

Combine radio buttons with tooltips to provide additional information about specific options.

Notification frequency

Daily digestWeekly summaryMonthly report

Never

 <Flex direction="column" gap="2" maxWidth="400px">
  <Text size="2" weight="bold">
    Notification frequency
  </Text>

  <RadioGroup.Root defaultValue="daily">
    <RadioGroup.Item value="daily">Daily digest</RadioGroup.Item>
    <RadioGroup.Item value="weekly">Weekly summary</RadioGroup.Item>
    <RadioGroup.Item value="monthly">Monthly report</RadioGroup.Item>
    <RadioGroup.Item value="never">
      <Flex align="center" gap="2">
        Never
        <Tooltip
          content={
            <>
              Disable all notifications:
              <br />
              You will not receive any email updates about your account
              activity.
            </>
          }
          maxWidth="250px"
        >
          <InfoCircledIcon color="gray" />
        </Tooltip>
      </Flex>
    </RadioGroup.Item>
  </RadioGroup.Root>
</Flex>

Radio Group

On this page

API Reference

Root

Item

Examples

Size

Variant

Color

High-contrast

Alignment

Disabled

With helper text

With validation message

With tooltip