Quick Links

Radio Cards

Set of interactive cards where only one can be selected at a time.

 <Box maxWidth="600px">
  <RadioCards.Root defaultValue="1" columns={{ initial: '1', sm: '3' }}>
    <RadioCards.Item value="1">
      <Flex direction="column" width="100%">
        <Text weight="bold">8-core CPU</Text>
        <Text>32 GB RAM</Text>
      </Flex>
    </RadioCards.Item>
    <RadioCards.Item value="2">
      <Flex direction="column" width="100%">
        <Text weight="bold">6-core CPU</Text>
        <Text>24 GB RAM</Text>
      </Flex>
    </RadioCards.Item>
    <RadioCards.Item value="3">
      <Flex direction="column" width="100%">
        <Text weight="bold">4-core CPU</Text>
        <Text>16 GB RAM</Text>
      </Flex>
    </RadioCards.Item>
  </RadioCards.Root>
</Box>

API Reference

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

Root

Prop	Type	Default
`color`	`"gray" \| "purple"`	`"gray"`
`variant`	`"surface" \| "classic"`	`"surface"`
`size`	`"1" \| "2" \| "3"`	`"2"`
`columns`	`Responsive<"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| string>`	`repeat(auto-fit, minmax(160px, 1fr))`
`gap`	`Responsive<"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| string>`	`4`

Item

An item in the group that can be checked.

Examples

Size

Use the size prop to control the size.

 <Flex align="center" gap="3">
  <RadioCards.Root size="1">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root size="2">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root size="3">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>
</Flex>

Variant

Use the variant prop to control the visual style.

 <Flex direction="column" gap="3" maxWidth="200px">
  <RadioCards.Root variant="surface">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root variant="classic">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>
</Flex>

Columns

Use the columns prop to control the number of columns.

 <Flex direction="column" gap="3">
  <RadioCards.Root variant="surface" columns="2">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
    <RadioCards.Item value="2">16-core CPU</RadioCards.Item>
    <RadioCards.Item value="3">32-core CPU</RadioCards.Item>
    <RadioCards.Item value="4">64-core CPU</RadioCards.Item>
    <RadioCards.Item value="5">128-core CPU</RadioCards.Item>
  </RadioCards.Root>
</Flex>

Color

Use the color prop to assign a specific color.

 <Flex direction="column" gap="3" maxWidth="200px">
  <RadioCards.Root defaultValue="1" color="purple">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root defaultValue="1" color="gray">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>
</Flex>

High-contrast

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

 <Grid columns="2" gap="3" display="inline-grid">
  <RadioCards.Root defaultValue="1" color="purple">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root defaultValue="1" color="purple" highContrast>
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root defaultValue="1" color="gray">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root defaultValue="1" color="gray" highContrast>
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>
</Grid>

Disabled

 <Flex direction="column" gap="4" maxWidth="450px">
  <RadioCards.Root columns="2" defaultValue="2">
    <RadioCards.Item value="1">Off</RadioCards.Item>
    <RadioCards.Item value="2">On</RadioCards.Item>
  </RadioCards.Root>

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