Questionnaire

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="questionnaire"/>;}

Multiple select

Multiple selection is the default. Each option is a full-row checkbox card, allowing more than one choice. Next advances, Previous returns with earlier choices preserved, and the step pills jump to another question. The last step uses Done and sends the collected answers through onComplete.

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="questionnaire" example="multiple"/>;}

Single select

Set select="single" on the questionnaire or an individual question. Rows become numbered choices and can be selected by pointer or digit key. The next step follows after advanceDelay, leaving time to see the selection. A previous answer remains highlighted when revisited. Other waits for typed text and submits with Enter.

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="questionnaire" example="single"/>;}

Answers and steps

Answers use question IDs as keys. Each answer contains selected option values in their declared order and the selected Other text. Control them with answers and onAnswersChange, and control navigation with step and onStepChange. The corresponding default props seed local state. onDismiss enables dismissal, and labels customizes button and Other copy.

'use client';
import {useState} from 'react';
import {Questionnaire} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){const[status,setStatus]=useState('');return <><Questionnaire questions={[{id:'theme',title:'Choose an appearance',options:[{value:'light',label:'Light'},{value:'dark',label:'Dark'}]}]} onComplete={answers=>setStatus(JSON.stringify(answers))}/><p role="status">{status}</p></>;}