Components
QuizImageChoice
Visual, image-based single-select answer grid.
Purpose
For funnels where the answer is visual rather than text — style picks,
product previews. Same underlying Radix RadioGroup as QuizChoiceGroup,
laid out as an image grid instead of a card list.
Installation
pnpm dlx shadcn@latest add @quiz-ui/quiz-image-choiceUsage
<QuizImageChoice
columns={3}
options={[
{ value: "modern", label: "Modern", imageUrl: "/styles/modern.jpg" },
{ value: "rustic", label: "Rustic", imageUrl: "/styles/rustic.jpg" },
{ value: "minimal", label: "Minimal", imageUrl: "/styles/minimal.jpg" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
options | QuizImageChoiceOption[] | — | { value, label, imageUrl } for each tile. |
columns | 2 | 3 | 2 | Grid columns. |
className | string | — | Merged onto the grid wrapper. |
Notes
- Single-select only — there's no
multiplevariant of this component. If you need multi-select image tiles, composeQuizChoiceCheckbox-style markup yourself usinguseQuizAnswers()directly.