One answer row for a question screen: a radio (Single) or a checkbox (Multi) drawn as a full-width 56px bordered row with the indicator at the end.
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
Default, code
<RadioGroup label="What brings you here?" defaultValue="grow">
<ChoiceRow value="grow" icon={TrendingUp} description="Reach more people each week">Grow my audience</ChoiceRow>
<ChoiceRow value="sell" icon={Sparkles} description="Take payments for my work">Sell what I make</ChoiceRow>
<ChoiceRow value="fun" icon={Heart}>Just for fun</ChoiceRow>
</RadioGroup>Multi, code
<CheckboxGroup label="Which topics interest you?" defaultValue={['design']}>
<ChoiceRow mode="multi" value="design">Design</ChoiceRow>
<ChoiceRow mode="multi" value="code" description="Front end and native">Code</ChoiceRow>
<ChoiceRow mode="multi" value="writing">Writing</ChoiceRow>
<ChoiceRow mode="multi" value="video" isDisabled>Video (coming soon)</ChoiceRow>
</CheckboxGroup>The 28 design tokens ChoiceRow reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
| Token | Value now | CSS variable |
|---|---|---|
| checkbox.bg | … | --sd-checkbox-bg |
| checkbox.bg-checked | … | --sd-checkbox-bg-checked |
| checkbox.border | … | --sd-checkbox-border |
| checkbox.border-width | … | --sd-checkbox-border-width |
| checkbox.mark | … | --sd-checkbox-mark |
| checkbox.radius | … | --sd-checkbox-radius |
| color.bg.brand-subtle | … | --sd-color-bg-brand-subtle |
| color.bg.brand-subtle-hover | … | --sd-color-bg-brand-subtle-hover |
| color.bg.canvas | … | --sd-color-bg-canvas |
| color.bg.muted | … | --sd-color-bg-muted |
| color.bg.subtle | … | --sd-color-bg-subtle |
| color.border.brand | … | --sd-color-border-brand |
| color.border.control | … | --sd-color-border-control |
| color.border.subtle | … | --sd-color-border-subtle |
| color.icon.brand | … | --sd-color-icon-brand |
| color.icon.default | … | --sd-color-icon-default |
| color.text.default | … | --sd-color-text-default |
| color.text.disabled | … | --sd-color-text-disabled |
| color.text.secondary | … | --sd-color-text-secondary |
| control.indicator | … | --sd-control-indicator |
| motion.duration.fast | … | --sd-motion-duration-fast |
| motion.easing.standard | … | --sd-motion-easing-standard |
| radius.full | … | --sd-radius-full |
| shape.radius-surface | … | --sd-shape-radius-surface |
| spacing.gap.md | … | --sd-spacing-gap-md |
| spacing.gap.sm | … | --sd-spacing-gap-sm |
| spacing.inset.md | … | --sd-spacing-inset-md |
| spacing.inset.sm | … | --sd-spacing-inset-sm |
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/choice-rowThen import it
import { ChoiceRow } from "@/components/ui/choice-row"| Prop | Type | What it does |
|---|---|---|
mode | 'single' | 'multi'Default 'single' | single (default): a radio, inside a RadioGroup. multi: a checkbox, inside a CheckboxGroup. |
valuerequired | string | This answer's value in its group. |
childrenrequired | ReactNode | The answer, short ("Grow my audience"). |
description | string | One line under the answer, read with it (part of its name). |
icon | LucideIcon | A leading icon. Decorative. |
isDisabled | boolean | |
className | string |
Screen readers announce "Grow my audience, Reach more people each week, radio button, not checked, 1 of 3".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5.
Rows stay 56px tall: density changes spacing only.
| axe-core (WCAG A, AA, AAA and best practice) | 60 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 205 text runs: 0 below 7:1, lowest 9.8:1 |
| Target size | 32 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 18 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 3 of 3, Firefox 3 of 3, WebKit 3 of 3 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab enters the group on the selected row |
| ArrowDown | Down Arrow moves to the next row and selects it |
| ArrowUp | Up Arrow moves back |
The Figma component is ChoiceRow, with Mode (Single, Multi); Selected (False, True); State (Default, Pressed, Focus, Disabled). The Figma library isn’t published yet.
Figma to code: Mode → mode (Single = "single", Multi = "multi"); Selected (False, True = RadioGroup value|CheckboxGroup value (the group value holds this row's value)); State (Default, Pressed, Focus, Disabled = isDisabled); Label → children; Description → description when Show description; Icon → icon when Show icon.