ChoiceCard

components/ui/choice-card.tsx

A card that asks one question and offers several answers, each carrying its own data. The figures are right-aligned in tabular numerals so they form a column the eye can run down, which is what makes the options comparable rather than merely listed. It is a real fieldset of native radios, so arrow keys move through the group and the selection reads as a dot, a border and a fill rather than a colour alone.

Delivery options

Money on the right in one column, the promise underneath each label. The recommended option is named, not just tinted.

Delivery

Choose how this order should reach you.

Subscription plans

The same component with completely different data. Nothing in it knows what a plan is; it only knows label, detail and figure.

Plan

Change takes effect on the next invoice.

Payout methods

Percentages rather than prices, and the tabular figures still line up so 1.50% and 0.75% can be compared at a glance.

How should we pay you?

Fees are taken from the amount transferred.

Compact rows

Options with no description collapse to a single line each, and the size column still aligns.

Log retention

Nothing chosen yet

Without a default the group starts empty, so the card never pretends the person has already decided.

Delivery

Choose how this order should reach you.

An option that cannot be picked

The unavailable option stays visible at readable contrast and says why, instead of vanishing or dimming without explanation.

Delivery

Long labels

Labels truncate on one line and descriptions clamp to two, both keeping their full text on hover, so the figure column can never be pushed out of place.

Data residency

Where the workspace and its backups are stored.

Nothing to choose from

Delivery

Choose how this order should reach you.

No delivery options reach this address. Try a different address or contact support.

Loading

The skeleton keeps the question visible and holds the height of three rows, so the card does not resize when the options arrive.

Delivery

Choose how this order should reach you.

Loading options