Skip to content

ComponentsQuestionnaire

Components

Questionnaire

The AskUserQuestion card: single / multiple choice rows on the cds radio-card recipe, free text, shortcuts, and the answered receipt.

AskUserQuestion card

Choice rows: min 32px (36 with a 14/20 label), radius 8, field fill + 1px ring, hover ring border-strong, checked = accent-tinted fill + accent ring, focus = shadow-focus. Title 15/20 medium, description 14/20 secondary. Next / Submit are primary, Previous / Skip ghost; 44px tall on coarse pointers. Items slide in 20px over 300 ms.

Three questions (letters as shortcuts)

Light and dark

light
dark

Receipt

The answered summary (Code question receipt): 480 max, radius 8, 1px ring, rows 16×12 with 1px dividers.

QuestionnaireReceipt
Which framework should the kit target?
Nuxt
Which features do you need?
Dark mode, Compact density