Option card
Usage
A radio or checkbox wearing a full card, for choices that need a description and a price alongside the label — shipping methods, plans, payment options. Selection state is driven by CSS `:has(:checked)` rather than a JavaScript mirror, so the card and its control can never disagree.import { Optioncard } from '@summonware/ui';Best practices
DoUse `trailing` for the number that decides the choice — a price, a duration, a quota.
DoGive every card in a group the same `name`, exactly as with a plain radio.
Don'tUse option cards for more than about four choices. The vertical cost gets high fast.
Don'tMix `control="radio"` and `control="checkbox"` in one group — the selection rule stops being legible.
Anatomy
Control *The radio or checkbox, rendered at the leading edge.
Title *The option name.
DescriptionA supporting line beneath the title.
TrailingRight-aligned value — usually a price.
Examples
Common configurations, variations and states.Single choice
Radio cards with a price in the trailing slot — the checkout shipping picker.
Multiple choice
The same card with `control="checkbox"`, for add-ons where any combination is valid.