Questionnaire
FormsComposes labeled questions, single-choice answers, and visible completion progress.
Try it
Add to your project
npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/questionnaire.jsonThe command includes the component’s shared dependencies. Your project keeps editable source files.
Include the complete example
This example also composes checkbox, select, label, typography. Install its parts together:
npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/checkbox.json https://luv-jeri.github.io/cojeev-ui/r/questionnaire.json https://luv-jeri.github.io/cojeev-ui/r/select.json https://luv-jeri.github.io/cojeev-ui/r/label.json https://luv-jeri.github.io/cojeev-ui/r/typography.jsonUsing questionnaire
The default organic selector stays close to a circle, with subtle asymmetry and cursor-responsive contour motion.
Choose organic, circle, rounded, pebble, leaf or flower; pink, blue, olive and yellow tones are available.
Group each question in QuestionnaireQuestion and place value-based QuestionnaireOption parts inside QuestionnaireOptions.
Store answers through onValueChange and update QuestionnaireProgress from your own completion logic.
selectorSize, selectorIndicator and showSelectorIndicator configure the selection mark; labels retain a minimum44px row target.
API
Compose the exported parts below. The prop types are read from the React source during the registry build.
Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.
QuestionnaireProps
Accepts the native or primitive props declared by its exported TypeScript type.
QuestionnaireProgressProps
| Prop | Type | Required |
|---|---|---|
value | number | Yes |
total | number | Yes |
QuestionnaireQuestionProps
Accepts the native or primitive props declared by its exported TypeScript type.
QuestionnaireLabelProps
Accepts the native or primitive props declared by its exported TypeScript type.
QuestionnaireOptionsProps
| Prop | Type | Required |
|---|---|---|
name | string | No |
selectorShape | SelectorShape | No |
selectorTone | SelectorTone | No |
selectorSize | SelectorSize | No |
selectorIndicator | SelectorIndicator | No |
showSelectorIndicator | boolean | No |
value | string | No |
defaultValue | string | No |
onValueChange | (value: string) => void | No |
QuestionnaireOptionProps
| Prop | Type | Required |
|---|---|---|
value | string | Yes |
disabled | boolean | No |
selectorShape | SelectorShape | No |
selectorTone | SelectorTone | No |
selectorSize | SelectorSize | No |
selectorIndicator | SelectorIndicator | No |
showSelectorIndicator | boolean | No |
inputProps | Omit<React.ComponentProps<"input">, "value" | "type"> | No |
QuestionnaireOptionBodyProps
Accepts the native or primitive props declared by its exported TypeScript type.
QuestionnaireWeekdaysProps
Accepts the native or primitive props declared by its exported TypeScript type.
QuestionnaireWeekdayProps
Accepts the native or primitive props declared by its exported TypeScript type.
Accessibility
Use a legend for each fieldset and label its radio group with aria-labelledby or aria-label.
Keep option labels descriptive and pass required or descriptive attributes through inputProps when needed.
States and appearance
For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.
Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.