OptionCard

Picking one option where the choice needs an explanation. The whole card is clickable, and the selected option is marked by an accent outline.

When to use it

A setting that is not “yes/no” but a decision with consequences — pricing by weight versus pricing by machine time. Both are legitimate; they differ in what follows from them.
An option that comes with an explanatory sentence. That sentence is not extra help, it is half of the choice — and it does not fit in a dropdown.
Two to four options side by side. The cards are built to be compared at a glance, not paged through.
A decision made once and then kept. The explanation on the option is what the person inheriting the setup reads half a year later.

Turning a single feature on or off. That is a switch, not two cards reading “On” and “Off” — cards turn one state into two.
A long list of equivalent values with nothing to explain — country, currency, material. Without a descriptive sentence the card adds nothing a dropdown could not do, and takes several times the space.
Selecting more than one option. Inside is a grouped radio input, so the options exclude each other; multi-select calls for checkboxes.
A choice that triggers an action. The card only changes a value — a button that makes something happen looks different and belongs elsewhere.

name: string — The group name — all options of one choice share it, just like a radio group.
value: string — The value of this option. It comes back through onChange.
checked: boolean — Is it selected? Controlled from outside — the caller's state picks the card.
onChange: (value: string) => void — Called with the selected option's value, not with an event.
title: ReactNode — The option's name. Keep it short — the explanation belongs in the description.
description: ReactNode — One sentence: what the choice means. Not what the button does.
disabled: boolean — An unavailable option. Dims the card and locks the input inside.
testId: string — A test hook on the card root.