# Choice Cards
> Cards to compare and pick, on real radio buttons or checkboxes, with a title, a line and an optional price. The picked card's ink border draws itself around it from the corner while a check draws in its mark. Pure CSS.
Forms · choice cards, radio cards, plan picker, delivery options, checkbox, form · HTML and CSS only · no dependencies · updated 2026-11-04
Demo: https://kodza.dev/components/choice-cards/
Source on GitHub: https://github.com/kodza-dev/kodza/tree/main/components/choice-cards
## Files
The code below, served as files: byte for byte what the Kodza site copies (the CSS includes its theme guard).
- [`kodza-choice-cards.css`](https://kodza.dev/registry/choice-cards/kodza-choice-cards.css) · 13.1 KB
- [`kodza-choice-cards.html`](https://kodza.dev/registry/choice-cards/kodza-choice-cards.html) · 3.8 KB · the markup, to adapt and paste into your page
**Can you run shell commands? Download the CSS, don't retype it.** Retyping costs thousands of tokens and can drop or change lines of the CSS. Put the files where your stack expects them (Use it says where: change the `-o` paths):
```bash
curl -fsSL --create-dirs -o kodza/kodza-choice-cards.css https://kodza.dev/registry/choice-cards/kodza-choice-cards.css
```
Then load the file from your page as Use it shows, instead of pasting the content. The HTML is the part you adapt (text, links, modifiers): paste it from the Code section. Copy the CSS from the Code section only if you can't run commands, exactly as it is. (Windows PowerShell: `curl.exe`.)
## API
- Root: `.kodza-choice-cards`
- Variables (set them on the root element itself: it declares its own defaults):
- `--kz-choice-cards-bg: #ffffff`
- `--kz-choice-cards-fg: #0a0a0a`
- `--kz-choice-cards-muted: rgba(10, 10, 10, 0.58)`
- `--kz-choice-cards-border: rgba(10, 10, 10, 0.1)`
- `--kz-choice-cards-border-hover: rgba(10, 10, 10, 0.28)`
- `--kz-choice-cards-ink: #0a0a0a`
- `--kz-choice-cards-on-ink: #ffffff`
- `--kz-choice-cards-width: 720px` — the whole group, at most
- `--kz-choice-cards-min: 190px` — a card never gets narrower: below it, cards stack
- `--kz-choice-cards-gap: 12px`
## Keyboard
What each key does, by where the focus is. Keep it working when you adapt the HTML: same elements, same classes.
- On a card with a round mark (focus in `.kodza-choice-cards__input[type="radio"]`):
- `ArrowRight` / `ArrowDown`: Picks the next card, round and round
- `ArrowLeft` / `ArrowUp`: Picks the previous card, round and round
- On a card with a square mark (focus in `.kodza-choice-cards__input[type="checkbox"]`):
- `Space`: Picks the card or lets it go
## Dark mode
The values Kodza uses on a dark background (`#0a0a0a`). For a page that follows the system theme, add them after the component's CSS:
```css
@media (prefers-color-scheme: dark) {
.kodza-choice-cards {
--kz-choice-cards-bg: #161616;
--kz-choice-cards-fg: #f2f2f0;
--kz-choice-cards-muted: rgba(242, 242, 240, 0.62);
--kz-choice-cards-border: rgba(255, 255, 255, 0.12);
--kz-choice-cards-border-hover: rgba(255, 255, 255, 0.3);
--kz-choice-cards-ink: #f2f2f0;
--kz-choice-cards-on-ink: #0a0a0a;
}
}
```
A site with its own theme switch puts the same rules under its dark selector instead (`[data-theme="dark"] .kodza-choice-cards { … }`); a single dark section, under that section's class.
## Use it
### Plain HTML page
- CSS: `kodza/kodza-choice-cards.css` next to the page (the Files commands as they are), linked in ``: ``. Without a shell, paste it in a `