# Choice card A radio or a check set as a large plate carrying a name, a sentence and a price. The plate is a big key on a skirt with a small check key in its corner; the chosen one goes down below the panel and its corner key latches. Under it is the real radio or checkbox, so a group is a native radio group and posts with the form. Kit part · Free · https://tactileui.dev/parts/choice-card - Element: `` - Needs: `kit.css` only, no script ([how to install the kit](https://tactileui.dev/docs/installation#the-kit)) - Categories: Cards & panels, Checkboxes, Radio groups - Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED - Volumes: Tactile, Quiet ## Variants ### One of three · radios ```html

Plan

SoloOne person, three projects.£0 free for everTeamShared projects for up to ten people.£12 a seat, monthlyScaleUnlimited people and a named contact.£48 a seat, monthly

``` ### Any number · checks ```html

Add-ons

Priority supportA reply within the hour.£20 a monthTen more seatsFor a busier team.£90 a month

``` ### A column · --stack ```html

Billing

MonthlyCancel whenever you like.£12 a seatYearlyTwo months free.£120 a seat

``` ### Without a price ```html

Delivery

CourierNext working day.CollectFrom the Porto studio.

``` ### Disabled ```html

Plan

ScaleAsk your administrator.£48 a seatTeamWhere you are now.£12 a seat

Plan

Team Shared projects for up to ten people. £12 a seat, monthly …

``` The demo on the page: ```html ``` ## Usage notes Press a plan: its plate goes down and the key in its corner latches. Arrow keys move through the plans as they do through any radio group. The add-ons are checks, so any number may be down. The line under the cards says what the form would post. ## Accessibility - Each card is a native radio or checkbox inside its label, so the name read out is the label’s whole text, “Team, Shared projects for up to ten people, £12 a seat, monthly, radio button, 2 of 3”, with the group’s legend before it. - The chosen card is told three ways that are not colour: it sits lower, its corner key is latched with a dot or a tick, and the browser says “checked”. Nothing here lights a hue. - The focus ring goes round the whole plate when its input has the focus, 2px, offset so the skirt does not hide it, and it is as visible on the pressed card as on the others. - A group of radios gets the browser’s own arrow keys and one tab stop; a set of checks has a tab stop to each, as any checkboxes do. - On a phone each plate is at least 64px tall and spans the width of its column, the grid never scrolls sideways and the press needs no hover. ## How it’s built It is the kit’s key drawn large: the same cap, the same skirt (three pixels, as a large key has) and the same pressed shadow, so the plate goes down below the panel exactly as a key does and follows every finish and both volumes. The corner key is the check key drawn small, driven by the input’s own state with `~` instead of a script. The input is stretched over the plate with zero opacity, which is why a press, a label, a focus and the arrow keys all stay the browser’s. ## Rules Let people pick a plan, a size or an add-on by pressing a whole plate that says what it is and what it costs, with no script. The full rules are in `choice-card.rules.md` in the brain, which ships with the Kit. ## Related parts - [Radio](https://tactileui.dev/parts/radio): One choice from a short list in a form: small round keys in a fieldset, the chosen one pressed with a printed dot. - [Check](https://tactileui.dev/parts/check): An option in a form: a small square key that presses below the plate when chosen, with a tick printed on it. - [Key](https://tactileui.dev/parts/key): Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed. - [Segmented control](https://tactileui.dev/parts/segmented): A row of keys in a tray with one pressed down: pick a view, a range or a mode and it applies at once. It is the kit’s selector without the lamps, with sizes, a full-width row and icon segments.