# Choice tiles A group of radios or checks drawn as tiles - a package, a plan, a way to pay - the chosen one the only thing in color. ## Examples `label class="choice"` wraps the input and its content; the input covers the tile unseen, so a click anywhere on it chooses, the arrow keys move between radios as always, and the focus ring goes round the tile. A group is a `fieldset` with its `legend`, the tiles laid out by a grid. ```html

Top up by

500 THBAbout a month 1,500 THBA quarter, 5% off 6,000 THBA year, 15% off

``` ### With a logo `choice-media` at the top of a tile is a white banner for a logo, white in both themes, so a logo on a transparent ground reads the same. ```html

Pay with

PromptPayAny bank app CardAny card

``` ### A choice that destroys `choice-danger` draws a tile in the danger tone when chosen - the way out of a set of ways to keep. A colour beside the words: the tile's words say what it does. ```html

When you leave

Pause the accountBack any time Delete the accountWith every booking, for good

``` ## Keyboard and accessibility - The input is the control and the tile's words its label: a screen reader says "1,500 THB A quarter, 5% off, radio button, checked, 2 of 3". - The keys are the input's own: `Tab` into the group, the arrows between radios, `Space` on a check. - The chosen tile is told by its border and tint, and by an outline in forced colors. ## Tokens From [`css/components/choice.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/choice.css). It declares `--redz-choice-tone`, `--redz-choice-subtle` on its root, never on rows or items. It reads the theme's `--redz-primary`, `--redz-primary-subtle`, `--redz-space-4`, `--redz-space-12`, `--redz-space-16`, `--redz-border-strong`, `--redz-radius-12`, `--redz-bg`, `--redz-text-muted`, `--redz-danger`, `--redz-danger-subtle`, `--redz-color`, `--redz-focus`, `--redz-space-8`, `--redz-border`.