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