Choice Card

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/choice-card

Usage

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

Also exported: ChoiceCardGroup.

Examples

Delivery speed

The delivery step of a homeware checkout.

Onboarding goal

A training app asking for the main goal.

Interest tiles

A podcast app's onboarding.

Subscription plans

A meditation app's paywall.

API reference

ChoiceCard

Prop Type Default
title* string

Primary label.

 —
value string

Value reported to the group. Required inside a ChoiceCardGroup.

 —
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.

 false
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 Default
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 Default
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 —