4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T12bf,"use client" import * as React from "react" import { Button } from "@/components/ui/button" import { Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle, } from "@/components/ui/questionnaire" const items = [ { name: "role", required: true, prompt: "What best describes your work?", description: "We'll tailor the examples you see first.", choices: [ { value: "design", label: "Design", description: "Interfaces, systems and prototypes.", }, { value: "engineering", label: "Engineering", description: "Shipping and maintaining product code.", }, { value: "both", label: "A bit of both", description: "Design engineering, the best kind.", }, ], }, { name: "interests", multiple: true, required: true, prompt: "Which components do you reach for most?", description: "Pick as many as you like.", choices: [ { value: "forms", label: "Forms and inputs" }, { value: "overlays", label: "Dialogs and sheets" }, { value: "navigation", label: "Menus and navigation" }, { value: "data", label: "Tables and data" }, ], }, { name: "source", prompt: "How did you find HextaUI?", description: "Optional. Skip it if you don't remember.", choices: [ { value: "x", label: "X / Twitter" }, { value: "github", label: "GitHub" }, { value: "friend", label: "A friend" }, ], input: { label: "Somewhere else", placeholder: "Somewhere else…" }, }, ] as const export function QuestionnaireDemo() { const [answers, setAnswers] = React.useState<[string, string][] | null>(null) if (answers) { return (

Thanks, that helps a lot.

Here's what the form sent:

{name} {value}

) } return (

{ event.preventDefault() const data = new FormData(event.currentTarget) setAnswers( Array.from(data.entries(), ([name, value]) => [name, String(value)]) ) }} > {items.map((item) => ( {item.prompt} {item.description} {item.choices.map((choice) => ( {choice.label} {"description" in choice ? ( {choice.description} ) : null} ))} {"input" in item ? ( ) : null} ))}

) } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4f",null,{"namespace":"@hextaui","registryDependencies":["https://hextaui.com/r/button.json","https://hextaui.com/r/questionnaire.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"components/examples/questionnaire/demo.tsx","content":"$51","type":"registry:example"}],"className":"h-[70svh] min-h-80"}]]}]