QuizChoice / QuizChoiceGroup

Purpose

The most common answer input — a list of selectable cards. Single-select by default (Radix RadioGroup underneath); pass multiple for a multi-select variant (Radix Checkbox underneath). Either way, selection is wired straight to the current step's answer — no value/onChange wiring needed.

Installation

pnpm dlx shadcn@latest add @quiz-ui/quiz-choice

Usage

<QuizChoiceGroup
  options={[
    { value: "cardio", label: "Cardio", description: "Running, cycling" },
    { value: "strength", label: "Strength training" },
  ]}
/>

// Multi-select — answer is stored as string[]
<QuizChoiceGroup multiple options={[
  { value: "mornings", label: "Mornings" },
  { value: "evenings", label: "Evenings" },
  { value: "weekends", label: "Weekends" },
]} />

Props

QuizChoiceGroup

Prop	Type	Default	Description
`options`	`QuizChoiceOption[]`	—	`{ value, label, description? }` for each card.
`multiple`	`boolean`	`false`	Allow more than one selection. Answer becomes `string[]` when true.
`className`	`string`	—	Merged onto the list wrapper.

QuizChoice

Exported separately for custom layouts (e.g. a grid instead of a list) — it's a single Radix RadioGroup.Item, styled. Takes value, label, description?, plus anything RadioGroupPrimitive.Item accepts.

Notes

With multiple, the answer is stored as string[]; without it, as a plain string. isStepAnswered (used by QuizNavigation to enable Next) treats an empty array or empty string as unanswered.