Choice Card

Import

import {
  RadioGroupCard,
  CheckboxCard,
} from "@mikenotthepope/substrateui"

Composition

RadioGroup
└── RadioGroupCard

CheckboxCard has no root of its own — a single one stands alone, and a set of them belongs in a Fieldset so the set has a name.

The card is the control

RadioGroupItem and Checkbox are 18px boxes that a caller pairs with a Label beside them, and the target is the box. Here the card itself carries role="radio" — it is what Radio.Root renders — so the whole row answers, description included, and the target is min-h-11: a 44px floor, which is WCAG 2.2's enhanced target size (SC 2.5.5) rather than the 24px minimum (SC 2.5.8). A one-line card measures 56px, because the padding and the line box exceed the floor. The hand-rolled rows this replaces measured 36px — enough for SC 2.5.8, short of SC 2.5.5 — so the card is a change of look, not a like-for-like port.

Because the control did not move, neither did the keyboard: the group is one tab stop, arrow keys move and select within it, and Spacetoggles a checkbox card. That is Base UI's, not ours.

Several answers

A submitted answer: readOnly

An answer somebody gave, which a reader should still be able to read: the same card with readOnly on the group. It keeps its role, its aria-checked and its place in the tab order, and gains aria-readonly, so a screen reader can still say which option was chosen. Nothing is dimmed. This is Base UI's own prop — the library adds only the refusal to grey it out.

A picture of a form: presentational

A staff preview of a questionnaire, or a published record waiting on answers, is not a form at all — nobody is being asked anything. A control there is the wrong accessibility object: a radiogroup nobody can answer is a tab stop that leads nowhere and a question announced to a reader who was not asked it. presentational is the same card with no role, no ARIA state and no tab stop, and no group needed around it. selected fills the mark, because there is no control to read it from.

It is still not disabled. A preview of a form is not a disabled form, and dimming it says something untrue about every option on the page.

Every mode comes off one recipe, so the picture and the control cannot drift apart. That is the pair this component exists to delete: the applications that hand-rolled this kept a test whose whole job was to assert two class strings stayed equal.

Two options is not a special case

A true/false question is a single-select whose two options the caller wrote, so it is an ordinary radio group and nothing here knows about booleans.

Disabled, for contrast

Naming

The label and the description both sit inside the element that carries the role, so the card points aria-labelledby at the label alone and aria-describedby at the description. The name is the option; the description describes it. Pass your own aria-label and it wins; pass your own aria-describedbyand it is appended to the card's.

The group still needs a name of its own — the question being asked. Put it on the RadioGroup as an aria-label, or in a Fieldset legend.

Selection is a fill, not a border

A picked card is bg-accent with a filled mark, rather than a border-primary edge. A fill changes the whole card at a glance, where a recoloured 2px edge is easy to miss.

API Reference