# Questionnaire

Sequential questions with structured answers.

## How to use it

Define a unique id per question and handle onComplete. Supports single, multiple and freeform; set optional for non-required questions.



## Import


```tsx
import { Questionnaire } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
function Example() {
 const [done, setDone] = useState(false);
 return done ? <Alert><AlertTitle>Thank you!</AlertTitle><AlertDescription>Answers received in this demo.</AlertDescription></Alert> : <Questionnaire questions={[{id:"role",title:"What are you creating?",type:"single",options:[{label:"A website",value:"web"},{label:"An app",value:"app"}]},{id:"idea",title:"Tell us about your idea",type:"freeform",optional:true}]} onComplete={() => setDone(true)} />;
}
```


## API: Questionnaire


```typescript
declare function Questionnaire({ className, defaultAnswers, onComplete, questions, ...props }: QuestionnaireProps): React.JSX.Element | null;
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| questions | QuestionnaireQuestion[] | Yes | Questionnaire questions with unique identifiers. |
| aria-label | string | No | Accessible name of the control. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultAnswers | Record<string, QuestionnaireAnswer> | No | Initial answers by identifier. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onComplete | ((answers: Record<string, QuestionnaireAnswer>) => void) | No | Callback when input or an operation is complete. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

Source: https://kivora.pro/docs/componentes/questionnaire