Components

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

PropTypeDefault
asChild
boolean
No default value
size
Responsive<"1" | "2" | "3">
"2"
variant
"surface" | "classic"
"surface"
color
enum
No default value
highContrast
boolean
No default value
columns
Responsive<enum | string>
"repeat(auto-fit, minmax(160px, 1fr))"
gap
Responsive<enum | 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>

Color

Use the color prop to assign a specific color.

<Flex direction="column" gap="3" maxWidth="200px">
<RadioCards.Root defaultValue="1" color="indigo">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="cyan">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="orange">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="crimson">
<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="indigo">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="indigo" highContrast>
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="cyan">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="cyan" highContrast>
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="orange">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="orange" highContrast>
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="crimson">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="crimson" 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>