Questionnaire

npx shadcn@latest add https://brutallab.facilito.dev/r/questionnaire.json

'use client';

import { useState } from 'react';
import { Questionnaire } from '@/components/ui/questionnaire';

export default function Demo() {
  const [complete, setComplete] = useState(false);
  return (
    <div className="grid w-full max-w-lg gap-5">
      <Questionnaire
        questions={[
          {
            id: 'experience',
            title: 'How often do you build interfaces?',
            options: [
              { value: 'weekly', label: 'Every week' },
              { value: 'monthly', label: 'A few times a month' },
            ],
          },
          {
            id: 'focus',
            title: 'What would you like to practice?',
            options: [
              { value: 'forms', label: 'Forms' },
              { value: 'navigation', label: 'Navigation' },
            ],
          },
        ]}
        onComplete={() => setComplete(true)}
      />
      <output>
        {complete
          ? 'Thanks. Your demo answers were accepted locally.'
          : 'Choose one answer per question.'}
      </output>
    </div>
  );
}