All components (204)

Option card

Choice · OptionCard

What it is and when to use it

An option of RadioGroup drawn as a card: for choosing ONE among several when each needs to be shown (a theme, a voice engine, a plan), not just named. Inside it is still a native radio, so the keyboard is the group's.

When to use it

A few exclusive options (two to six) where a swatch, an icon or a description helps to decide.
media for the area on top (a color swatch, a thumbnail, an icon) and description for the sentence below.
Inside a RadioGroup, the cards are laid out in a grid that adapts to the width.

When not to

Options that are explained with one word: RadioOption, in a row or in a column.
A choice among a few that fits in a bar: SegmentedGroup.
Choosing several at once: ToggleChip or Checkbox.
Many options: Select.

Keyboard: Tab enters the group once, on the chosen card (or the first one if none is). The arrow keys change card and wrap around at the end; a disabled card is skipped. There is no need to press Enter: choosing is moving.

Accessibility: each card is an <input type="radio"> with its title as the name and the description as the description (it is not part of the name). The swatch is decorative (aria-hidden). The chosen one is seen by its shape — a thick border and a check mark — and not only by color.

Fine-tuning: CSS variables --amset-option-card-*: -min (minimum width of each card in the grid, 9rem by default), -padding, -gap, -radius, -border, -background, -selected (the color of the chosen one) and -media (minimum height of the top area).

What it looks like

Theme

LightDarkLike the system

Applies on all your devices.

<RadioGroup label="Theme" defaultValue="oscuro">
  <OptionCard value="claro" description="White background, for working in daylight">Light</OptionCard>
  <OptionCard value="oscuro" description="Less light at night">Dark</OptionCard>
</RadioGroup>

Props

Import it with import { OptionCard } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	The title of the card: it is its name for the screen reader.
`value`required	`string`	The key of the option: what reaches the group's `onChange` and travels in the form.
`aria-describedby`	`string`	—
`aria-label`	`string`	—
`className`	`string`	Own CSS classes for the card.
`description`	`string`	Secondary text under the title. It is read as a description, not as part of the name.
`disabled`	`boolean`	—
`media`	`ReactNode`	What goes above the title and is not text: a colour swatch, an icon, a thumbnail. It is decorative (`aria-hidden`): the name comes from the title.
`onPress`	`(event: ChoicePressEvent) => void`	Called when it is pressed, saying what it was pressed with.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: