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

Props

No props data available for RadioGroup.

Usage

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.

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

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

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

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

Variants

Admin Portal

2 variants found

RadioGroup in Indexadmin-portal

/p/:portalSessionId/directory-sync/:directoryId/google-workspace/allow-access

RadioGroup in Indexadmin-portal

/p/:portalSessionId/directory-sync/:directoryId/google-workspace/allow-access

Context

Usage

Used 11 times across 2 packages

Dashboard

Admin Portal

Where it's used

2 files

packages/dashboard/src/components/settings/team-settings/delete-team-dialog/delete-team-dialog.tsx8

/p/:portalSessionId/directory-sync/:directoryId/google-workspace/allow-access

packages/admin-portal/src/app/p/[portalSessionId]/directory-sync/[directoryId]/google-workspace/allow-access/index.tsx3

Radio Group

On this page

Props

Usage

Size

Variant

Color

High-contrast

Alignment

Disabled

With helper text

With validation message

With tooltip

Variants

Admin Portal

Context

Usage Statistics

Usage

Where it's used