[{"data":1,"prerenderedAt":2413},["ShallowReactive",2],{"navigation":3,"$f1jvagmno7cfld":496,"\u002Fdocs\u002Fcomponents\u002Fquestionnaire":507,"surround-\u002Fdocs\u002Fcomponents\u002Fquestionnaire":2410},[4],{"title":5,"path":6,"stem":7,"children":8,"page":18},"Docs","\u002Fdocs","docs",[9,326,352,370,376,393,419,432],{"title":10,"path":11,"stem":12,"children":13,"new":18,"type":325},"Components","\u002Fdocs\u002Fcomponents","docs\u002F02.components",[14,20,24,28,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88,92,96,100,104,108,112,116,120,124,128,132,136,140,144,148,152,156,160,164,168,172,176,180,184,188,192,196,200,204,208,212,216,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289,293,297,301,305,309,313,317,321],{"title":15,"path":16,"stem":17,"new":18,"type":19,"children":-1},"Accordion","\u002Fdocs\u002Fcomponents\u002Faccordion","docs\u002Fcomponents\u002Faccordion",false,"component",{"title":21,"path":22,"stem":23,"new":18,"type":19,"children":-1},"Alert","\u002Fdocs\u002Fcomponents\u002Falert","docs\u002Fcomponents\u002Falert",{"title":25,"path":26,"stem":27,"new":18,"type":19,"children":-1},"Alert Dialog","\u002Fdocs\u002Fcomponents\u002Falert-dialog","docs\u002Fcomponents\u002Falert-dialog",{"title":29,"path":30,"stem":31,"new":18,"type":19,"children":-1},"Aspect Ratio","\u002Fdocs\u002Fcomponents\u002Faspect-ratio","docs\u002Fcomponents\u002Faspect-ratio",{"title":33,"path":34,"stem":35,"new":18,"type":19,"children":-1},"Attachment","\u002Fdocs\u002Fcomponents\u002Fattachment","docs\u002Fcomponents\u002Fattachment",{"title":37,"path":38,"stem":39,"new":18,"type":19,"children":-1},"Avatar","\u002Fdocs\u002Fcomponents\u002Favatar","docs\u002Fcomponents\u002Favatar",{"title":41,"path":42,"stem":43,"new":18,"type":19,"children":-1},"Badge","\u002Fdocs\u002Fcomponents\u002Fbadge","docs\u002Fcomponents\u002Fbadge",{"title":45,"path":46,"stem":47,"new":18,"type":19,"children":-1},"Breadcrumb","\u002Fdocs\u002Fcomponents\u002Fbreadcrumb","docs\u002Fcomponents\u002Fbreadcrumb",{"title":49,"path":50,"stem":51,"new":18,"type":19,"children":-1},"Bubble","\u002Fdocs\u002Fcomponents\u002Fbubble","docs\u002Fcomponents\u002Fbubble",{"title":53,"path":54,"stem":55,"new":18,"type":19,"children":-1},"Button","\u002Fdocs\u002Fcomponents\u002Fbutton","docs\u002Fcomponents\u002Fbutton",{"title":57,"path":58,"stem":59,"new":18,"type":19,"children":-1},"Button Group","\u002Fdocs\u002Fcomponents\u002Fbutton-group","docs\u002Fcomponents\u002Fbutton-group",{"title":61,"path":62,"stem":63,"new":18,"type":19,"children":-1},"Calendar","\u002Fdocs\u002Fcomponents\u002Fcalendar","docs\u002Fcomponents\u002Fcalendar",{"title":65,"path":66,"stem":67,"new":18,"type":19,"children":-1},"Card","\u002Fdocs\u002Fcomponents\u002Fcard","docs\u002Fcomponents\u002Fcard",{"title":69,"path":70,"stem":71,"new":18,"type":19,"children":-1},"Carousel","\u002Fdocs\u002Fcomponents\u002Fcarousel","docs\u002Fcomponents\u002Fcarousel",{"title":73,"path":74,"stem":75,"new":18,"type":19,"children":-1},"Chart","\u002Fdocs\u002Fcomponents\u002Fchart","docs\u002Fcomponents\u002Fchart",{"title":77,"path":78,"stem":79,"new":18,"type":19,"children":-1},"Checkbox","\u002Fdocs\u002Fcomponents\u002Fcheckbox","docs\u002Fcomponents\u002Fcheckbox",{"title":81,"path":82,"stem":83,"new":18,"type":19,"children":-1},"Collapsible","\u002Fdocs\u002Fcomponents\u002Fcollapsible","docs\u002Fcomponents\u002Fcollapsible",{"title":85,"path":86,"stem":87,"new":18,"type":19,"children":-1},"ColorPicker","\u002Fdocs\u002Fcomponents\u002Fcolor-picker","docs\u002Fcomponents\u002Fcolor-picker",{"title":89,"path":90,"stem":91,"new":18,"type":19,"children":-1},"Combobox","\u002Fdocs\u002Fcomponents\u002Fcombobox","docs\u002Fcomponents\u002Fcombobox",{"title":93,"path":94,"stem":95,"new":18,"type":19,"children":-1},"Command","\u002Fdocs\u002Fcomponents\u002Fcommand","docs\u002Fcomponents\u002Fcommand",{"title":97,"path":98,"stem":99,"new":18,"type":19,"children":-1},"Context Menu","\u002Fdocs\u002Fcomponents\u002Fcontext-menu","docs\u002Fcomponents\u002Fcontext-menu",{"title":101,"path":102,"stem":103,"new":18,"type":19,"children":-1},"Curves","\u002Fdocs\u002Fcomponents\u002Fcurves","docs\u002Fcomponents\u002Fcurves",{"title":105,"path":106,"stem":107,"new":18,"type":19,"children":-1},"Data Table","\u002Fdocs\u002Fcomponents\u002Fdata-table","docs\u002Fcomponents\u002Fdata-table",{"title":109,"path":110,"stem":111,"new":18,"type":19,"children":-1},"Date Picker","\u002Fdocs\u002Fcomponents\u002Fdate-picker","docs\u002Fcomponents\u002Fdate-picker",{"title":113,"path":114,"stem":115,"new":18,"type":19,"children":-1},"Dialog","\u002Fdocs\u002Fcomponents\u002Fdialog","docs\u002Fcomponents\u002Fdialog",{"title":117,"path":118,"stem":119,"new":18,"type":19,"children":-1},"Drawer","\u002Fdocs\u002Fcomponents\u002Fdrawer","docs\u002Fcomponents\u002Fdrawer",{"title":121,"path":122,"stem":123,"new":18,"type":19,"children":-1},"Dropdown Menu","\u002Fdocs\u002Fcomponents\u002Fdropdown-menu","docs\u002Fcomponents\u002Fdropdown-menu",{"title":125,"path":126,"stem":127,"new":18,"type":19,"children":-1},"Empty","\u002Fdocs\u002Fcomponents\u002Fempty","docs\u002Fcomponents\u002Fempty",{"title":129,"path":130,"stem":131,"new":18,"type":19,"children":-1},"Field","\u002Fdocs\u002Fcomponents\u002Ffield","docs\u002Fcomponents\u002Ffield",{"title":133,"path":134,"stem":135,"new":18,"type":19,"children":-1},"FontPicker","\u002Fdocs\u002Fcomponents\u002Ffont-picker","docs\u002Fcomponents\u002Ffont-picker",{"title":137,"path":138,"stem":139,"new":18,"type":19,"children":-1},"Form","\u002Fdocs\u002Fcomponents\u002Fform","docs\u002Fcomponents\u002Fform",{"title":141,"path":142,"stem":143,"new":18,"type":19,"children":-1},"Gradient Picker","\u002Fdocs\u002Fcomponents\u002Fgradient-picker","docs\u002Fcomponents\u002Fgradient-picker",{"title":145,"path":146,"stem":147,"new":18,"type":19,"children":-1},"Hover Card","\u002Fdocs\u002Fcomponents\u002Fhover-card","docs\u002Fcomponents\u002Fhover-card",{"title":149,"path":150,"stem":151,"new":18,"type":19,"children":-1},"Input","\u002Fdocs\u002Fcomponents\u002Finput","docs\u002Fcomponents\u002Finput",{"title":153,"path":154,"stem":155,"new":18,"type":19,"children":-1},"Input Group","\u002Fdocs\u002Fcomponents\u002Finput-group","docs\u002Fcomponents\u002Finput-group",{"title":157,"path":158,"stem":159,"new":18,"type":19,"children":-1},"Input OTP","\u002Fdocs\u002Fcomponents\u002Finput-otp","docs\u002Fcomponents\u002Finput-otp",{"title":161,"path":162,"stem":163,"new":18,"type":19,"children":-1},"Item","\u002Fdocs\u002Fcomponents\u002Fitem","docs\u002Fcomponents\u002Fitem",{"title":165,"path":166,"stem":167,"new":18,"type":19,"children":-1},"Kbd","\u002Fdocs\u002Fcomponents\u002Fkbd","docs\u002Fcomponents\u002Fkbd",{"title":169,"path":170,"stem":171,"new":18,"type":19,"children":-1},"Label","\u002Fdocs\u002Fcomponents\u002Flabel","docs\u002Fcomponents\u002Flabel",{"title":173,"path":174,"stem":175,"new":18,"type":19,"children":-1},"Marker","\u002Fdocs\u002Fcomponents\u002Fmarker","docs\u002Fcomponents\u002Fmarker",{"title":177,"path":178,"stem":179,"new":18,"type":19,"children":-1},"Menubar","\u002Fdocs\u002Fcomponents\u002Fmenubar","docs\u002Fcomponents\u002Fmenubar",{"title":181,"path":182,"stem":183,"new":18,"type":19,"children":-1},"Message","\u002Fdocs\u002Fcomponents\u002Fmessage","docs\u002Fcomponents\u002Fmessage",{"title":185,"path":186,"stem":187,"new":18,"type":19,"children":-1},"Message Scroller","\u002Fdocs\u002Fcomponents\u002Fmessage-scroller","docs\u002Fcomponents\u002Fmessage-scroller",{"title":189,"path":190,"stem":191,"new":18,"type":19,"children":-1},"Native Select","\u002Fdocs\u002Fcomponents\u002Fnative-select","docs\u002Fcomponents\u002Fnative-select",{"title":193,"path":194,"stem":195,"new":18,"type":19,"children":-1},"Navigation Menu","\u002Fdocs\u002Fcomponents\u002Fnavigation-menu","docs\u002Fcomponents\u002Fnavigation-menu",{"title":197,"path":198,"stem":199,"new":18,"type":19,"children":-1},"Number Field","\u002Fdocs\u002Fcomponents\u002Fnumber-field","docs\u002Fcomponents\u002Fnumber-field",{"title":201,"path":202,"stem":203,"new":18,"type":19,"children":-1},"Pagination","\u002Fdocs\u002Fcomponents\u002Fpagination","docs\u002Fcomponents\u002Fpagination",{"title":205,"path":206,"stem":207,"new":18,"type":19,"children":-1},"Pin Input","\u002Fdocs\u002Fcomponents\u002Fpin-input","docs\u002Fcomponents\u002Fpin-input",{"title":209,"path":210,"stem":211,"new":18,"type":19,"children":-1},"Popover","\u002Fdocs\u002Fcomponents\u002Fpopover","docs\u002Fcomponents\u002Fpopover",{"title":213,"path":214,"stem":215,"new":18,"type":19,"children":-1},"Progress","\u002Fdocs\u002Fcomponents\u002Fprogress","docs\u002Fcomponents\u002Fprogress",{"title":217,"path":218,"stem":219,"new":220,"type":19,"children":-1},"Questionnaire","\u002Fdocs\u002Fcomponents\u002Fquestionnaire","docs\u002Fcomponents\u002Fquestionnaire",true,{"title":222,"path":223,"stem":224,"new":18,"type":19,"children":-1},"Radio Group","\u002Fdocs\u002Fcomponents\u002Fradio-group","docs\u002Fcomponents\u002Fradio-group",{"title":226,"path":227,"stem":228,"new":18,"type":19,"children":-1},"Range Calendar","\u002Fdocs\u002Fcomponents\u002Frange-calendar","docs\u002Fcomponents\u002Frange-calendar",{"title":230,"path":231,"stem":232,"new":18,"type":19,"children":-1},"Resizable","\u002Fdocs\u002Fcomponents\u002Fresizable","docs\u002Fcomponents\u002Fresizable",{"title":234,"path":235,"stem":236,"new":18,"type":19,"children":-1},"Scroll Area","\u002Fdocs\u002Fcomponents\u002Fscroll-area","docs\u002Fcomponents\u002Fscroll-area",{"title":238,"path":239,"stem":240,"new":18,"type":19,"children":-1},"Select","\u002Fdocs\u002Fcomponents\u002Fselect","docs\u002Fcomponents\u002Fselect",{"title":242,"path":243,"stem":244,"new":18,"type":19,"children":-1},"Separator","\u002Fdocs\u002Fcomponents\u002Fseparator","docs\u002Fcomponents\u002Fseparator",{"title":246,"path":247,"stem":248,"new":18,"type":19,"children":-1},"Sheet","\u002Fdocs\u002Fcomponents\u002Fsheet","docs\u002Fcomponents\u002Fsheet",{"title":250,"path":251,"stem":252,"new":18,"type":19,"children":-1},"Sidebar","\u002Fdocs\u002Fcomponents\u002Fsidebar","docs\u002Fcomponents\u002Fsidebar",{"title":254,"path":255,"stem":256,"new":18,"type":19,"children":-1},"Skeleton","\u002Fdocs\u002Fcomponents\u002Fskeleton","docs\u002Fcomponents\u002Fskeleton",{"title":258,"path":259,"stem":260,"new":18,"type":19,"children":-1},"Slider","\u002Fdocs\u002Fcomponents\u002Fslider","docs\u002Fcomponents\u002Fslider",{"title":262,"path":263,"stem":264,"new":18,"type":19,"children":-1},"Sonner","\u002Fdocs\u002Fcomponents\u002Fsonner","docs\u002Fcomponents\u002Fsonner",{"title":266,"path":267,"stem":268,"new":18,"type":19,"children":-1},"Spinner","\u002Fdocs\u002Fcomponents\u002Fspinner","docs\u002Fcomponents\u002Fspinner",{"title":270,"path":271,"stem":272,"new":18,"type":19,"children":-1},"Stepper","\u002Fdocs\u002Fcomponents\u002Fstepper","docs\u002Fcomponents\u002Fstepper",{"title":274,"path":275,"stem":276,"new":18,"type":19,"children":-1},"Switch","\u002Fdocs\u002Fcomponents\u002Fswitch","docs\u002Fcomponents\u002Fswitch",{"title":278,"path":279,"stem":280,"new":18,"type":19,"children":-1},"Table","\u002Fdocs\u002Fcomponents\u002Ftable","docs\u002Fcomponents\u002Ftable",{"title":282,"path":283,"stem":284,"new":18,"type":19,"children":-1},"Tabs","\u002Fdocs\u002Fcomponents\u002Ftabs","docs\u002Fcomponents\u002Ftabs",{"title":286,"path":287,"stem":288,"new":18,"type":19,"children":-1},"Tags Input","\u002Fdocs\u002Fcomponents\u002Ftags-input","docs\u002Fcomponents\u002Ftags-input",{"title":290,"path":291,"stem":292,"new":18,"type":19,"children":-1},"Textarea","\u002Fdocs\u002Fcomponents\u002Ftextarea","docs\u002Fcomponents\u002Ftextarea",{"title":294,"path":295,"stem":296,"new":18,"type":19,"children":-1},"Toast","\u002Fdocs\u002Fcomponents\u002Ftoast","docs\u002Fcomponents\u002Ftoast",{"title":298,"path":299,"stem":300,"new":18,"type":19,"children":-1},"Toggle","\u002Fdocs\u002Fcomponents\u002Ftoggle","docs\u002Fcomponents\u002Ftoggle",{"title":302,"path":303,"stem":304,"new":18,"type":19,"children":-1},"Toggle Group","\u002Fdocs\u002Fcomponents\u002Ftoggle-group","docs\u002Fcomponents\u002Ftoggle-group",{"title":306,"path":307,"stem":308,"new":18,"type":19,"children":-1},"Tool Rail","\u002Fdocs\u002Fcomponents\u002Ftool-rail","docs\u002Fcomponents\u002Ftool-rail",{"title":310,"path":311,"stem":312,"new":18,"type":19,"children":-1},"Tooltip","\u002Fdocs\u002Fcomponents\u002Ftooltip","docs\u002Fcomponents\u002Ftooltip",{"title":314,"path":315,"stem":316,"new":18,"type":19,"children":-1},"Tree","\u002Fdocs\u002Fcomponents\u002Ftree","docs\u002Fcomponents\u002Ftree",{"title":318,"path":319,"stem":320,"new":18,"type":19,"children":-1},"Typography","\u002Fdocs\u002Fcomponents\u002Ftypography","docs\u002Fcomponents\u002Ftypography",{"title":322,"path":323,"stem":324,"new":18,"type":19,"children":-1},"Vector Pad","\u002Fdocs\u002Fcomponents\u002Fvector-pad","docs\u002Fcomponents\u002Fvector-pad","group",{"title":327,"path":328,"stem":329,"children":330,"new":18,"type":325},"Installation","\u002Fdocs\u002Finstallation","docs\u002F02.installation",[331,336,340,344,348],{"title":332,"path":333,"stem":334,"new":18,"type":335,"children":-1},"Vite","\u002Fdocs\u002Finstallation\u002Fvite","docs\u002Finstallation\u002F01.vite","page",{"title":337,"path":338,"stem":339,"new":18,"type":335,"children":-1},"Nuxt","\u002Fdocs\u002Finstallation\u002Fnuxt","docs\u002Finstallation\u002F02.nuxt",{"title":341,"path":342,"stem":343,"new":18,"type":335,"children":-1},"Astro","\u002Fdocs\u002Finstallation\u002Fastro","docs\u002Finstallation\u002F03.astro",{"title":345,"path":346,"stem":347,"new":18,"type":335,"children":-1},"Laravel","\u002Fdocs\u002Finstallation\u002Flaravel","docs\u002Finstallation\u002F04.laravel",{"title":349,"path":350,"stem":351,"new":18,"type":335,"children":-1},"Manual Installation","\u002Fdocs\u002Finstallation\u002Fmanual","docs\u002Finstallation\u002F05.manual",{"title":353,"path":354,"stem":355,"children":356,"new":18,"type":325},"Dark Mode","\u002Fdocs\u002Fdark-mode","docs\u002F05.dark-mode",[357,360,363,367],{"title":332,"path":358,"stem":359,"new":18,"type":335,"children":-1},"\u002Fdocs\u002Fdark-mode\u002Fvite","docs\u002Fdark-mode\u002F01.vite",{"title":337,"path":361,"stem":362,"new":18,"type":335,"children":-1},"\u002Fdocs\u002Fdark-mode\u002Fnuxt","docs\u002Fdark-mode\u002F02.nuxt",{"title":364,"path":365,"stem":366,"new":18,"type":335,"children":-1},"Vitepress","\u002Fdocs\u002Fdark-mode\u002Fvitepress","docs\u002Fdark-mode\u002F03.vitepress",{"title":341,"path":368,"stem":369,"new":18,"type":335,"children":-1},"\u002Fdocs\u002Fdark-mode\u002Fastro","docs\u002Fdark-mode\u002F04.astro",{"title":371,"path":372,"stem":373,"children":374,"new":18,"type":325},"Directory","\u002Fdocs\u002Fdirectory","docs\u002Fdirectory\u002Findex",[375],{"title":371,"path":372,"stem":373,"new":18,"type":335,"children":-1},{"title":377,"path":378,"stem":379,"children":380,"new":18,"type":325},"Forms","\u002Fdocs\u002Fforms","docs\u002Fforms",[381,385,389],{"title":382,"path":383,"stem":384,"new":18,"type":335,"children":-1},"VeeValidate","\u002Fdocs\u002Fforms\u002Fvee-validate","docs\u002Fforms\u002F01.vee-validate",{"title":386,"path":387,"stem":388,"new":18,"type":335,"children":-1},"TanStack Form","\u002Fdocs\u002Fforms\u002Ftanstack-form","docs\u002Fforms\u002F02.tanstack-form",{"title":390,"path":391,"stem":392,"new":18,"type":335,"children":-1},"Formisch","\u002Fdocs\u002Fforms\u002Fformisch","docs\u002Fforms\u002F03.formisch",{"title":394,"path":395,"stem":396,"children":397,"new":18,"type":325},"Registry","\u002Fdocs\u002Fregistry","docs\u002Fregistry\u002Findex",[398,399,403,407,411,415],{"title":394,"path":395,"stem":396,"new":18,"type":335,"children":-1},{"title":400,"path":401,"stem":402,"new":18,"type":335,"children":-1},"Examples","\u002Fdocs\u002Fregistry\u002Fexamples","docs\u002Fregistry\u002Fexamples",{"title":404,"path":405,"stem":406,"new":18,"type":335,"children":-1},"FAQ","\u002Fdocs\u002Fregistry\u002Ffaq","docs\u002Fregistry\u002Ffaq",{"title":408,"path":409,"stem":410,"new":18,"type":335,"children":-1},"Getting Started","\u002Fdocs\u002Fregistry\u002Fgetting-started","docs\u002Fregistry\u002Fgetting-started",{"title":412,"path":413,"stem":414,"new":18,"type":335,"children":-1},"registry-item.json","\u002Fdocs\u002Fregistry\u002Fregistry-item-json","docs\u002Fregistry\u002Fregistry-item-json",{"title":416,"path":417,"stem":418,"new":18,"type":335,"children":-1},"registry.json","\u002Fdocs\u002Fregistry\u002Fregistry-json","docs\u002Fregistry\u002Fregistry-json",{"title":420,"path":421,"stem":422,"children":423,"page":18,"type":325},"Utilities","\u002Fdocs\u002Futilities","docs\u002Futilities",[424,428],{"title":425,"path":426,"stem":427,"new":18,"type":335,"children":-1},"scroll-fade","\u002Fdocs\u002Futilities\u002Fscroll-fade","docs\u002Futilities\u002Fscroll-fade",{"title":429,"path":430,"stem":431,"new":18,"type":335,"children":-1},"shimmer","\u002Fdocs\u002Futilities\u002Fshimmer","docs\u002Futilities\u002Fshimmer",{"path":6,"stem":7,"title":433,"type":325,"children":434},"Get Started",[435,439,446,450,454,460,464,468,472,476,480,484,488,492],{"title":436,"path":437,"stem":438,"new":18,"type":335,"children":-1},"Introduction","\u002Fdocs\u002Fintroduction","docs\u002F01.introduction",{"title":327,"path":328,"stem":329,"children":440,"new":18,"type":325},[441,442,443,444,445],{"title":332,"path":333,"stem":334,"new":18,"type":335,"children":-1},{"title":337,"path":338,"stem":339,"new":18,"type":335,"children":-1},{"title":341,"path":342,"stem":343,"new":18,"type":335,"children":-1},{"title":345,"path":346,"stem":347,"new":18,"type":335,"children":-1},{"title":349,"path":350,"stem":351,"new":18,"type":335,"children":-1},{"title":447,"path":448,"stem":449,"new":18,"type":335,"children":-1},"components.json","\u002Fdocs\u002Fcomponents-json","docs\u002F03.components-json",{"title":451,"path":452,"stem":453,"new":18,"type":335,"children":-1},"Theming","\u002Fdocs\u002Ftheming","docs\u002F04.theming",{"title":353,"path":354,"stem":355,"children":455,"new":18,"type":325},[456,457,458,459],{"title":332,"path":358,"stem":359,"new":18,"type":335,"children":-1},{"title":337,"path":361,"stem":362,"new":18,"type":335,"children":-1},{"title":364,"path":365,"stem":366,"new":18,"type":335,"children":-1},{"title":341,"path":368,"stem":369,"new":18,"type":335,"children":-1},{"title":461,"path":462,"stem":463,"new":18,"type":335,"children":-1},"CLI","\u002Fdocs\u002Fcli","docs\u002F06.cli",{"title":465,"path":466,"stem":467,"new":18,"type":335,"children":-1},"JavaScript","\u002Fdocs\u002Fjavascript","docs\u002F07.javascript",{"title":469,"path":470,"stem":471,"new":18,"type":335,"children":-1},"RTL","\u002Fdocs\u002Frtl","docs\u002F08.rtl",{"title":473,"path":474,"stem":475,"new":18,"type":335,"children":-1},"Figma","\u002Fdocs\u002Ffigma","docs\u002F09.figma",{"title":477,"path":478,"stem":479,"new":18,"type":335,"children":-1},"Changelog","\u002Fdocs\u002Fchangelog","docs\u002F10.changelog",{"title":481,"path":482,"stem":483,"new":18,"type":335,"children":-1},"Legacy Docs","\u002Fdocs\u002Flegacy","docs\u002F11.legacy",{"title":485,"path":486,"stem":487,"new":18,"type":335,"children":-1},"Skills","\u002Fdocs\u002Fskills","docs\u002Fskills",{"title":489,"path":490,"stem":491,"new":18,"type":335,"children":-1},"Typeset","\u002Fdocs\u002Ftypeset","docs\u002Ftypeset",{"title":420,"path":421,"stem":422,"children":493,"page":18,"type":325},[494,495],{"title":425,"path":426,"stem":427,"new":18,"type":335,"children":-1},{"title":429,"path":430,"stem":431,"new":18,"type":335,"children":-1},{"repo":497},{"id":498,"name":499,"repo":500,"description":501,"createdAt":502,"updatedAt":503,"pushedAt":504,"stars":505,"watchers":505,"forks":505,"defaultBranch":506},1338772706,"hui-vue","Clientik\u002Fhui-vue",null,"2026-08-18T19:33:07Z","2026-08-25T22:44:28Z","2026-08-25T22:44:11Z",0,"main",{"id":508,"title":217,"body":509,"description":2404,"extension":2405,"links":501,"meta":2406,"navigation":220,"new":220,"path":218,"rawbody":2407,"seo":2408,"stem":219,"__hash__":2409},"content\u002Fdocs\u002Fcomponents\u002Fquestionnaire.md",{"type":510,"value":511,"toc":2364},"minimark",[512,520,524,581,585,594,598,601,609,630,634,641,645,674,677,682,689,694,698,705,709,713,720,725,729,742,747,751,754,758,764,770,774,780,784,788,791,795,799,802,806,810,817,821,825,846,850,854,860,864,867,874,880,884,917,920,923,928,932,1039,1043,1062,1078,1085,1089,1092,1095,1236,1302,1305,1320,1388,1391,1397,1513,1542,1545,1550,1614,1617,1622,1702,1705,1708,1771,1775,1778,1879,1921,1925,1928,1958,1961,1964,2068,2071,2074,2151,2154,2157,2220,2224,2241],[513,514],"component-preview",{"align":515,"className":516,"name":518,"previewClass":519},"end",[517],"style-neva","QuestionnaireDemo","min-h-[560px] p-4 sm:p-8",[521,522,327],"h2",{"id":523},"installation",[525,526,527,543,557],"code-tabs",{},[528,529,530,537],"tabs-list",{},[531,532,534],"tabs-trigger",{"value":533},"cli",[535,536,461],"p",{},[531,538,540],{"value":539},"manual",[535,541,542],{},"Manual",[544,545,546],"tabs-content",{"value":533},[547,548,554],"pre",{"className":549,"code":551,"language":552,"meta":553},[550],"language-bash","npx hui-kit@latest add questionnaire\n","bash","",[555,556,551],"code",{"__ignoreMap":553},[544,558,559],{"value":539},[560,561,562,576],"steps",{},[563,564,565],"step",{},[535,566,567,568,575],{},"Copy and paste the ",[569,570,574],"a",{"href":571,"rel":572},"https:\u002F\u002Fgithub.com\u002FClientik\u002Fhui-vue\u002Ftree\u002Fdev\u002Fapps\u002Fv4\u002Fregistry\u002Fbases\u002Freka\u002Fui\u002Fquestionnaire",[573],"nofollow","GitHub source code"," into your project.",[563,577,578],{},[535,579,580],{},"Update the import paths to match your project setup.",[521,582,584],{"id":583},"usage","Usage",[547,586,592],{"className":587,"code":589,"language":590,"meta":591},[588],"language-vue","\u003Cscript setup lang=\"ts\">\nimport {\n  Questionnaire,\n  QuestionnaireActions,\n  QuestionnaireChoice,\n  QuestionnaireChoices,\n  QuestionnaireDescription,\n  QuestionnaireError,\n  QuestionnaireItem,\n  QuestionnaireNext,\n  QuestionnairePrevious,\n  QuestionnaireProgress,\n  QuestionnaireSkip,\n  QuestionnaireSubmit,\n  QuestionnaireTitle,\n} from '@\u002Fcomponents\u002Fui\u002Fquestionnaire'\n\nconst items = [\n  { name: 'direction', required: true },\n  { name: 'timing', required: true },\n]\n\nfunction handleSubmit(event: Event) {\n  event.preventDefault()\n\n  const answers = new FormData(event.target as HTMLFormElement)\n  console.log(Object.fromEntries(answers))\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CQuestionnaire :items=\"items\" @submit=\"handleSubmit\">\n    \u003CQuestionnaireProgress \u002F>\n\n    \u003CQuestionnaireItem name=\"direction\" required>\n      \u003CQuestionnaireTitle>What should the agent build next?\u003C\u002FQuestionnaireTitle>\n      \u003CQuestionnaireDescription>Choose a direction.\u003C\u002FQuestionnaireDescription>\n      \u003CQuestionnaireChoices>\n        \u003CQuestionnaireChoice value=\"tool-calls\">Tool call timeline\u003C\u002FQuestionnaireChoice>\n        \u003CQuestionnaireChoice value=\"approvals\">Approval checkpoints\u003C\u002FQuestionnaireChoice>\n      \u003C\u002FQuestionnaireChoices>\n      \u003CQuestionnaireError \u002F>\n    \u003C\u002FQuestionnaireItem>\n\n    \u003CQuestionnaireItem name=\"timing\" required>\n      \u003CQuestionnaireTitle>When should work begin?\u003C\u002FQuestionnaireTitle>\n      \u003CQuestionnaireChoices>\n        \u003CQuestionnaireChoice value=\"now\">Start now\u003C\u002FQuestionnaireChoice>\n        \u003CQuestionnaireChoice value=\"backlog\">Add it to the backlog\u003C\u002FQuestionnaireChoice>\n      \u003C\u002FQuestionnaireChoices>\n      \u003CQuestionnaireError \u002F>\n    \u003C\u002FQuestionnaireItem>\n\n    \u003CQuestionnaireActions>\n      \u003CQuestionnairePrevious \u002F>\n      \u003CQuestionnaireSkip \u002F>\n      \u003CQuestionnaireNext \u002F>\n      \u003CQuestionnaireSubmit \u002F>\n    \u003C\u002FQuestionnaireActions>\n  \u003C\u002FQuestionnaire>\n\u003C\u002Ftemplate>\n","vue","showLineNumbers",[555,593,589],{"__ignoreMap":553},[521,595,597],{"id":596},"composition","Composition",[535,599,600],{},"Use the following composition to build a questionnaire:",[547,602,607],{"className":603,"code":605,"language":606,"meta":553},[604],"language-text","Questionnaire\n├── QuestionnaireProgress\n├── QuestionnaireItem\n│   ├── QuestionnaireTitle\n│   ├── QuestionnaireDescription\n│   ├── QuestionnaireChoices\n│   │   ├── QuestionnaireChoice\n│   │   │   └── QuestionnaireChoiceDescription\n│   │   └── QuestionnaireInput\n│   └── QuestionnaireError\n└── QuestionnaireActions\n    ├── QuestionnairePrevious\n    ├── QuestionnaireSkip\n    ├── QuestionnaireNext\n    └── QuestionnaireSubmit\n","text",[555,608,605],{"__ignoreMap":553},[535,610,611,613,614,617,618,621,622,625,626,629],{},[555,612,217],{}," renders a real ",[555,615,616],{},"\u003Cform>"," and every item renders a ",[555,619,620],{},"\u003Cfieldset>"," with a ",[555,623,624],{},"\u003Clegend>",", so answers submit with ",[555,627,628],{},"FormData"," and no extra state is needed.",[521,631,633],{"id":632},"server-rendering","Server Rendering",[535,635,636,637,640],{},"Pass ",[555,638,639],{},"items"," to server-render the active item, progress, actions, and answer shortcuts. Without it the questionnaire only learns its order once the items have mounted on the client.",[521,642,644],{"id":643},"features","Features",[646,647,648,652,655,658,664,671],"ul",{},[649,650,651],"li",{},"One question at a time, with progress, navigation, and validation handled for you",[649,653,654],{},"Single-choice, multiple-choice, freeform, and intentionally skipped answers",[649,656,657],{},"Keyboard shortcuts for choices, plus arrow key navigation between questions and answers",[649,659,660,661,663],{},"Declarative ",[555,662,639],{}," for item order, conditional items, and stable shortcut assignment",[649,665,666,667,670],{},"Controlled navigation with ",[555,668,669],{},"v-model:item"," for custom validation flows",[649,672,673],{},"Native form reset restores the answers you marked as defaults",[521,675,400],{"id":676},"examples",[678,679,681],"h3",{"id":680},"multiple-selection","Multiple Selection",[535,683,684,685,688],{},"Use ",[555,686,687],{},"multiple"," for an item that accepts more than one fixed answer.",[513,690],{"align":515,"className":691,"name":692,"previewClass":693},[517],"QuestionnaireMultipleDemo","min-h-[420px] p-4 sm:p-8",[678,695,697],{"id":696},"freeform-answer","Freeform Answer",[535,699,700,701,704],{},"Compose ",[555,702,703],{},"QuestionnaireInput"," with fixed choices when the user can provide another answer.",[513,706],{"align":515,"className":707,"name":708,"previewClass":693},[517],"QuestionnaireFreeformDemo",[678,710,712],{"id":711},"explicit-skip","Explicit Skip",[535,714,715,716,719],{},"Add ",[555,717,718],{},"QuestionnaireSkip"," when an optional item may be intentionally left unanswered.",[513,721],{"align":515,"className":722,"name":723,"previewClass":724},[517],"QuestionnaireSkipDemo","min-h-[520px] p-4 sm:p-8",[678,726,728],{"id":727},"shortcuts","Shortcuts",[535,730,731,732,734,735,738,739,741],{},"Assign a letter or number key to each answer with ",[555,733,727],{},". Declare ",[555,736,737],{},"choices"," on ",[555,740,639],{}," so the keys stay stable regardless of the render order.",[513,743],{"align":515,"className":744,"name":745,"previewClass":746},[517],"QuestionnaireShortcutsDemo","min-h-[480px] p-4 sm:p-8",[678,748,750],{"id":749},"custom-validation","Custom Validation",[535,752,753],{},"Combine controlled navigation with an external schema such as Zod to return to an invalid item and present its error.",[513,755],{"align":515,"className":756,"name":757,"previewClass":724},[517],"QuestionnaireValidationDemo",[535,759,760,763],{},[555,761,762],{},"QuestionnaireError"," falls back to a built-in message, so only render your own message when you have one:",[547,765,768],{"className":766,"code":767,"language":590,"meta":591},[588],"\u003CQuestionnaireError>\n  \u003Ctemplate v-if=\"errors.detail\">\n    {{ errors.detail }}\n  \u003C\u002Ftemplate>\n\u003C\u002FQuestionnaireError>\n",[555,769,767],{"__ignoreMap":553},[678,771,773],{"id":772},"controlled","Controlled",[535,775,776,777,779],{},"Control the active item from host state, such as returning to an invalid step. Use ",[555,778,669],{},".",[513,781],{"align":515,"className":782,"name":783,"previewClass":724},[517],"QuestionnaireControlledDemo",[678,785,787],{"id":786},"resume","Resume",[535,789,790],{},"Restore a saved active item and default answers, then reset changes back to that saved state.",[513,792],{"align":515,"className":793,"name":794,"previewClass":724},[517],"QuestionnaireResumeDemo",[678,796,798],{"id":797},"conditional-items","Conditional Items",[535,800,801],{},"Disable items that do not apply to the user's earlier answers.",[513,803],{"align":515,"className":804,"name":805,"previewClass":724},[517],"QuestionnaireConditionalDemo",[678,807,809],{"id":808},"navigation-state","Navigation State",[535,811,812,813,816],{},"Read item status to opt into disabled navigation and custom action styling. Listen to ",[555,814,815],{},"@update:status"," on the items you want to track.",[513,818],{"align":515,"className":819,"name":820,"previewClass":746},[517],"QuestionnaireNavigationStateDemo",[678,822,824],{"id":823},"custom-progress","Custom Progress",[535,826,827,828,831,832,835,836,835,839,842,843,779],{},"Use the progress slot state to build a custom progress indicator. ",[555,829,830],{},"QuestionnaireProgress"," exposes ",[555,833,834],{},"current",", ",[555,837,838],{},"total",[555,840,841],{},"first",", and ",[555,844,845],{},"last",[513,847],{"align":515,"className":848,"name":849,"previewClass":724},[517],"QuestionnaireProgressDemo",[678,851,853],{"id":852},"animated-items","Animated Items",[535,855,856,857,779],{},"Animate the active item while keeping progress and navigation stationary. The active item is marked with ",[555,858,859],{},"data-active",[513,861],{"align":515,"className":862,"name":863,"previewClass":724},[517],"QuestionnaireAnimatedDemo",[678,865,65],{"id":866},"card",[535,868,869,870,873],{},"Compose Questionnaire with Card slots while keeping the question title and description semantic. Use ",[555,871,872],{},"as-child"," to render a part as another component:",[547,875,878],{"className":876,"code":877,"language":590,"meta":591},[588],"\u003CQuestionnaireTitle as-child>\n  \u003CCardTitle>What should the agent work on?\u003C\u002FCardTitle>\n\u003C\u002FQuestionnaireTitle>\n",[555,879,877],{"__ignoreMap":553},[513,881],{"align":515,"className":882,"name":883,"previewClass":519},[517],"QuestionnaireCardDemo",[535,885,886,835,888,835,891,835,894,835,897,835,899,902,903,906,907,909,910,912,913,916],{},[555,887,830],{},[555,889,890],{},"QuestionnaireTitle",[555,892,893],{},"QuestionnaireDescription",[555,895,896],{},"QuestionnaireChoices",[555,898,762],{},[555,900,901],{},"QuestionnaireActions",", and the four navigation buttons all accept ",[555,904,905],{},"as"," and ",[555,908,872],{},". ",[555,911,872],{}," on the title replaces the ",[555,914,915],{},"legend"," that names the item, so the item labels itself with the rendered title instead. The title and description keep the id of the child they render.",[678,918,113],{"id":919},"dialog",[535,921,922],{},"Compose Questionnaire inside a Dialog while keeping cancellation and dismissal host-owned.",[513,924],{"align":515,"className":925,"name":926,"previewClass":927},[517],"QuestionnaireDialogDemo","min-h-[320px] p-4 sm:p-8",[521,929,931],{"id":930},"keyboard-navigation","Keyboard navigation",[933,934,935,948],"table",{},[936,937,938],"thead",{},[939,940,941,945],"tr",{},[942,943,944],"th",{},"Key",[942,946,947],{},"Description",[949,950,951,962,972,982,992,1002,1016],"tbody",{},[939,952,953,959],{},[954,955,956],"td",{},[555,957,958],{},"Arrow Down",[954,960,961],{},"Moves focus to the next answer.",[939,963,964,969],{},[954,965,966],{},[555,967,968],{},"Arrow Up",[954,970,971],{},"Moves focus to the previous answer.",[939,973,974,979],{},[954,975,976],{},[555,977,978],{},"Arrow Right",[954,980,981],{},"Moves to the next question once the current one is answered.",[939,983,984,989],{},[954,985,986],{},[555,987,988],{},"Arrow Left",[954,990,991],{},"Moves to the previous question.",[939,993,994,999],{},[954,995,996],{},[555,997,998],{},"Enter",[954,1000,1001],{},"Confirms the focused answer and moves on, or submits on the last question.",[939,1003,1004,1013],{},[954,1005,1006,1009,1010],{},[555,1007,1008],{},"Meta+Enter"," \u002F ",[555,1011,1012],{},"Ctrl+Enter",[954,1014,1015],{},"Confirms the active question from anywhere in the form.",[939,1017,1018,1033],{},[954,1019,1020,1023,1024,1009,1027,1023,1030],{},[555,1021,1022],{},"A"," – ",[555,1025,1026],{},"Z",[555,1028,1029],{},"1",[555,1031,1032],{},"9",[954,1034,1035,1036,1038],{},"Selects the matching choice when ",[555,1037,727],{}," is set.",[521,1040,1042],{"id":1041},"accessibility","Accessibility",[535,1044,1045,1048,1049,621,1052,1054,1055,1058,1059,779],{},[555,1046,1047],{},"QuestionnaireItem"," renders a ",[555,1050,1051],{},"fieldset",[555,1053,915],{},", so every question is announced with its answers. Descriptions and errors are associated with the item through ",[555,1056,1057],{},"aria-describedby",", and an invalid item exposes ",[555,1060,1061],{},"aria-invalid",[535,1063,1064,1066,1067,1070,1071,906,1074,1077],{},[555,1065,830],{}," renders a named ",[555,1068,1069],{},"progressbar"," that announces the current question. Inactive items are ",[555,1072,1073],{},"hidden",[555,1075,1076],{},"inert",", so they stay out of the tab order and the accessibility tree.",[535,1079,1080,1081,1084],{},"Navigation actions are real buttons. ",[555,1082,1083],{},"QuestionnaireSubmit"," submits the form, so a questionnaire keeps working with browser autofill and native form submission.",[521,1086,1088],{"id":1087},"api-reference","API Reference",[678,1090,217],{"id":1091},"questionnaire",[535,1093,1094],{},"The root form. Manages the active item, progress, validation, and keyboard navigation.",[933,1096,1097,1112],{},[936,1098,1099],{},[939,1100,1101,1104,1107,1110],{},[942,1102,1103],{},"Prop",[942,1105,1106],{},"Type",[942,1108,1109],{},"Default",[942,1111,947],{},[949,1113,1114,1141,1160,1179,1195,1219],{},[939,1115,1116,1120,1125,1128],{},[954,1117,1118],{},[555,1119,639],{},[954,1121,1122],{},[555,1123,1124],{},"QuestionnaireItemDefinition[]",[954,1126,1127],{},"-",[954,1129,1130,1131,835,1134,1137,1138,1140],{},"Declares item order, ",[555,1132,1133],{},"required",[555,1135,1136],{},"disabled",", and the ",[555,1139,737],{}," used for shortcuts.",[939,1142,1143,1148,1153,1155],{},[954,1144,1145],{},[555,1146,1147],{},"item",[954,1149,1150],{},[555,1151,1152],{},"string",[954,1154,1127],{},[954,1156,1157,1158,779],{},"The active item. Use with ",[555,1159,669],{},[939,1161,1162,1167,1171,1173],{},[954,1163,1164],{},[555,1165,1166],{},"defaultItem",[954,1168,1169],{},[555,1170,1152],{},[954,1172,1127],{},[954,1174,1175,1176,1178],{},"The item shown first. Ignored when ",[555,1177,1147],{}," is provided.",[939,1180,1181,1185,1190,1192],{},[954,1182,1183],{},[555,1184,727],{},[954,1186,1187],{},[555,1188,1189],{},"\"letters\" | \"numbers\"",[954,1191,1127],{},[954,1193,1194],{},"Assigns a keyboard shortcut to every choice.",[939,1196,1197,1202,1207,1212],{},[954,1198,1199],{},[555,1200,1201],{},"noValidate",[954,1203,1204],{},[555,1205,1206],{},"boolean",[954,1208,1209],{},[555,1210,1211],{},"true",[954,1213,1214,1215,1218],{},"Set to ",[555,1216,1217],{},"false"," to run native constraint validation on answered items.",[939,1220,1221,1226,1231,1233],{},[954,1222,1223],{},[555,1224,1225],{},"class",[954,1227,1228],{},[555,1229,1230],{},"HTMLAttributes[\"class\"]",[954,1232,1127],{},[954,1234,1235],{},"Additional classes to apply to the form.",[933,1237,1238,1250],{},[936,1239,1240],{},[939,1241,1242,1245,1248],{},[942,1243,1244],{},"Emit",[942,1246,1247],{},"Payload",[942,1249,947],{},[949,1251,1252,1266,1285],{},[939,1253,1254,1259,1263],{},[954,1255,1256],{},[555,1257,1258],{},"update:item",[954,1260,1261],{},[555,1262,1152],{},[954,1264,1265],{},"The active item changed.",[939,1267,1268,1273,1278],{},[954,1269,1270],{},[555,1271,1272],{},"submit",[954,1274,1275],{},[555,1276,1277],{},"Event",[954,1279,1280,1281,1284],{},"Every item is valid. Call ",[555,1282,1283],{},"event.preventDefault()"," to handle it yourself.",[939,1286,1287,1292,1296],{},[954,1288,1289],{},[555,1290,1291],{},"reset",[954,1293,1294],{},[555,1295,1277],{},[954,1297,1298,1299,1301],{},"The form was reset. Call ",[555,1300,1283],{}," to keep the answers.",[678,1303,830],{"id":1304},"questionnaireprogress",[535,1306,1307,1308,1310,1311,835,1313,835,1315,842,1317,1319],{},"A ",[555,1309,1069],{}," announcing the active question. Exposes ",[555,1312,834],{},[555,1314,838],{},[555,1316,841],{},[555,1318,845],{}," to its default slot.",[933,1321,1322,1334],{},[936,1323,1324],{},[939,1325,1326,1328,1330,1332],{},[942,1327,1103],{},[942,1329,1106],{},[942,1331,1109],{},[942,1333,947],{},[949,1335,1336,1351,1370],{},[939,1337,1338,1342,1346,1348],{},[954,1339,1340],{},[555,1341,1225],{},[954,1343,1344],{},[555,1345,1230],{},[954,1347,1127],{},[954,1349,1350],{},"Additional classes to apply to the progress bar.",[939,1352,1353,1357,1362,1367],{},[954,1354,1355],{},[555,1356,905],{},[954,1358,1359],{},[555,1360,1361],{},"AsTag | Component",[954,1363,1364],{},[555,1365,1366],{},"\"div\"",[954,1368,1369],{},"The element or component to render as.",[939,1371,1372,1377,1381,1385],{},[954,1373,1374],{},[555,1375,1376],{},"asChild",[954,1378,1379],{},[555,1380,1206],{},[954,1382,1383],{},[555,1384,1217],{},[954,1386,1387],{},"Render the child element instead.",[678,1389,1047],{"id":1390},"questionnaireitem",[535,1392,1393,1394,1396],{},"A single question, rendered as a ",[555,1395,1051],{},". Only the active item is visible.",[933,1398,1399,1411],{},[936,1400,1401],{},[939,1402,1403,1405,1407,1409],{},[942,1404,1103],{},[942,1406,1106],{},[942,1408,1109],{},[942,1410,947],{},[949,1412,1413,1429,1446,1463,1480,1498],{},[939,1414,1415,1420,1424,1426],{},[954,1416,1417],{},[555,1418,1419],{},"name",[954,1421,1422],{},[555,1423,1152],{},[954,1425,1127],{},[954,1427,1428],{},"Required. The name the answer submits under.",[939,1430,1431,1435,1439,1443],{},[954,1432,1433],{},[555,1434,1133],{},[954,1436,1437],{},[555,1438,1206],{},[954,1440,1441],{},[555,1442,1217],{},[954,1444,1445],{},"Requires an answer before the questionnaire can continue.",[939,1447,1448,1452,1456,1460],{},[954,1449,1450],{},[555,1451,687],{},[954,1453,1454],{},[555,1455,1206],{},[954,1457,1458],{},[555,1459,1217],{},[954,1461,1462],{},"Renders choices as checkboxes and keeps every selected answer.",[939,1464,1465,1469,1473,1477],{},[954,1466,1467],{},[555,1468,1136],{},[954,1470,1471],{},[555,1472,1206],{},[954,1474,1475],{},[555,1476,1217],{},[954,1478,1479],{},"Removes the item from the flow without unmounting it.",[939,1481,1482,1487,1491,1495],{},[954,1483,1484],{},[555,1485,1486],{},"invalid",[954,1488,1489],{},[555,1490,1206],{},[954,1492,1493],{},[555,1494,1217],{},[954,1496,1497],{},"Marks the item invalid from outside, for example after schema validation.",[939,1499,1500,1504,1508,1510],{},[954,1501,1502],{},[555,1503,1225],{},[954,1505,1506],{},[555,1507,1230],{},[954,1509,1127],{},[954,1511,1512],{},"Additional classes to apply to the item.",[933,1514,1515,1525],{},[936,1516,1517],{},[939,1518,1519,1521,1523],{},[942,1520,1244],{},[942,1522,1247],{},[942,1524,947],{},[949,1526,1527],{},[939,1528,1529,1534,1539],{},[954,1530,1531],{},[555,1532,1533],{},"update:status",[954,1535,1536],{},[555,1537,1538],{},"\"unanswered\" | \"answered\" | \"skipped\"",[954,1540,1541],{},"The item status changed.",[678,1543,890],{"id":1544},"questionnairetitle",[535,1546,1547,1548,779],{},"The question, rendered as a ",[555,1549,915],{},[933,1551,1552,1564],{},[936,1553,1554],{},[939,1555,1556,1558,1560,1562],{},[942,1557,1103],{},[942,1559,1106],{},[942,1561,1109],{},[942,1563,947],{},[949,1565,1566,1581,1598],{},[939,1567,1568,1572,1576,1578],{},[954,1569,1570],{},[555,1571,1225],{},[954,1573,1574],{},[555,1575,1230],{},[954,1577,1127],{},[954,1579,1580],{},"Additional classes to apply to the title.",[939,1582,1583,1587,1591,1596],{},[954,1584,1585],{},[555,1586,905],{},[954,1588,1589],{},[555,1590,1361],{},[954,1592,1593],{},[555,1594,1595],{},"\"legend\"",[954,1597,1369],{},[939,1599,1600,1604,1608,1612],{},[954,1601,1602],{},[555,1603,1376],{},[954,1605,1606],{},[555,1607,1206],{},[954,1609,1610],{},[555,1611,1217],{},[954,1613,1387],{},[678,1615,893],{"id":1616},"questionnairedescription",[535,1618,1619,1620,779],{},"Help text associated with the item through ",[555,1621,1057],{},[933,1623,1624,1636],{},[936,1625,1626],{},[939,1627,1628,1630,1632,1634],{},[942,1629,1103],{},[942,1631,1106],{},[942,1633,1109],{},[942,1635,947],{},[949,1637,1638,1654,1671,1687],{},[939,1639,1640,1645,1649,1651],{},[954,1641,1642],{},[555,1643,1644],{},"id",[954,1646,1647],{},[555,1648,1152],{},[954,1650,1127],{},[954,1652,1653],{},"Overrides the generated id.",[939,1655,1656,1660,1664,1669],{},[954,1657,1658],{},[555,1659,905],{},[954,1661,1662],{},[555,1663,1361],{},[954,1665,1666],{},[555,1667,1668],{},"\"p\"",[954,1670,1369],{},[939,1672,1673,1677,1681,1685],{},[954,1674,1675],{},[555,1676,1376],{},[954,1678,1679],{},[555,1680,1206],{},[954,1682,1683],{},[555,1684,1217],{},[954,1686,1387],{},[939,1688,1689,1693,1697,1699],{},[954,1690,1691],{},[555,1692,1225],{},[954,1694,1695],{},[555,1696,1230],{},[954,1698,1127],{},[954,1700,1701],{},"Additional classes to apply to the description.",[678,1703,896],{"id":1704},"questionnairechoices",[535,1706,1707],{},"The answer list. Wraps choices and an optional freeform input.",[933,1709,1710,1722],{},[936,1711,1712],{},[939,1713,1714,1716,1718,1720],{},[942,1715,1103],{},[942,1717,1106],{},[942,1719,1109],{},[942,1721,947],{},[949,1723,1724,1739,1755],{},[939,1725,1726,1730,1734,1736],{},[954,1727,1728],{},[555,1729,1225],{},[954,1731,1732],{},[555,1733,1230],{},[954,1735,1127],{},[954,1737,1738],{},"Additional classes to apply to the list.",[939,1740,1741,1745,1749,1753],{},[954,1742,1743],{},[555,1744,905],{},[954,1746,1747],{},[555,1748,1361],{},[954,1750,1751],{},[555,1752,1366],{},[954,1754,1369],{},[939,1756,1757,1761,1765,1769],{},[954,1758,1759],{},[555,1760,1376],{},[954,1762,1763],{},[555,1764,1206],{},[954,1766,1767],{},[555,1768,1217],{},[954,1770,1387],{},[678,1772,1774],{"id":1773},"questionnairechoice","QuestionnaireChoice",[535,1776,1777],{},"A single answer, rendered as a radio or a checkbox depending on the item.",[933,1779,1780,1792],{},[936,1781,1782],{},[939,1783,1784,1786,1788,1790],{},[942,1785,1103],{},[942,1787,1106],{},[942,1789,1109],{},[942,1791,947],{},[949,1793,1794,1810,1829,1847,1864],{},[939,1795,1796,1801,1805,1807],{},[954,1797,1798],{},[555,1799,1800],{},"value",[954,1802,1803],{},[555,1804,1152],{},[954,1806,1127],{},[954,1808,1809],{},"Required. The submitted value.",[939,1811,1812,1817,1821,1823],{},[954,1813,1814],{},[555,1815,1816],{},"checked",[954,1818,1819],{},[555,1820,1206],{},[954,1822,1127],{},[954,1824,1825,1826,779],{},"Controlled checked state. Use with ",[555,1827,1828],{},"v-model:checked",[939,1830,1831,1836,1840,1844],{},[954,1832,1833],{},[555,1834,1835],{},"defaultChecked",[954,1837,1838],{},[555,1839,1206],{},[954,1841,1842],{},[555,1843,1217],{},[954,1845,1846],{},"Checks the choice on mount and after a native form reset.",[939,1848,1849,1853,1857,1861],{},[954,1850,1851],{},[555,1852,1136],{},[954,1854,1855],{},[555,1856,1206],{},[954,1858,1859],{},[555,1860,1217],{},[954,1862,1863],{},"Disables the choice.",[939,1865,1866,1870,1874,1876],{},[954,1867,1868],{},[555,1869,1225],{},[954,1871,1872],{},[555,1873,1230],{},[954,1875,1127],{},[954,1877,1878],{},"Additional classes to apply to the choice.",[933,1880,1881,1891],{},[936,1882,1883],{},[939,1884,1885,1887,1889],{},[942,1886,1244],{},[942,1888,1247],{},[942,1890,947],{},[949,1892,1893,1907],{},[939,1894,1895,1900,1904],{},[954,1896,1897],{},[555,1898,1899],{},"update:checked",[954,1901,1902],{},[555,1903,1206],{},[954,1905,1906],{},"The choice was checked or cleared.",[939,1908,1909,1914,1918],{},[954,1910,1911],{},[555,1912,1913],{},"change",[954,1915,1916],{},[555,1917,1277],{},[954,1919,1920],{},"The native change event.",[678,1922,1924],{"id":1923},"questionnairechoicedescription","QuestionnaireChoiceDescription",[535,1926,1927],{},"Secondary text inside a choice.",[933,1929,1930,1942],{},[936,1931,1932],{},[939,1933,1934,1936,1938,1940],{},[942,1935,1103],{},[942,1937,1106],{},[942,1939,1109],{},[942,1941,947],{},[949,1943,1944],{},[939,1945,1946,1950,1954,1956],{},[954,1947,1948],{},[555,1949,1225],{},[954,1951,1952],{},[555,1953,1230],{},[954,1955,1127],{},[954,1957,1701],{},[678,1959,703],{"id":1960},"questionnaireinput",[535,1962,1963],{},"A freeform answer. Answers the item while it holds a value, and submits under the item name.",[933,1965,1966,1978],{},[936,1967,1968],{},[939,1969,1970,1972,1974,1976],{},[942,1971,1103],{},[942,1973,1106],{},[942,1975,1109],{},[942,1977,947],{},[949,1979,1980,2000,2016,2036,2053],{},[939,1981,1982,1987,1992,1994],{},[954,1983,1984],{},[555,1985,1986],{},"modelValue",[954,1988,1989],{},[555,1990,1991],{},"string | number",[954,1993,1127],{},[954,1995,1996,1997,779],{},"Controlled value. Use with ",[555,1998,1999],{},"v-model",[939,2001,2002,2007,2011,2013],{},[954,2003,2004],{},[555,2005,2006],{},"defaultValue",[954,2008,2009],{},[555,2010,1991],{},[954,2012,1127],{},[954,2014,2015],{},"Fills the answer on mount and after a native reset.",[939,2017,2018,2023,2028,2033],{},[954,2019,2020],{},[555,2021,2022],{},"type",[954,2024,2025],{},[555,2026,2027],{},"QuestionnaireInputType",[954,2029,2030],{},[555,2031,2032],{},"\"text\"",[954,2034,2035],{},"The input type.",[939,2037,2038,2042,2046,2050],{},[954,2039,2040],{},[555,2041,1136],{},[954,2043,2044],{},[555,2045,1206],{},[954,2047,2048],{},[555,2049,1217],{},[954,2051,2052],{},"Disables the input.",[939,2054,2055,2059,2063,2065],{},[954,2056,2057],{},[555,2058,1225],{},[954,2060,2061],{},[555,2062,1230],{},[954,2064,1127],{},[954,2066,2067],{},"Additional classes to apply to the input.",[678,2069,762],{"id":2070},"questionnaireerror",[535,2072,2073],{},"The item error. Hidden until the item is invalid, and falls back to a built-in message.",[933,2075,2076,2088],{},[936,2077,2078],{},[939,2079,2080,2082,2084,2086],{},[942,2081,1103],{},[942,2083,1106],{},[942,2085,1109],{},[942,2087,947],{},[949,2089,2090,2104,2120,2136],{},[939,2091,2092,2096,2100,2102],{},[954,2093,2094],{},[555,2095,1644],{},[954,2097,2098],{},[555,2099,1152],{},[954,2101,1127],{},[954,2103,1653],{},[939,2105,2106,2110,2114,2118],{},[954,2107,2108],{},[555,2109,905],{},[954,2111,2112],{},[555,2113,1361],{},[954,2115,2116],{},[555,2117,1668],{},[954,2119,1369],{},[939,2121,2122,2126,2130,2134],{},[954,2123,2124],{},[555,2125,1376],{},[954,2127,2128],{},[555,2129,1206],{},[954,2131,2132],{},[555,2133,1217],{},[954,2135,1387],{},[939,2137,2138,2142,2146,2148],{},[954,2139,2140],{},[555,2141,1225],{},[954,2143,2144],{},[555,2145,1230],{},[954,2147,1127],{},[954,2149,2150],{},"Additional classes to apply to the error.",[678,2152,901],{"id":2153},"questionnaireactions",[535,2155,2156],{},"The navigation row.",[933,2158,2159,2171],{},[936,2160,2161],{},[939,2162,2163,2165,2167,2169],{},[942,2164,1103],{},[942,2166,1106],{},[942,2168,1109],{},[942,2170,947],{},[949,2172,2173,2188,2204],{},[939,2174,2175,2179,2183,2185],{},[954,2176,2177],{},[555,2178,1225],{},[954,2180,2181],{},[555,2182,1230],{},[954,2184,1127],{},[954,2186,2187],{},"Additional classes to apply to the row.",[939,2189,2190,2194,2198,2202],{},[954,2191,2192],{},[555,2193,905],{},[954,2195,2196],{},[555,2197,1361],{},[954,2199,2200],{},[555,2201,1366],{},[954,2203,1369],{},[939,2205,2206,2210,2214,2218],{},[954,2207,2208],{},[555,2209,1376],{},[954,2211,2212],{},[555,2213,1206],{},[954,2215,2216],{},[555,2217,1217],{},[954,2219,1387],{},[678,2221,2223],{"id":2222},"questionnaireprevious-questionnaireskip-questionnairenext-and-questionnairesubmit","QuestionnairePrevious, QuestionnaireSkip, QuestionnaireNext, and QuestionnaireSubmit",[535,2225,2226,2227,2230,2231,2233,2234,2237,2238,2240],{},"Navigation buttons. Each one hides itself when it does not apply: ",[555,2228,2229],{},"QuestionnairePrevious"," on the first item, ",[555,2232,718],{}," on required items, ",[555,2235,2236],{},"QuestionnaireNext"," on the last item, and ",[555,2239,1083],{}," everywhere but the last item.",[933,2242,2243,2255],{},[936,2244,2245],{},[939,2246,2247,2249,2251,2253],{},[942,2248,1103],{},[942,2250,1106],{},[942,2252,1109],{},[942,2254,947],{},[949,2256,2257,2280,2299,2316,2333,2349],{},[939,2258,2259,2264,2269,2277],{},[954,2260,2261],{},[555,2262,2263],{},"variant",[954,2265,2266],{},[555,2267,2268],{},"ButtonVariants[\"variant\"]",[954,2270,2271,1009,2274],{},[555,2272,2273],{},"\"outline\"",[555,2275,2276],{},"\"default\"",[954,2278,2279],{},"The button variant.",[939,2281,2282,2287,2292,2296],{},[954,2283,2284],{},[555,2285,2286],{},"size",[954,2288,2289],{},[555,2290,2291],{},"ButtonVariants[\"size\"]",[954,2293,2294],{},[555,2295,2276],{},[954,2297,2298],{},"The button size.",[939,2300,2301,2305,2309,2313],{},[954,2302,2303],{},[555,2304,1136],{},[954,2306,2307],{},[555,2308,1206],{},[954,2310,2311],{},[555,2312,1217],{},[954,2314,2315],{},"Disables the button.",[939,2317,2318,2322,2326,2331],{},[954,2319,2320],{},[555,2321,905],{},[954,2323,2324],{},[555,2325,1361],{},[954,2327,2328],{},[555,2329,2330],{},"\"button\"",[954,2332,1369],{},[939,2334,2335,2339,2343,2347],{},[954,2336,2337],{},[555,2338,1376],{},[954,2340,2341],{},[555,2342,1206],{},[954,2344,2345],{},[555,2346,1217],{},[954,2348,1387],{},[939,2350,2351,2355,2359,2361],{},[954,2352,2353],{},[555,2354,1225],{},[954,2356,2357],{},[555,2358,1230],{},[954,2360,1127],{},[954,2362,2363],{},"Additional classes to apply to the button.",{"title":553,"searchDepth":2365,"depth":2365,"links":2366},2,[2367,2368,2369,2370,2371,2372,2388,2389,2390],{"id":523,"depth":2365,"text":327},{"id":583,"depth":2365,"text":584},{"id":596,"depth":2365,"text":597},{"id":632,"depth":2365,"text":633},{"id":643,"depth":2365,"text":644},{"id":676,"depth":2365,"text":400,"children":2373},[2374,2376,2377,2378,2379,2380,2381,2382,2383,2384,2385,2386,2387],{"id":680,"depth":2375,"text":681},3,{"id":696,"depth":2375,"text":697},{"id":711,"depth":2375,"text":712},{"id":727,"depth":2375,"text":728},{"id":749,"depth":2375,"text":750},{"id":772,"depth":2375,"text":773},{"id":786,"depth":2375,"text":787},{"id":797,"depth":2375,"text":798},{"id":808,"depth":2375,"text":809},{"id":823,"depth":2375,"text":824},{"id":852,"depth":2375,"text":853},{"id":866,"depth":2375,"text":65},{"id":919,"depth":2375,"text":113},{"id":930,"depth":2365,"text":931},{"id":1041,"depth":2365,"text":1042},{"id":1087,"depth":2365,"text":1088,"children":2391},[2392,2393,2394,2395,2396,2397,2398,2399,2400,2401,2402,2403],{"id":1091,"depth":2375,"text":217},{"id":1304,"depth":2375,"text":830},{"id":1390,"depth":2375,"text":1047},{"id":1544,"depth":2375,"text":890},{"id":1616,"depth":2375,"text":893},{"id":1704,"depth":2375,"text":896},{"id":1773,"depth":2375,"text":1774},{"id":1923,"depth":2375,"text":1924},{"id":1960,"depth":2375,"text":703},{"id":2070,"depth":2375,"text":762},{"id":2153,"depth":2375,"text":901},{"id":2222,"depth":2375,"text":2223},"A multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions.","md",{"component":220},"---\ntitle: Questionnaire\ndescription: A multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions.\ncomponent: true\nnew: true\n---\n\n::component-preview\n---\nname: QuestionnaireDemo\nclass: style-neva\nalign: end\npreviewClass: min-h-[560px] p-4 sm:p-8\n---\n::\n\n## Installation\n\n:::::code-tabs\n\n:::tabs-list\n\n  ::tabs-trigger{value=\"cli\"}\n  CLI\n  ::\n\n  ::tabs-trigger{value=\"manual\"}\n  Manual\n  ::\n\n:::\n\n::tabs-content{value=\"cli\"}\n\n```bash\nnpx hui-kit@latest add questionnaire\n```\n\n::\n\n::::tabs-content{value=\"manual\"}\n  :::steps\n    ::step\n    Copy and paste the [GitHub source code](https:\u002F\u002Fgithub.com\u002FClientik\u002Fhui-vue\u002Ftree\u002Fdev\u002Fapps\u002Fv4\u002Fregistry\u002Fbases\u002Freka\u002Fui\u002Fquestionnaire) into your project.\n    ::\n\n    ::step\n    Update the import paths to match your project setup.\n    ::\n  :::\n::::\n\n:::::\n\n## Usage\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport {\n  Questionnaire,\n  QuestionnaireActions,\n  QuestionnaireChoice,\n  QuestionnaireChoices,\n  QuestionnaireDescription,\n  QuestionnaireError,\n  QuestionnaireItem,\n  QuestionnaireNext,\n  QuestionnairePrevious,\n  QuestionnaireProgress,\n  QuestionnaireSkip,\n  QuestionnaireSubmit,\n  QuestionnaireTitle,\n} from '@\u002Fcomponents\u002Fui\u002Fquestionnaire'\n\nconst items = [\n  { name: 'direction', required: true },\n  { name: 'timing', required: true },\n]\n\nfunction handleSubmit(event: Event) {\n  event.preventDefault()\n\n  const answers = new FormData(event.target as HTMLFormElement)\n  console.log(Object.fromEntries(answers))\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CQuestionnaire :items=\"items\" @submit=\"handleSubmit\">\n    \u003CQuestionnaireProgress \u002F>\n\n    \u003CQuestionnaireItem name=\"direction\" required>\n      \u003CQuestionnaireTitle>What should the agent build next?\u003C\u002FQuestionnaireTitle>\n      \u003CQuestionnaireDescription>Choose a direction.\u003C\u002FQuestionnaireDescription>\n      \u003CQuestionnaireChoices>\n        \u003CQuestionnaireChoice value=\"tool-calls\">Tool call timeline\u003C\u002FQuestionnaireChoice>\n        \u003CQuestionnaireChoice value=\"approvals\">Approval checkpoints\u003C\u002FQuestionnaireChoice>\n      \u003C\u002FQuestionnaireChoices>\n      \u003CQuestionnaireError \u002F>\n    \u003C\u002FQuestionnaireItem>\n\n    \u003CQuestionnaireItem name=\"timing\" required>\n      \u003CQuestionnaireTitle>When should work begin?\u003C\u002FQuestionnaireTitle>\n      \u003CQuestionnaireChoices>\n        \u003CQuestionnaireChoice value=\"now\">Start now\u003C\u002FQuestionnaireChoice>\n        \u003CQuestionnaireChoice value=\"backlog\">Add it to the backlog\u003C\u002FQuestionnaireChoice>\n      \u003C\u002FQuestionnaireChoices>\n      \u003CQuestionnaireError \u002F>\n    \u003C\u002FQuestionnaireItem>\n\n    \u003CQuestionnaireActions>\n      \u003CQuestionnairePrevious \u002F>\n      \u003CQuestionnaireSkip \u002F>\n      \u003CQuestionnaireNext \u002F>\n      \u003CQuestionnaireSubmit \u002F>\n    \u003C\u002FQuestionnaireActions>\n  \u003C\u002FQuestionnaire>\n\u003C\u002Ftemplate>\n```\n\n## Composition\n\nUse the following composition to build a questionnaire:\n\n```text\nQuestionnaire\n├── QuestionnaireProgress\n├── QuestionnaireItem\n│   ├── QuestionnaireTitle\n│   ├── QuestionnaireDescription\n│   ├── QuestionnaireChoices\n│   │   ├── QuestionnaireChoice\n│   │   │   └── QuestionnaireChoiceDescription\n│   │   └── QuestionnaireInput\n│   └── QuestionnaireError\n└── QuestionnaireActions\n    ├── QuestionnairePrevious\n    ├── QuestionnaireSkip\n    ├── QuestionnaireNext\n    └── QuestionnaireSubmit\n```\n\n`Questionnaire` renders a real `\u003Cform>` and every item renders a `\u003Cfieldset>` with a `\u003Clegend>`, so answers submit with `FormData` and no extra state is needed.\n\n## Server Rendering\n\nPass `items` to server-render the active item, progress, actions, and answer shortcuts. Without it the questionnaire only learns its order once the items have mounted on the client.\n\n## Features\n\n- One question at a time, with progress, navigation, and validation handled for you\n- Single-choice, multiple-choice, freeform, and intentionally skipped answers\n- Keyboard shortcuts for choices, plus arrow key navigation between questions and answers\n- Declarative `items` for item order, conditional items, and stable shortcut assignment\n- Controlled navigation with `v-model:item` for custom validation flows\n- Native form reset restores the answers you marked as defaults\n\n## Examples\n\n### Multiple Selection\n\nUse `multiple` for an item that accepts more than one fixed answer.\n\n::component-preview\n---\nname: QuestionnaireMultipleDemo\nclass: style-neva\nalign: end\npreviewClass: min-h-[420px] p-4 sm:p-8\n---\n::\n\n### Freeform Answer\n\nCompose `QuestionnaireInput` with fixed choices when the user can provide another answer.\n\n::component-preview\n---\nname: QuestionnaireFreeformDemo\nclass: style-neva\nalign: end\npreviewClass: min-h-[420px] p-4 sm:p-8\n---\n::\n\n### Explicit Skip\n\nAdd `QuestionnaireSkip` when an optional item may be intentionally left unanswered.\n\n::component-preview\n---\nname: QuestionnaireSkipDemo\nclass: style-neva\nalign: end\npreviewClass: min-h-[520px] p-4 sm:p-8\n---\n::\n\n### Shortcuts\n\nAssign a letter or number key to each answer with `shortcuts`. Declare `choices` on `items` so the keys stay stable regardless of the render order.\n\n::component-preview\n---\nname: QuestionnaireShortcutsDemo\nclass: style-neva\nalign: end\npreviewClass: min-h-[480px] p-4 sm:p-8\n---\n::\n\n### Custom Validation\n\nCombine controlled navigation with an external schema such as Zod to return to an invalid item and present its error.\n\n::component-preview\n---\nname: QuestionnaireValidationDemo\nclass: style-neva\nalign: end\npreviewClass: min-h-[520px] p-4 sm:p-8\n---\n::\n\n`QuestionnaireError` falls back to a built-in message, so only render your own message when you have one:\n\n```vue showLineNumbers\n\u003CQuestionnaireError>\n  \u003Ctemplate v-if=\"errors.detail\">\n    {{ errors.detail }}\n  \u003C\u002Ftemplate>\n\u003C\u002FQuestionnaireError>\n```\n\n### Controlled\n\nControl the active item from host state, such as returning to an invalid step. Use `v-model:item`.\n\n::component-preview\n---\nname: QuestionnaireControlledDemo\nclass: style-neva\nalign: end\npreviewClass: min-h-[520px] p-4 sm:p-8\n---\n::\n\n### Resume\n\nRestore a saved active item and default answers, then reset changes back to that saved state.\n\n::component-preview\n---\nname: QuestionnaireResumeDemo\nclass: style-neva\nalign: end\npreviewClass: min-h-[520px] p-4 sm:p-8\n---\n::\n\n### Conditional Items\n\nDisable items that do not apply to the user's earlier answers.\n\n::component-preview\n---\nname: QuestionnaireConditionalDemo\nclass: style-neva\nalign: end\npreviewClass: min-h-[520px] p-4 sm:p-8\n---\n::\n\n### Navigation State\n\nRead item status to opt into disabled navigation and custom action styling. Listen to `@update:status` on the items you want to track.\n\n::component-preview\n---\nname: QuestionnaireNavigationStateDemo\nclass: style-neva\nalign: end\npreviewClass: min-h-[480px] p-4 sm:p-8\n---\n::\n\n### Custom Progress\n\nUse the progress slot state to build a custom progress indicator. `QuestionnaireProgress` exposes `current`, `total`, `first`, and `last`.\n\n::component-preview\n---\nname: QuestionnaireProgressDemo\nclass: style-neva\nalign: end\npreviewClass: min-h-[520px] p-4 sm:p-8\n---\n::\n\n### Animated Items\n\nAnimate the active item while keeping progress and navigation stationary. The active item is marked with `data-active`.\n\n::component-preview\n---\nname: QuestionnaireAnimatedDemo\nclass: style-neva\nalign: end\npreviewClass: min-h-[520px] p-4 sm:p-8\n---\n::\n\n### Card\n\nCompose Questionnaire with Card slots while keeping the question title and description semantic. Use `as-child` to render a part as another component:\n\n```vue showLineNumbers\n\u003CQuestionnaireTitle as-child>\n  \u003CCardTitle>What should the agent work on?\u003C\u002FCardTitle>\n\u003C\u002FQuestionnaireTitle>\n```\n\n::component-preview\n---\nname: QuestionnaireCardDemo\nclass: style-neva\nalign: end\npreviewClass: min-h-[560px] p-4 sm:p-8\n---\n::\n\n`QuestionnaireProgress`, `QuestionnaireTitle`, `QuestionnaireDescription`, `QuestionnaireChoices`, `QuestionnaireError`, `QuestionnaireActions`, and the four navigation buttons all accept `as` and `as-child`. `as-child` on the title replaces the `legend` that names the item, so the item labels itself with the rendered title instead. The title and description keep the id of the child they render.\n\n### Dialog\n\nCompose Questionnaire inside a Dialog while keeping cancellation and dismissal host-owned.\n\n::component-preview\n---\nname: QuestionnaireDialogDemo\nclass: style-neva\nalign: end\npreviewClass: min-h-[320px] p-4 sm:p-8\n---\n::\n\n## Keyboard navigation\n\n| Key                    | Description                                                      |\n| ---------------------- | ---------------------------------------------------------------- |\n| `Arrow Down`           | Moves focus to the next answer.                                   |\n| `Arrow Up`             | Moves focus to the previous answer.                               |\n| `Arrow Right`          | Moves to the next question once the current one is answered.      |\n| `Arrow Left`           | Moves to the previous question.                                   |\n| `Enter`                | Confirms the focused answer and moves on, or submits on the last question. |\n| `Meta+Enter` \u002F `Ctrl+Enter` | Confirms the active question from anywhere in the form.      |\n| `A` – `Z` \u002F `1` – `9`  | Selects the matching choice when `shortcuts` is set.              |\n\n## Accessibility\n\n`QuestionnaireItem` renders a `fieldset` with a `legend`, so every question is announced with its answers. Descriptions and errors are associated with the item through `aria-describedby`, and an invalid item exposes `aria-invalid`.\n\n`QuestionnaireProgress` renders a named `progressbar` that announces the current question. Inactive items are `hidden` and `inert`, so they stay out of the tab order and the accessibility tree.\n\nNavigation actions are real buttons. `QuestionnaireSubmit` submits the form, so a questionnaire keeps working with browser autofill and native form submission.\n\n## API Reference\n\n### Questionnaire\n\nThe root form. Manages the active item, progress, validation, and keyboard navigation.\n\n| Prop          | Type                            | Default | Description                                                                 |\n| ------------- | ------------------------------- | ------- | --------------------------------------------------------------------------- |\n| `items`       | `QuestionnaireItemDefinition[]`  | -       | Declares item order, `required`, `disabled`, and the `choices` used for shortcuts. |\n| `item`        | `string`                        | -       | The active item. Use with `v-model:item`.                                    |\n| `defaultItem` | `string`                        | -       | The item shown first. Ignored when `item` is provided.                       |\n| `shortcuts`   | `\"letters\" \\| \"numbers\"`        | -       | Assigns a keyboard shortcut to every choice.                                 |\n| `noValidate`  | `boolean`                       | `true`  | Set to `false` to run native constraint validation on answered items.        |\n| `class`       | `HTMLAttributes[\"class\"]`       | -       | Additional classes to apply to the form.                                     |\n\n| Emit           | Payload  | Description                                                              |\n| -------------- | -------- | ------------------------------------------------------------------------ |\n| `update:item`  | `string` | The active item changed.                                                 |\n| `submit`       | `Event`  | Every item is valid. Call `event.preventDefault()` to handle it yourself. |\n| `reset`        | `Event`  | The form was reset. Call `event.preventDefault()` to keep the answers.    |\n\n### QuestionnaireProgress\n\nA `progressbar` announcing the active question. Exposes `current`, `total`, `first`, and `last` to its default slot.\n\n| Prop    | Type                      | Default | Description                                      |\n| ------- | ------------------------- | ------- | ------------------------------------------------ |\n| `class` | `HTMLAttributes[\"class\"]` | -       | Additional classes to apply to the progress bar. |\n| `as`      | `AsTag \\| Component`      | `\"div\"`   | The element or component to render as.      |\n| `asChild` | `boolean`                 | `false` | Render the child element instead.           |\n\n### QuestionnaireItem\n\nA single question, rendered as a `fieldset`. Only the active item is visible.\n\n| Prop       | Type                      | Default | Description                                                   |\n| ---------- | ------------------------- | ------- | ------------------------------------------------------------- |\n| `name`     | `string`                  | -       | Required. The name the answer submits under.                   |\n| `required` | `boolean`                 | `false` | Requires an answer before the questionnaire can continue.      |\n| `multiple` | `boolean`                 | `false` | Renders choices as checkboxes and keeps every selected answer. |\n| `disabled` | `boolean`                 | `false` | Removes the item from the flow without unmounting it.          |\n| `invalid`  | `boolean`                 | `false` | Marks the item invalid from outside, for example after schema validation. |\n| `class`    | `HTMLAttributes[\"class\"]` | -       | Additional classes to apply to the item.                       |\n\n| Emit             | Payload                                       | Description             |\n| ---------------- | --------------------------------------------- | ----------------------- |\n| `update:status`  | `\"unanswered\" \\| \"answered\" \\| \"skipped\"`     | The item status changed. |\n\n### QuestionnaireTitle\n\nThe question, rendered as a `legend`.\n\n| Prop    | Type                      | Default | Description                                 |\n| ------- | ------------------------- | ------- | ------------------------------------------- |\n| `class` | `HTMLAttributes[\"class\"]` | -       | Additional classes to apply to the title.   |\n| `as`      | `AsTag \\| Component`      | `\"legend\"`   | The element or component to render as.      |\n| `asChild` | `boolean`                 | `false` | Render the child element instead.           |\n\n### QuestionnaireDescription\n\nHelp text associated with the item through `aria-describedby`.\n\n| Prop    | Type                      | Default | Description                                     |\n| ------- | ------------------------- | ------- | ----------------------------------------------- |\n| `id`    | `string`                  | -       | Overrides the generated id.                     |\n| `as`      | `AsTag \\| Component`      | `\"p\"`   | The element or component to render as.      |\n| `asChild` | `boolean`                 | `false` | Render the child element instead.           |\n| `class` | `HTMLAttributes[\"class\"]` | -       | Additional classes to apply to the description. |\n\n### QuestionnaireChoices\n\nThe answer list. Wraps choices and an optional freeform input.\n\n| Prop    | Type                      | Default | Description                                 |\n| ------- | ------------------------- | ------- | ------------------------------------------- |\n| `class` | `HTMLAttributes[\"class\"]` | -       | Additional classes to apply to the list.    |\n| `as`      | `AsTag \\| Component`      | `\"div\"`   | The element or component to render as.      |\n| `asChild` | `boolean`                 | `false` | Render the child element instead.           |\n\n### QuestionnaireChoice\n\nA single answer, rendered as a radio or a checkbox depending on the item.\n\n| Prop             | Type                      | Default | Description                                             |\n| ---------------- | ------------------------- | ------- | ------------------------------------------------------- |\n| `value`          | `string`                  | -       | Required. The submitted value.                           |\n| `checked`        | `boolean`                 | -       | Controlled checked state. Use with `v-model:checked`.    |\n| `defaultChecked` | `boolean`                 | `false` | Checks the choice on mount and after a native form reset.|\n| `disabled`       | `boolean`                 | `false` | Disables the choice.                                     |\n| `class`          | `HTMLAttributes[\"class\"]` | -       | Additional classes to apply to the choice.               |\n\n| Emit               | Payload   | Description                        |\n| ------------------ | --------- | ---------------------------------- |\n| `update:checked`   | `boolean` | The choice was checked or cleared. |\n| `change`           | `Event`   | The native change event.           |\n\n### QuestionnaireChoiceDescription\n\nSecondary text inside a choice.\n\n| Prop    | Type                      | Default | Description                                     |\n| ------- | ------------------------- | ------- | ----------------------------------------------- |\n| `class` | `HTMLAttributes[\"class\"]` | -       | Additional classes to apply to the description. |\n\n### QuestionnaireInput\n\nA freeform answer. Answers the item while it holds a value, and submits under the item name.\n\n| Prop           | Type                      | Default  | Description                                           |\n| -------------- | ------------------------- | -------- | ----------------------------------------------------- |\n| `modelValue`   | `string \\| number`        | -        | Controlled value. Use with `v-model`.                 |\n| `defaultValue` | `string \\| number`        | -        | Fills the answer on mount and after a native reset.   |\n| `type`         | `QuestionnaireInputType`  | `\"text\"` | The input type.                                       |\n| `disabled`     | `boolean`                 | `false`  | Disables the input.                                   |\n| `class`        | `HTMLAttributes[\"class\"]` | -        | Additional classes to apply to the input.             |\n\n### QuestionnaireError\n\nThe item error. Hidden until the item is invalid, and falls back to a built-in message.\n\n| Prop    | Type                      | Default | Description                               |\n| ------- | ------------------------- | ------- | ----------------------------------------- |\n| `id`    | `string`                  | -       | Overrides the generated id.               |\n| `as`      | `AsTag \\| Component`      | `\"p\"`   | The element or component to render as.      |\n| `asChild` | `boolean`                 | `false` | Render the child element instead.           |\n| `class` | `HTMLAttributes[\"class\"]` | -       | Additional classes to apply to the error. |\n\n### QuestionnaireActions\n\nThe navigation row.\n\n| Prop    | Type                      | Default | Description                                 |\n| ------- | ------------------------- | ------- | ------------------------------------------- |\n| `class` | `HTMLAttributes[\"class\"]` | -       | Additional classes to apply to the row.     |\n| `as`      | `AsTag \\| Component`      | `\"div\"`   | The element or component to render as.      |\n| `asChild` | `boolean`                 | `false` | Render the child element instead.           |\n\n### QuestionnairePrevious, QuestionnaireSkip, QuestionnaireNext, and QuestionnaireSubmit\n\nNavigation buttons. Each one hides itself when it does not apply: `QuestionnairePrevious` on the first item, `QuestionnaireSkip` on required items, `QuestionnaireNext` on the last item, and `QuestionnaireSubmit` everywhere but the last item.\n\n| Prop       | Type                            | Default                            | Description                                |\n| ---------- | ------------------------------- | ---------------------------------- | ------------------------------------------ |\n| `variant`  | `ButtonVariants[\"variant\"]`     | `\"outline\"` \u002F `\"default\"`          | The button variant.                        |\n| `size`     | `ButtonVariants[\"size\"]`        | `\"default\"`                        | The button size.                            |\n| `disabled` | `boolean`                       | `false`                            | Disables the button.                        |\n| `as`       | `AsTag \\| Component`            | `\"button\"`                         | The element or component to render as.      |\n| `asChild`  | `boolean`                       | `false`                            | Render the child element instead.           |\n| `class`    | `HTMLAttributes[\"class\"]`       | -                                  | Additional classes to apply to the button.  |\n",{"title":217,"description":2404},"ktAYjhydYhOhj31jRIVGgl1novPAEp9CT8sWf_oyDZE",[2411,2412],{"title":213,"path":214,"stem":215,"children":-1},{"title":222,"path":223,"stem":224,"children":-1},1787698065921]