# Radio Cards

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

```jsx
<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](#api-reference)

This component inherits props from the [Radio Group primitive](/primitives/docs/components/radio-group) and supports [common margin props](/themes/docs/overview/layout#margin-props).

### [Root](#root)

| Prop           | Type                            | Default                                  |
| -------------- | ------------------------------- | ---------------------------------------- |
| `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](#item)

An item in the group that can be checked.

## [Examples](#examples)

### [Size](#size)

Use the `size` prop to control the size.

```jsx
<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](#variant)

Use the `variant` prop to control the visual style.

```jsx
<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](#color)

Use the `color` prop to assign a specific [color](/themes/docs/theme/color).

```jsx
<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](#high-contrast)

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

```jsx
<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](#disabled)

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

<!--$-->

<!--/$-->