# components/ChoiceCards (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/ChoiceCards.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/ChoiceCards.tsx).

## Components

### `ChoiceCards`

Component.

Renders a radio group of cards. The chosen card is raised, with an accent ring.

```ts
function ChoiceCards<T extends string>(props: ChoiceCardsProps<T>): Element
```

**Type parameters**

- `T` (`extends string`)

**Parameters**

- `props` (`ChoiceCardsProps<T>`): Component props.

**Returns** `Element`

**Props**

- `ariaLabel?` (`string`): Accessible name of the radio group.
- `className?` (`string`): Extra classes on the group.
- `columns?` (`1 | 2 | 3 | 4`, default `3`): Cards per row on wide screens. Narrow screens stack them.
- `numbered?` (`boolean`): Let the keys 1 to 9 pick the cards while the group has focus, and show the numbers while it has keyboard focus.
- `onChange` (`(value: T) => void`): Called with the value of the card picked by click or keyboard.
- `options` (`readonly ChoiceCardOption<T>[]`): The cards, in order.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `value` (`T | undefined`): The value of the chosen card. `undefined`: none is chosen yet.

Source: [ui/src/components/ChoiceCards.tsx:68](https://github.com/Tahul/zidane/blob/main/ui/src/components/ChoiceCards.tsx#L68)

## Interfaces

### `ChoiceCardOption`

Interface.

One card of a [`ChoiceCards`](https://zidane.si/docs/reference/ui-components-choice-cards.md#ChoiceCards) group.

```ts
interface ChoiceCardOption<T extends string>
```

**Type parameters**

- `T` (`extends string`)

**Properties**

- `badge?` (`ReactNode`): A short mark at the end of the title line, such as "recommended".
- `description?` (`ReactNode`): One or two lines under the title.
- `disabled?` (`boolean`): Grey the card out and skip it in keyboard navigation.
- `icon?` (`string`): Icon class (`i-ph-*`) before the title.
- `preview?` (`ReactNode`): Content above the title, such as a theme thumbnail or a small demo.
- `title` (`ReactNode`): The card's title.
- `value` (`T`): The value reported to `onChange` when the card is picked. Unique among the options.
- `visual?` (`ReactNode`): A visual before the title, such as a `BrandMark`. Takes the place of `icon`.

Source: [ui/src/components/ChoiceCards.tsx:14](https://github.com/Tahul/zidane/blob/main/ui/src/components/ChoiceCards.tsx#L14)

### `ChoiceCardsProps`

Interface.

Props for [`ChoiceCards`](https://zidane.si/docs/reference/ui-components-choice-cards.md#ChoiceCards).

```ts
interface ChoiceCardsProps<T extends string>
```

**Type parameters**

- `T` (`extends string`)

**Properties**

- `ariaLabel?` (`string`): Accessible name of the radio group.
- `className?` (`string`): Extra classes on the group.
- `columns?` (`1 | 2 | 3 | 4`, default `3`): Cards per row on wide screens. Narrow screens stack them.
- `numbered?` (`boolean`): Let the keys 1 to 9 pick the cards while the group has focus, and show the numbers while it has keyboard focus.
- `onChange` (`(value: T) => void`): Called with the value of the card picked by click or keyboard.
- `options` (`readonly ChoiceCardOption<T>[]`): The cards, in order.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `value` (`T | undefined`): The value of the chosen card. `undefined`: none is chosen yet.

Source: [ui/src/components/ChoiceCards.tsx:41](https://github.com/Tahul/zidane/blob/main/ui/src/components/ChoiceCards.tsx#L41)