Forms

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.

view .md

Preview

Choose a plan

FreeOne account, a month of history.Pro$4/moEvery account and all of it.TeamShared budgets.Coming in October

Installation

terminal

bash

npx @entrepta/cli@latest add choice-card

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

choice-card.tsx

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