Radio Group

DefaultComfortableCompact

 <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>

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"`

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">
  <RadioGroup.Root size="1" defaultValue="1">
    <Text as="label" size="2">
      <Flex gap="2">
        <RadioGroup.Item value="1" /> Default
      </Flex>
    </Text>

    <Text as="label" size="2">
      <Flex gap="2">
        <RadioGroup.Item value="2" /> Compact
      </Flex>
    </Text>
  </RadioGroup.Root>

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

    <Text as="label" size="3">
      <Flex gap="2">
        <RadioGroup.Item value="2" /> Compact
      </Flex>
    </Text>
  </RadioGroup.Root>

  <RadioGroup.Root size="3" defaultValue="1">
    <Text as="label" size="4">
      <Flex gap="2">
        <RadioGroup.Item value="1" /> Default
      </Flex>
    </Text>

    <Text as="label" size="4">
      <Flex gap="2">
        <RadioGroup.Item value="2" /> Compact
      </Flex>
    </Text>
  </RadioGroup.Root>
</Flex>

It is automatically well-aligned with multi-line text too.

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>

On this page

API Reference