# Choice Card

Selectable cards for plans, goals, delivery speeds and interests, with single or multiple selection and an optional limit. Picks show a ring and check; going over the limit nudges back.

> Composed · Pro · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/choice-card
```

## Import

```tsx
import { ChoiceCard, ChoiceCardGroup } from "@/components/ui/choice-card/choice-card";
```

## Variants

- `delivery` — Delivery speed: `npx @lumioui/cli add pro/choice-card-delivery`
- `goals` — Onboarding goal: `npx @lumioui/cli add pro/choice-card-goals`
- `interests` — Interest tiles: `npx @lumioui/cli add pro/choice-card-interests`
- `plans` — Subscription plans: `npx @lumioui/cli add pro/choice-card-plans`

## Props

### ChoiceCard

| Prop | Type | Notes |
| --- | --- | --- |
| `value?` | `string` | Value reported to the group. Required inside a ChoiceCardGroup. |
| `title` | `string` | Primary label. |
| `description?` | `string` | Supporting line under the title. |
| `leading?` | `React.ReactNode` | Leading slot — icon disc, emoji-free illustration, logo. |
| `trailing?` | `React.ReactNode` | Trailing slot — price, ETA, badge. Sits before the indicator (row) or  top-right (tile). |
| `badge?` | `React.ReactNode` | Small node above the title in the row layout or under it in tiles —  e.g. a "Best value" Badge. |
| `checked?` | `boolean` | Standalone controlled state (ignored inside a group). |
| `defaultChecked?` | `boolean` | Standalone uncontrolled initial state. |
| `onCheckedChange?` | `(checked: boolean) => void` | Standalone change handler. |
| `indicator?` | `ChoiceCardIndicator` | Selection indicator. "auto" = radio in single groups, check in multiple  groups and standalone. Default: the group's, else "auto". |
| `layout?` | `ChoiceCardLayout` | "row" (default) full-width card, or "tile" for a 2-up grid. |
| `disabled?` | `boolean` | — |
| `children?` | `React.ReactNode` | Extra content below the description, shown only while selected  (e.g. plan details). |
| `className?` | `string` | — |

### ChoiceCardGroupSingle

| Prop | Type | Notes |
| --- | --- | --- |
| `type?` | `"single"` | One card at a time — radio semantics. |
| `value?` | `string` | Controlled selected value. |
| `defaultValue?` | `string` | Uncontrolled initial value. |
| `onValueChange?` | `(value: string) => void` | Fires with the picked value. |
| `deselectable?` | `boolean` | Allow tapping the selected card to clear it. Default false. |
| `max?` | `never` | — |

### ChoiceCardGroupMultiple

| Prop | Type | Notes |
| --- | --- | --- |
| `type` | `"multiple"` | Any number of cards — checkbox semantics. |
| `value?` | `string[]` | Controlled selected values. |
| `defaultValue?` | `string[]` | Uncontrolled initial values. |
| `onValueChange?` | `(value: string[]) => void` | Fires with the new selection. |
| `max?` | `number` | Selection cap — further picks nudge with a warning haptic. |
| `deselectable?` | `never` | — |

Source: https://lumioui.com/components/choice-card