Kanshō/Choice card

Choice Card

Radio-style cards with a title, optional description, and radio indicator. Use when an option needs more explanation than a plain radio.

Included in the single kansho full pack. Components are not offered as separate installs.

Single select

Default density

With disabled option

Invalid group

Validation error

Choose a plan to continue.

Compact variation

Tighter padding for dense settings

Component documentation

Choice Card

components/ui/choice-card.tsx

Purpose

Presents radio choices as larger selectable cards.

Appropriate use

Use when a single choice benefits from a title and optional explanatory text.

Example

components/ui/choice-card.tsx has a representative live example in the "Single select" section on /components/choice-card.

States

Supports controlled or uncontrolled selection, disabled groups or cards, invalid state, and compact density.

API and props

ChoiceCardGroup accepts name, value, defaultValue, onValueChange, disabled, invalid, native div props, and ref; ChoiceCard accepts value, title, description, disabled, compact, and label props.

Dependencies

React and the Kansho cn utility.

Accessibility

Uses a radiogroup with native radio inputs, focus-visible card rings, aria-invalid, and a hidden decorative check icon.

Limitations

It supports one value per group only and does not provide multi-select behaviour.

Source

Source: components/ui/choice-card.tsx.

Full pack

components/ui/choice-card.tsx is documented at /components/choice-card and installs only through the single Kansho full pack; no individual component install is offered.