Questionnaire

Guide a user through a structured set of questions.

View component source ↗

Preview

Example

A minimal example to get started.

Installation

Install this component and its dependencies in a project initialized with shadcn.

pnpm dlx shadcn@latest add https://ui.hyunjoon.net/r/questionnaire.json

Usage

This is the basic example. Use the Code tab above for the selected example. Adjust import aliases to match your project.

import { useState } from "react";

import {
  Questionnaire,
  QuestionnaireItem,
  QuestionnaireTitle,
  QuestionnaireDescription,
  QuestionnaireChoices,
  QuestionnaireChoice,
  QuestionnaireSubmit,
  QuestionnaireActions,
} from "@/components/ui/questionnaire";

export default function Example() {
  const [submitted, setSubmitted] = useState(false);
  return (
    <div className="w-full max-w-sm">
      <Questionnaire
        items={[{ name: "role", choices: [{ value: "design" }, { value: "engineering" }] }]}
        onSubmit={(event) => {
          event.preventDefault();
          setSubmitted(true);
        }}
      >
        <QuestionnaireItem name="role">
          <QuestionnaireTitle>What do you work on?</QuestionnaireTitle>
          <QuestionnaireDescription>Select your primary focus.</QuestionnaireDescription>
          <QuestionnaireChoices>
            <QuestionnaireChoice value="design">Design</QuestionnaireChoice>
            <QuestionnaireChoice value="engineering">Engineering</QuestionnaireChoice>
          </QuestionnaireChoices>
        </QuestionnaireItem>
        <QuestionnaireActions>
          <QuestionnaireSubmit>Finish</QuestionnaireSubmit>
        </QuestionnaireActions>
      </Questionnaire>
      {submitted && (
        <p role="status" className="mt-3 text-sm">
          Thank you for your answer.
        </p>
      )}
    </div>
  );
}

API reference

Derived from the installed component types. Native DOM props are also supported where applicable. A dash means no explicit default is documented. Some props depend on the selected mode.

Questionnaire

Questionnaire properties
Prop	Type	Default	Description
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`ref`	React.Ref<HTMLFormElement> \| undefined React.Ref<HTMLFormElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLFormElement> \| undefined React.FocusEventHandler<HTMLFormElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLFormElement> \| undefined React.FocusEventHandler<HTMLFormElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLFormElement, Element> \| undefined React.ChangeEventHandler<HTMLFormElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLFormElement> \| undefined React.KeyboardEventHandler<HTMLFormElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLFormElement> \| undefined React.MouseEventHandler<HTMLFormElement> \| undefined	`—`	Called when the element is activated.
`name`	string \| undefined string \| undefined	`—`	Field name used in form data.
`target`	string \| undefined string \| undefined	`—`	Browsing context in which the link opens.
`defaultItem`	string \| undefined string \| undefined	`—`	Question displayed initially.
`item`	string \| undefined string \| undefined	`—`	Active question name when controlled.
`items`	readonly QuestionnaireItemDefinition[] \| undefined readonly QuestionnaireItemDefinition[] \| undefined	`—`	Available options or item definitions.
`onItemChange`	((item: string) => void) \| undefined ((item: string) => void) \| undefined	`—`	Called when the active question changes.
`shortcuts`	QuestionnaireShortcutMode \| undefined QuestionnaireShortcutMode \| undefined	`—`	Keyboard shortcut scheme for questionnaire choices.

QuestionnaireActions

QuestionnaireActions properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLDivElement> \| undefined React.Ref<HTMLDivElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLDivElement> \| undefined React.FocusEventHandler<HTMLDivElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLDivElement> \| undefined React.FocusEventHandler<HTMLDivElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLDivElement, Element> \| undefined React.ChangeEventHandler<HTMLDivElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLDivElement> \| undefined React.KeyboardEventHandler<HTMLDivElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLDivElement> \| undefined React.MouseEventHandler<HTMLDivElement> \| undefined	`—`	Called when the element is activated.

QuestionnaireChoice

QuestionnaireChoice properties
Prop	Type	Default	Description
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`ref`	React.Ref<HTMLLabelElement> \| undefined React.Ref<HTMLLabelElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLLabelElement> \| undefined React.FocusEventHandler<HTMLLabelElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLLabelElement> \| undefined React.FocusEventHandler<HTMLLabelElement> \| undefined	`—`	Called when the control loses focus.
`onKeyDown`	React.KeyboardEventHandler<HTMLLabelElement> \| undefined React.KeyboardEventHandler<HTMLLabelElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLLabelElement> \| undefined React.MouseEventHandler<HTMLLabelElement> \| undefined	`—`	Called when the element is activated.
`render`	RenderProp<QuestionnaireChoiceState> \| undefined RenderProp<QuestionnaireChoiceState> \| undefined	`—`	Element or render function used to compose a custom root element.
`htmlFor`	string \| undefined string \| undefined	`—`	ID of the associated form control.
`checked`	boolean \| undefined boolean \| undefined	`—`	Current checked state when controlled.
`disabled`	boolean \| undefined boolean \| undefined	`—`	Prevents user interaction.
`onChange`	React.ChangeEventHandler<HTMLInputElement, Element> \| undefined React.ChangeEventHandler<HTMLInputElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`value`Required	string string	`—`	The current value when controlled by the application.

QuestionnaireChoiceDescription

QuestionnaireChoiceDescription properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLSpanElement> \| undefined React.Ref<HTMLSpanElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLSpanElement> \| undefined React.FocusEventHandler<HTMLSpanElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLSpanElement> \| undefined React.FocusEventHandler<HTMLSpanElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLSpanElement, Element> \| undefined React.ChangeEventHandler<HTMLSpanElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLSpanElement> \| undefined React.KeyboardEventHandler<HTMLSpanElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLSpanElement> \| undefined React.MouseEventHandler<HTMLSpanElement> \| undefined	`—`	Called when the element is activated.

QuestionnaireChoices

QuestionnaireChoices properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLDivElement> \| undefined React.Ref<HTMLDivElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLDivElement> \| undefined React.FocusEventHandler<HTMLDivElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLDivElement> \| undefined React.FocusEventHandler<HTMLDivElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLDivElement, Element> \| undefined React.ChangeEventHandler<HTMLDivElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLDivElement> \| undefined React.KeyboardEventHandler<HTMLDivElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLDivElement> \| undefined React.MouseEventHandler<HTMLDivElement> \| undefined	`—`	Called when the element is activated.
`render`	RenderProp<QuestionnaireChoicesState> \| undefined RenderProp<QuestionnaireChoicesState> \| undefined	`—`	Element or render function used to compose a custom root element.

QuestionnaireDescription

QuestionnaireDescription properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLParagraphElement> \| undefined React.Ref<HTMLParagraphElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLParagraphElement> \| undefined React.FocusEventHandler<HTMLParagraphElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLParagraphElement> \| undefined React.FocusEventHandler<HTMLParagraphElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLParagraphElement, Element> \| undefined React.ChangeEventHandler<HTMLParagraphElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLParagraphElement> \| undefined React.KeyboardEventHandler<HTMLParagraphElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLParagraphElement> \| undefined React.MouseEventHandler<HTMLParagraphElement> \| undefined	`—`	Called when the element is activated.
`render`	RenderProp<RenderState> \| undefined RenderProp<RenderState> \| undefined	`—`	Element or render function used to compose a custom root element.

QuestionnaireError

QuestionnaireError properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLParagraphElement> \| undefined React.Ref<HTMLParagraphElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLParagraphElement> \| undefined React.FocusEventHandler<HTMLParagraphElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLParagraphElement> \| undefined React.FocusEventHandler<HTMLParagraphElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLParagraphElement, Element> \| undefined React.ChangeEventHandler<HTMLParagraphElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLParagraphElement> \| undefined React.KeyboardEventHandler<HTMLParagraphElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLParagraphElement> \| undefined React.MouseEventHandler<HTMLParagraphElement> \| undefined	`—`	Called when the element is activated.
`render`	RenderProp<Pick<QuestionnaireItemState, "invalid">> \| undefined RenderProp<Pick<QuestionnaireItemState, "invalid">> \| undefined	`—`	Element or render function used to compose a custom root element.

QuestionnaireInput

QuestionnaireInput properties
Prop	Type	Default	Description
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`ref`	React.Ref<HTMLInputElement> \| undefined React.Ref<HTMLInputElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLInputElement> \| undefined React.FocusEventHandler<HTMLInputElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLInputElement> \| undefined React.FocusEventHandler<HTMLInputElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLInputElement, HTMLInputElement> \| undefined React.ChangeEventHandler<HTMLInputElement, HTMLInputElement> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLInputElement> \| undefined React.KeyboardEventHandler<HTMLInputElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLInputElement> \| undefined React.MouseEventHandler<HTMLInputElement> \| undefined	`—`	Called when the element is activated.
`disabled`	boolean \| undefined boolean \| undefined	`—`	Prevents user interaction.
`value`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	The current value when controlled by the application.
`render`	RenderProp<QuestionnaireInputState> \| undefined RenderProp<QuestionnaireInputState> \| undefined	`—`	Element or render function used to compose a custom root element.
`alt`	string \| undefined string \| undefined	`—`	Accessible text alternative for the image.
`src`	string \| undefined string \| undefined	`—`	URL of the displayed resource.
`multiple`	boolean \| undefined boolean \| undefined	`—`	Allows more than one value to be selected.
`max`	string \| number \| undefined string \| number \| undefined	`—`	Maximum allowed value.
`min`	string \| number \| undefined string \| number \| undefined	`—`	Minimum allowed value.
`step`	string \| number \| undefined string \| number \| undefined	`—`	Increment between valid values.
`required`	boolean \| undefined boolean \| undefined	`—`	Whether the user must provide a value before form submission.
`checked`	boolean \| undefined boolean \| undefined	`—`	Current checked state when controlled.
`maxLength`	number \| undefined number \| undefined	`—`	Maximum number of input characters.
`placeholder`	string \| undefined string \| undefined	`—`	Hint shown when the control has no value.
`type`	QuestionnaireInputType \| undefined QuestionnaireInputType \| undefined	`—`	The native input or button behavior.

QuestionnaireItem

QuestionnaireItem properties
Prop	Type	Default	Description
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`ref`	React.Ref<HTMLFieldSetElement> \| undefined React.Ref<HTMLFieldSetElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLFieldSetElement> \| undefined React.FocusEventHandler<HTMLFieldSetElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLFieldSetElement> \| undefined React.FocusEventHandler<HTMLFieldSetElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLFieldSetElement, Element> \| undefined React.ChangeEventHandler<HTMLFieldSetElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLFieldSetElement> \| undefined React.KeyboardEventHandler<HTMLFieldSetElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLFieldSetElement> \| undefined React.MouseEventHandler<HTMLFieldSetElement> \| undefined	`—`	Called when the element is activated.
`disabled`	boolean \| undefined boolean \| undefined	`—`	Prevents user interaction.
`invalid`	boolean \| undefined boolean \| undefined	`—`	Marks this item or value as invalid.
`name`Required	string string	`—`	Field name used in form data.
`multiple`	boolean \| undefined boolean \| undefined	`—`	Allows more than one value to be selected.
`onStatusChange`	((status: QuestionnaireItemStatus) => void) \| undefined ((status: QuestionnaireItemStatus) => void) \| undefined	`—`	Called when the answer status changes.
`required`	boolean \| undefined boolean \| undefined	`—`	Whether the user must provide a value before form submission.

QuestionnaireNext

QuestionnaireNext properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLButtonElement> \| undefined React.Ref<HTMLButtonElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`disabled`	boolean \| undefined boolean \| undefined	`—`	Prevents user interaction.
`name`	string \| undefined string \| undefined	`—`	Field name used in form data.
`type`	"button" \| "submit" \| "reset" \| undefined "button" \| "submit" \| "reset" \| undefined	`—`	The native input or button behavior.
`value`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	The current value when controlled by the application.
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLButtonElement> \| undefined React.FocusEventHandler<HTMLButtonElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLButtonElement> \| undefined React.FocusEventHandler<HTMLButtonElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLButtonElement, Element> \| undefined React.ChangeEventHandler<HTMLButtonElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLButtonElement> \| undefined React.KeyboardEventHandler<HTMLButtonElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLButtonElement> \| undefined React.MouseEventHandler<HTMLButtonElement> \| undefined	`—`	Called when the element is activated.
`render`	RenderProp<QuestionnaireNavigationState> \| undefined RenderProp<QuestionnaireNavigationState> \| undefined	`—`	Element or render function used to compose a custom root element.
`variant`	"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null \| undefined "link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null \| undefined	`"default"`	Visual treatment of the component.
`size`	"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| null \| undef… "default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| null \| undefined	`"default"`	Visual size of the component.

QuestionnairePrevious

QuestionnairePrevious properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLButtonElement> \| undefined React.Ref<HTMLButtonElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`disabled`	boolean \| undefined boolean \| undefined	`—`	Prevents user interaction.
`name`	string \| undefined string \| undefined	`—`	Field name used in form data.
`type`	"button" \| "submit" \| "reset" \| undefined "button" \| "submit" \| "reset" \| undefined	`—`	The native input or button behavior.
`value`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	The current value when controlled by the application.
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLButtonElement> \| undefined React.FocusEventHandler<HTMLButtonElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLButtonElement> \| undefined React.FocusEventHandler<HTMLButtonElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLButtonElement, Element> \| undefined React.ChangeEventHandler<HTMLButtonElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLButtonElement> \| undefined React.KeyboardEventHandler<HTMLButtonElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLButtonElement> \| undefined React.MouseEventHandler<HTMLButtonElement> \| undefined	`—`	Called when the element is activated.
`render`	RenderProp<QuestionnaireNavigationState> \| undefined RenderProp<QuestionnaireNavigationState> \| undefined	`—`	Element or render function used to compose a custom root element.
`variant`	"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null \| undefined "link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null \| undefined	`"outline"`	Visual treatment of the component.
`size`	"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| null \| undef… "default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| null \| undefined	`"default"`	Visual size of the component.

QuestionnaireProgress

QuestionnaireProgress properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLDivElement> \| undefined React.Ref<HTMLDivElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLDivElement> \| undefined React.FocusEventHandler<HTMLDivElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLDivElement> \| undefined React.FocusEventHandler<HTMLDivElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLDivElement, Element> \| undefined React.ChangeEventHandler<HTMLDivElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLDivElement> \| undefined React.KeyboardEventHandler<HTMLDivElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLDivElement> \| undefined React.MouseEventHandler<HTMLDivElement> \| undefined	`—`	Called when the element is activated.
`render`	RenderProp<QuestionnaireRootState> \| undefined RenderProp<QuestionnaireRootState> \| undefined	`—`	Element or render function used to compose a custom root element.

QuestionnaireSkip

QuestionnaireSkip properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLButtonElement> \| undefined React.Ref<HTMLButtonElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`disabled`	boolean \| undefined boolean \| undefined	`—`	Prevents user interaction.
`name`	string \| undefined string \| undefined	`—`	Field name used in form data.
`type`	"button" \| "submit" \| "reset" \| undefined "button" \| "submit" \| "reset" \| undefined	`—`	The native input or button behavior.
`value`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	The current value when controlled by the application.
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLButtonElement> \| undefined React.FocusEventHandler<HTMLButtonElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLButtonElement> \| undefined React.FocusEventHandler<HTMLButtonElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLButtonElement, Element> \| undefined React.ChangeEventHandler<HTMLButtonElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLButtonElement> \| undefined React.KeyboardEventHandler<HTMLButtonElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLButtonElement> \| undefined React.MouseEventHandler<HTMLButtonElement> \| undefined	`—`	Called when the element is activated.
`render`	RenderProp<QuestionnaireNavigationState> \| undefined RenderProp<QuestionnaireNavigationState> \| undefined	`—`	Element or render function used to compose a custom root element.
`variant`	"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null \| undefined "link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null \| undefined	`"outline"`	Visual treatment of the component.
`size`	"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| null \| undef… "default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| null \| undefined	`"default"`	Visual size of the component.

QuestionnaireSubmit

QuestionnaireSubmit properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLButtonElement> \| undefined React.Ref<HTMLButtonElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`disabled`	boolean \| undefined boolean \| undefined	`—`	Prevents user interaction.
`name`	string \| undefined string \| undefined	`—`	Field name used in form data.
`type`	"button" \| "submit" \| "reset" \| undefined "button" \| "submit" \| "reset" \| undefined	`—`	The native input or button behavior.
`value`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	The current value when controlled by the application.
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLButtonElement> \| undefined React.FocusEventHandler<HTMLButtonElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLButtonElement> \| undefined React.FocusEventHandler<HTMLButtonElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLButtonElement, Element> \| undefined React.ChangeEventHandler<HTMLButtonElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLButtonElement> \| undefined React.KeyboardEventHandler<HTMLButtonElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLButtonElement> \| undefined React.MouseEventHandler<HTMLButtonElement> \| undefined	`—`	Called when the element is activated.
`render`	RenderProp<QuestionnaireNavigationState> \| undefined RenderProp<QuestionnaireNavigationState> \| undefined	`—`	Element or render function used to compose a custom root element.
`variant`	"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null \| undefined "link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null \| undefined	`"default"`	Visual treatment of the component.
`size`	"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| null \| undef… "default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| null \| undefined	`"default"`	Visual size of the component.

QuestionnaireTitle

QuestionnaireTitle properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLLegendElement> \| undefined React.Ref<HTMLLegendElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLLegendElement> \| undefined React.FocusEventHandler<HTMLLegendElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLLegendElement> \| undefined React.FocusEventHandler<HTMLLegendElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLLegendElement, Element> \| undefined React.ChangeEventHandler<HTMLLegendElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLLegendElement> \| undefined React.KeyboardEventHandler<HTMLLegendElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLLegendElement> \| undefined React.MouseEventHandler<HTMLLegendElement> \| undefined	`—`	Called when the element is activated.
`render`	RenderProp<RenderState> \| undefined RenderProp<RenderState> \| undefined	`—`	Element or render function used to compose a custom root element.

Usage notes

Declare stable item names and choice values. Handle submission in your application and keep required questions clearly identified.