# ChoiceCard

> A choice that needs more than a word: a plan, a way to import, where to start. Each card is the label of a native radio or checkbox, so the arrow keys, one Tab stop and forms come from the browser. The chosen card takes the strong brand border and a check that draws itself in. An option that is off says why. Server safe without onValueChange.

Section: Forms. Docs: https://entrepta.vercel.app/docs/components/choice-card

## Install

```bash
npx @entrepta/cli@latest add choice-card
```

Files: `primitives/choice-card.tsx`, `content/diamond.tsx`, `lib/icon.tsx`, `primitives/card.tsx`, `primitives/icon-tile.tsx`, `primitives/field.tsx`.
npm packages: `@phosphor-icons/react`, `class-variance-authority`.
Comes with: `diamond`, `icon-lib`, `card`, `icon-tile`, `field`.

## Usage

```tsx
import { ChoiceCard } from "@/components/entrepta/choice-card"

<ChoiceCard
  legend="Plan"
  options={[
    { value: "free", title: "Free", description: "One account" },
    { value: "pro", title: "Pro", description: "Every account", icon: RocketLaunchIcon, badge: <Badge>$4</Badge> },
    { value: "team", title: "Team", disabled: "Coming in October" },
  ]}
  value={plan}
  onValueChange={setPlan}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `options` | `{ value, title, description?, icon?, badge?, disabled? }[]` | - | disabled as text says why |
| `legend` | `ReactNode` | - | The question; hideLegend keeps it for screen readers |
| `type` | `"radio" \| "checkbox"` | "radio" | One, or several |
| `value, defaultValue, onValueChange` | `string \| string[]` | - | A string for radio, an array for checkbox |
| `columns` | `1 \| 2 \| 3` | 2 | From 640px; one below |