[{"data":1,"prerenderedAt":937},["ShallowReactive",2],{"navigation":3,"$f2vxmxe0ttlw1b":470,"\u002Fdocs\u002Fcomponents\u002Fform":481,"surround-\u002Fdocs\u002Fcomponents\u002Fform":934},[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":125,"body":483,"description":926,"extension":927,"links":928,"meta":929,"navigation":204,"new":18,"path":126,"rawbody":931,"seo":932,"stem":127,"__hash__":933},"content\u002Fdocs\u002Fcomponents\u002Fform.md",{"type":484,"value":485,"toc":914},"minimark",[486,509,512,515,534,557,562,572,627,635,643,647,657,661,712,715,773,777,783,788,795,804,810,822,826,839],[487,488,490],"callout",{"title":489},"We are not actively developing this component anymore.",[491,492,493,494,498,499,505,506,508],"p",{},"The Form component is an abstraction over the ",[495,496,497],"code",{},"vee-validate"," library. Going forward, we recommend using the ",[500,501,502],"a",{"href":122},[495,503,504],{},"\u003CField \u002F>"," component to build forms. See the ",[500,507,125],{"href":350}," documentation for more information.",[491,510,511],{},"Forms are tricky. They are one of the most common things you'll build in a web application, but also one of the most complex.",[491,513,514],{},"Well-designed HTML forms are:",[516,517,518,522,525,528,531],"ul",{},[519,520,521],"li",{},"Well-structured and semantically correct.",[519,523,524],{},"Easy to use and navigate (keyboard).",[519,526,527],{},"Accessible with ARIA attributes and proper labels.",[519,529,530],{},"Has support for client and server side validation.",[519,532,533],{},"Well-styled and consistent with the rest of the application.",[491,535,536,537,544,545,552,553,556],{},"In this guide, we will take a look at building forms with ",[500,538,542],{"href":539,"rel":540},"https:\u002F\u002Fvee-validate.logaretm.com\u002Fv4\u002F",[541],"nofollow",[495,543,497],{}," and ",[500,546,549],{"href":547,"rel":548},"https:\u002F\u002Fzod.dev",[541],[495,550,551],{},"zod",". We're going to use a ",[495,554,555],{},"\u003CFormField>"," component to compose accessible forms using Reka UI components.",[558,559,561],"h2",{"id":560},"features","Features",[491,563,564,565,568,569,571],{},"The ",[495,566,567],{},"\u003CForm \u002F>"," component is a wrapper around the ",[495,570,497],{}," library. It provides a few things:",[516,573,574,577,584,590,597,600,621],{},[519,575,576],{},"Composable components for building forms.",[519,578,579,580,583],{},"A ",[495,581,582],{},"\u003CFormField \u002F>"," component for building controlled form fields.",[519,585,586,587,589],{},"Form validation using ",[495,588,551],{},".",[519,591,592,593,596],{},"Applies the correct ",[495,594,595],{},"aria"," attributes to form fields based on states, handle unique IDs",[519,598,599],{},"Built to work with all Reka UI components.",[519,601,602,603,605,606,613,614,589],{},"Bring your own schema library. We use ",[495,604,551],{}," but you can use any other supported schema validation you want, like ",[500,607,610],{"href":608,"rel":609},"https:\u002F\u002Fgithub.com\u002Fjquense\u002Fyup",[541],[495,611,612],{},"yup"," or ",[500,615,618],{"href":616,"rel":617},"https:\u002F\u002Fvalibot.dev\u002F",[541],[495,619,620],{},"valibot",[519,622,623],{},[624,625,626],"strong",{},"You have full control over the markup and styling.",[491,628,629,634],{},[500,630,632],{"href":539,"rel":631},[541],[495,633,497],{}," makes use of two flavors to add validation to your forms.",[516,636,637,640],{},[519,638,639],{},"Composition API",[519,641,642],{},"Higher-order components (HOC)",[558,644,646],{"id":645},"anatomy","Anatomy",[648,649,655],"pre",{"className":650,"code":652,"language":653,"meta":654},[651],"language-vue","\u003Ctemplate>\n  \u003CForm>\n    \u003CFormField>\n      \u003CFormItem>\n        \u003CFormLabel \u002F>\n        \u003CFormControl>\n        \u003C!-- any Form Input component or native input elements -->\n        \u003C\u002FFormControl>\n        \u003CFormDescription \u002F>\n        \u003CFormMessage \u002F>\n      \u003C\u002FFormItem>\n    \u003C\u002FFormField>\n  \u003C\u002FForm>\n\u003C\u002Ftemplate>\n","vue","",[495,656,652],{"__ignoreMap":654},[558,658,660],{"id":659},"example","Example",[662,663,664,679,696],"tabs",{"default-value":19},[665,666,667,673],"tabs-list",{},[668,669,670],"tabs-trigger",{"value":19},[491,671,672],{},"Component",[668,674,676],{"value":675},"native",[491,677,678],{},"Native",[680,681,682,689],"tabs-content",{"value":19},[683,684,686,688],"h4",{"id":685},"input-component",[495,687,133],{}," Component",[648,690,694],{"className":691,"code":692,"language":653,"meta":693},[651],"\u003Ctemplate>\n  \u003CFormField v-slot=\"{ componentField }\">\n    \u003CFormItem>\n      \u003CFormLabel>Username\u003C\u002FFormLabel>\n      \u003CFormControl>\n        \u003CInput placeholder=\"shadcn\" v-bind=\"componentField\" \u002F>\n      \u003C\u002FFormControl>\n      \u003CFormDescription \u002F>\n      \u003CFormMessage \u002F>\n    \u003C\u002FFormItem>\n  \u003C\u002FFormField>\n\u003C\u002Ftemplate>\n","showLineNumbers",[495,695,692],{"__ignoreMap":654},[680,697,698,706],{"value":675},[683,699,701,702,705],{"id":700},"native-input-element","native ",[495,703,704],{},"input"," element",[648,707,710],{"className":708,"code":709,"language":653,"meta":693},[651],"\u003Ctemplate>\n  \u003CFormField v-slot=\"{ field }\">\n    \u003CFormItem>\n      \u003CFormLabel>Username\u003C\u002FFormLabel>\n      \u003CFormControl>\n        \u003Cinput placeholder=\"shadcn\" v-bind=\"field\">\n      \u003C\u002FFormControl>\n      \u003CFormDescription \u002F>\n      \u003CFormMessage \u002F>\n    \u003C\u002FFormItem>\n  \u003C\u002FFormField>\n\u003C\u002Ftemplate>\n",[495,711,709],{"__ignoreMap":654},[558,713,299],{"id":714},"installation",[662,716,718,730,740],{"default-value":717},"cli",[665,719,720,724],{},[668,721,722],{"value":717},[491,723,434],{},[668,725,727],{"value":726},"manual",[491,728,729],{},"Manual",[680,731,732],{"value":717},[648,733,738],{"className":734,"code":736,"language":737,"meta":654},[735],"language-bash","npx shadcn-vue@latest add form\n","bash",[495,739,736],{"__ignoreMap":654},[680,741,742],{"value":726},[743,744,745,751,757,768],"steps",{},[746,747,748],"step",{},[491,749,750],{},"Install the following dependency:",[648,752,755],{"className":753,"code":754,"language":737,"meta":654},[735],"npm install reka-ui vee-validate @vee-validate\u002Fzod zod\n",[495,756,754],{"__ignoreMap":654},[746,758,759],{},[491,760,761,762,767],{},"Copy and paste the ",[500,763,766],{"href":764,"rel":765},"https:\u002F\u002Fgithub.com\u002Funovue\u002Fshadcn-vue\u002Ftree\u002Fdev\u002Fapps\u002Fv4\u002Fregistry\u002Fnew-york-v4\u002Fui\u002Fform",[541],"GitHub source code"," into your project.",[746,769,770],{},[491,771,772],{},"Update the import paths to match your project setup.",[558,774,776],{"id":775},"usage","Usage",[648,778,781],{"className":779,"code":780,"language":653,"meta":693},[651],"\u003Cscript setup lang=\"ts\">\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@\u002Fcomponents\u002Fui\u002Fform'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CFormField v-slot=\"{ componentField }\" name=\"username\">\n    \u003CFormItem>\n      \u003CFormLabel>Username\u003C\u002FFormLabel>\n      \u003CFormControl>\n        \u003CInput placeholder=\"shadcn\" v-bind=\"componentField\" \u002F>\n      \u003C\u002FFormControl>\n      \u003CFormDescription>\n        This is your public display name.\n      \u003C\u002FFormDescription>\n      \u003CFormMessage \u002F>\n    \u003C\u002FFormItem>\n  \u003C\u002FFormField>\n\u003C\u002Ftemplate>\n",[495,782,780],{"__ignoreMap":654},[784,785,787],"h3",{"id":786},"create-a-form-schema","Create a form schema",[491,789,790,791,589],{},"Define the shape of your form using a Zod schema. You can read more about using Zod in the ",[500,792,794],{"href":547,"rel":793},[541],"Zod documentation",[491,796,797,798,801,802],{},"Use ",[495,799,800],{},"@vee-validate\u002Fzod"," to integrate Zod schema validation with ",[495,803,497],{},[491,805,806,809],{},[495,807,808],{},"toTypedSchema"," also makes the form values and submitted values typed automatically and caters for both input and output types of that schema.",[648,811,820],{"className":812,"code":813,"highlights":814,"language":653,"meta":693},[651],"\u003Cscript setup lang=\"ts\">\nimport { toTypedSchema } from '@vee-validate\u002Fzod'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\u003C\u002Fscript>\n",[815,816,817,818,819],2,3,5,6,7,[495,821,813],{"__ignoreMap":654},[784,823,825],{"id":824},"define-a-form","Define a form",[491,827,828,829,832,833,835,836,838],{},"Use the ",[495,830,831],{},"useForm"," composable from ",[495,834,497],{}," or use ",[495,837,567],{}," component to create a form.",[662,840,842,853,865,877,881,893,900,904,907],{"default-value":841},"composition",[665,843,844,849],{},[668,845,846],{"value":841},[491,847,848],{},"Composition",[668,850,851],{"value":19},[491,852,672],{},[680,854,855],{"value":841},[648,856,863],{"className":857,"code":858,"highlights":859,"language":653,"meta":693},[651],"\u003Cscript setup lang=\"ts\">\nimport { useForm } from 'vee-validate'\nimport { toTypedSchema } from '@vee-validate\u002Fzod'\nimport * as z from 'zod'\n\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage\n} from '@\u002Fcomponents\u002Fui\u002Fform'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst form = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = form.handleSubmit((values) => {\n  console.log('Form submitted!', values)\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cform @submit=\"onSubmit\">\n    ...\n  \u003C\u002Fform>\n\u003C\u002Ftemplate>\n",[815,860,861,862],19,20,21,[495,864,858],{"__ignoreMap":654},[680,866,867],{"value":19},[648,868,875],{"className":869,"code":870,"highlights":871,"language":653,"meta":693},[651],"\u003Cscript setup lang=\"ts\">\nimport { toTypedSchema } from '@vee-validate\u002Fzod'\nimport * as z from 'zod'\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage\n} from '@\u002Fcomponents\u002Fui\u002Fform'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nfunction onSubmit(values) {\n  console.log('Form submitted!', values)\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CForm :validation-schema=\"formSchema\" @submit=\"onSubmit\">\n    ...\n  \u003C\u002FForm>\n\u003C\u002Ftemplate>\n",[817,872,873,874],24,25,26,[495,876,870],{"__ignoreMap":654},[784,878,880],{"id":879},"build-your-form","Build your form",[491,882,883,884,886,887,889,890,892],{},"Based on last step we can either use ",[495,885,567],{}," component or ",[495,888,831],{}," composable\n",[495,891,831],{}," is recommended because values are typed automatically",[648,894,898],{"className":895,"code":896,"highlights":897,"language":653,"meta":693},[651],"\u003Cscript setup lang=\"ts\">\nimport { toTypedSchema } from '@vee-validate\u002Fzod'\nimport { useForm } from 'vee-validate'\nimport * as z from 'zod'\n\nimport { Button } from '@\u002Fcomponents\u002Fui\u002Fbutton'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@\u002Fcomponents\u002Fui\u002Fform'\nimport { Input } from '@\u002Fcomponents\u002Fui\u002Finput'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst form = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = form.handleSubmit((values) => {\n  console.log('Form submitted!', values)\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cform @submit=\"onSubmit\">\n    \u003CFormField v-slot=\"{ componentField }\" name=\"username\">\n      \u003CFormItem>\n        \u003CFormLabel>Username\u003C\u002FFormLabel>\n        \u003CFormControl>\n          \u003CInput type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" \u002F>\n        \u003C\u002FFormControl>\n        \u003CFormDescription>\n          This is your public display name.\n        \u003C\u002FFormDescription>\n        \u003CFormMessage \u002F>\n      \u003C\u002FFormItem>\n    \u003C\u002FFormField>\n    \u003CButton type=\"submit\">\n      Submit\n    \u003C\u002FButton>\n  \u003C\u002Fform>\n\u003C\u002Ftemplate>\n",[815],[495,899,896],{"__ignoreMap":654},[784,901,903],{"id":902},"done","Done",[491,905,906],{},"That's it. You now have a fully accessible form that is type-safe with client-side validation.",[908,909],"component-preview",{"className":910,"name":913},[911,912],"[&_[role=tablist]]:hidden","[&>div>div:first-child]:hidden","InputForm",{"title":654,"searchDepth":815,"depth":815,"links":915},[916,917,918,919,920],{"id":560,"depth":815,"text":561},{"id":645,"depth":815,"text":646},{"id":659,"depth":815,"text":660},{"id":714,"depth":815,"text":299},{"id":775,"depth":815,"text":776,"children":921},[922,923,924,925],{"id":786,"depth":816,"text":787},{"id":824,"depth":816,"text":825},{"id":879,"depth":816,"text":880},{"id":902,"depth":816,"text":903},"Building forms with VeeValidate and Zod.","md",null,{"primitive":930,"component":204},"https:\u002F\u002Fvee-validate.logaretm.com\u002Fv4\u002Fguide\u002Foverview\u002F","---\ntitle: Form\ndescription: Building forms with VeeValidate and Zod.\nprimitive: https:\u002F\u002Fvee-validate.logaretm.com\u002Fv4\u002Fguide\u002Foverview\u002F\ncomponent: true\n---\n\n::callout{title=\"We are not actively developing this component anymore.\"}\n\nThe Form component is an abstraction over the `vee-validate` library. Going forward, we recommend using the [`\u003CField \u002F>`](\u002Fdocs\u002Fcomponents\u002Ffield) component to build forms. See the [Form](\u002Fdocs\u002Fforms) documentation for more information.\n\n::\n\nForms are tricky. They are one of the most common things you'll build in a web application, but also one of the most complex.\n\nWell-designed HTML forms are:\n\n- Well-structured and semantically correct.\n- Easy to use and navigate (keyboard).\n- Accessible with ARIA attributes and proper labels.\n- Has support for client and server side validation.\n- Well-styled and consistent with the rest of the application.\n\nIn this guide, we will take a look at building forms with [`vee-validate`](https:\u002F\u002Fvee-validate.logaretm.com\u002Fv4\u002F) and [`zod`](https:\u002F\u002Fzod.dev). We're going to use a `\u003CFormField>` component to compose accessible forms using Reka UI components.\n\n## Features\n\nThe `\u003CForm \u002F>` component is a wrapper around the `vee-validate` library. It provides a few things:\n\n- Composable components for building forms.\n- A `\u003CFormField \u002F>` component for building controlled form fields.\n- Form validation using `zod`.\n- Applies the correct `aria` attributes to form fields based on states, handle unique IDs\n- Built to work with all Reka UI components.\n- Bring your own schema library. We use `zod` but you can use any other supported schema validation you want, like [`yup`](https:\u002F\u002Fgithub.com\u002Fjquense\u002Fyup) or [`valibot`](https:\u002F\u002Fvalibot.dev\u002F).\n- **You have full control over the markup and styling.**\n\n[`vee-validate`](https:\u002F\u002Fvee-validate.logaretm.com\u002Fv4\u002F) makes use of two flavors to add validation to your forms.\n- Composition API\n- Higher-order components (HOC)\n\n## Anatomy\n\n```vue\n\u003Ctemplate>\n  \u003CForm>\n    \u003CFormField>\n      \u003CFormItem>\n        \u003CFormLabel \u002F>\n        \u003CFormControl>\n        \u003C!-- any Form Input component or native input elements -->\n        \u003C\u002FFormControl>\n        \u003CFormDescription \u002F>\n        \u003CFormMessage \u002F>\n      \u003C\u002FFormItem>\n    \u003C\u002FFormField>\n  \u003C\u002FForm>\n\u003C\u002Ftemplate>\n```\n\n## Example\n\n::::tabs{default-value=\"component\"}\n\n  :::tabs-list\n\n    ::tabs-trigger{value=\"component\"}\n    Component\n    ::\n\n    ::tabs-trigger{value=\"native\"}\n    Native\n    ::\n\n  :::\n\n  ::tabs-content{value=\"component\"}\n\n  #### `Input` Component\n\n  ```vue showLineNumbers\n  \u003Ctemplate>\n    \u003CFormField v-slot=\"{ componentField }\">\n      \u003CFormItem>\n        \u003CFormLabel>Username\u003C\u002FFormLabel>\n        \u003CFormControl>\n          \u003CInput placeholder=\"shadcn\" v-bind=\"componentField\" \u002F>\n        \u003C\u002FFormControl>\n        \u003CFormDescription \u002F>\n        \u003CFormMessage \u002F>\n      \u003C\u002FFormItem>\n    \u003C\u002FFormField>\n  \u003C\u002Ftemplate>\n  ```\n\n  ::\n\n  ::tabs-content{value=\"native\"}\n\n  #### native `input` element\n\n  ```vue showLineNumbers\n  \u003Ctemplate>\n    \u003CFormField v-slot=\"{ field }\">\n      \u003CFormItem>\n        \u003CFormLabel>Username\u003C\u002FFormLabel>\n        \u003CFormControl>\n          \u003Cinput placeholder=\"shadcn\" v-bind=\"field\">\n        \u003C\u002FFormControl>\n        \u003CFormDescription \u002F>\n        \u003CFormMessage \u002F>\n      \u003C\u002FFormItem>\n    \u003C\u002FFormField>\n  \u003C\u002Ftemplate>\n  ```\n\n  ::\n::::\n\n## Installation\n\n:::::tabs{default-value=\"cli\"}\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\n  npx shadcn-vue@latest add form\n  ```\n\n  ::\n\n  ::::tabs-content{value=\"manual\"}\n\n    :::steps\n      ::step\n      Install the following dependency:\n      ::\n\n      ```bash\n      npm install reka-ui vee-validate @vee-validate\u002Fzod zod\n      ```\n\n      ::step\n      Copy and paste the [GitHub source code](https:\u002F\u002Fgithub.com\u002Funovue\u002Fshadcn-vue\u002Ftree\u002Fdev\u002Fapps\u002Fv4\u002Fregistry\u002Fnew-york-v4\u002Fui\u002Fform) into your project.\n      ::\n\n      ::step\n      Update the import paths to match your project setup.\n      ::\n    :::\n\n  ::::\n\n:::::\n\n## Usage\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@\u002Fcomponents\u002Fui\u002Fform'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CFormField v-slot=\"{ componentField }\" name=\"username\">\n    \u003CFormItem>\n      \u003CFormLabel>Username\u003C\u002FFormLabel>\n      \u003CFormControl>\n        \u003CInput placeholder=\"shadcn\" v-bind=\"componentField\" \u002F>\n      \u003C\u002FFormControl>\n      \u003CFormDescription>\n        This is your public display name.\n      \u003C\u002FFormDescription>\n      \u003CFormMessage \u002F>\n    \u003C\u002FFormItem>\n  \u003C\u002FFormField>\n\u003C\u002Ftemplate>\n```\n\n### Create a form schema\n\n  Define the shape of your form using a Zod schema. You can read more about using Zod in the [Zod documentation](https:\u002F\u002Fzod.dev).\n\n  Use `@vee-validate\u002Fzod` to integrate Zod schema validation with `vee-validate`\n\n  `toTypedSchema` also makes the form values and submitted values typed automatically and caters for both input and output types of that schema.\n\n  ```vue showLineNumbers {2-3,5-7}\n  \u003Cscript setup lang=\"ts\">\n  import { toTypedSchema } from '@vee-validate\u002Fzod'\n  import * as z from 'zod'\n\n  const formSchema = toTypedSchema(z.object({\n    username: z.string().min(2).max(50),\n  }))\n  \u003C\u002Fscript>\n  ```\n\n### Define a form\n\n  Use the `useForm` composable from `vee-validate` or use `\u003CForm \u002F>` component to create a form.\n\n  ::::tabs{default-value=\"composition\"}\n\n    :::tabs-list\n\n      ::tabs-trigger{value=\"composition\"}\n      Composition\n      ::\n\n      ::tabs-trigger{value=\"component\"}\n      Component\n      ::\n\n    :::\n\n    ::tabs-content{value=\"composition\"}\n\n    ```vue showLineNumbers {2,19-21}\n    \u003Cscript setup lang=\"ts\">\n    import { useForm } from 'vee-validate'\n    import { toTypedSchema } from '@vee-validate\u002Fzod'\n    import * as z from 'zod'\n\n    import {\n      FormControl,\n      FormDescription,\n      FormField,\n      FormItem,\n      FormLabel,\n      FormMessage\n    } from '@\u002Fcomponents\u002Fui\u002Fform'\n\n    const formSchema = toTypedSchema(z.object({\n      username: z.string().min(2).max(50),\n    }))\n\n    const form = useForm({\n      validationSchema: formSchema,\n    })\n\n    const onSubmit = form.handleSubmit((values) => {\n      console.log('Form submitted!', values)\n    })\n    \u003C\u002Fscript>\n\n    \u003Ctemplate>\n      \u003Cform @submit=\"onSubmit\">\n        ...\n      \u003C\u002Fform>\n    \u003C\u002Ftemplate>\n    ```\n\n    ::\n\n    ::tabs-content{value=\"component\"}\n\n    ```vue showLineNumbers {5,24-26}\n    \u003Cscript setup lang=\"ts\">\n    import { toTypedSchema } from '@vee-validate\u002Fzod'\n    import * as z from 'zod'\n    import {\n      Form,\n      FormControl,\n      FormDescription,\n      FormField,\n      FormItem,\n      FormLabel,\n      FormMessage\n    } from '@\u002Fcomponents\u002Fui\u002Fform'\n\n    const formSchema = toTypedSchema(z.object({\n      username: z.string().min(2).max(50),\n    }))\n\n    function onSubmit(values) {\n      console.log('Form submitted!', values)\n    }\n    \u003C\u002Fscript>\n\n    \u003Ctemplate>\n      \u003CForm :validation-schema=\"formSchema\" @submit=\"onSubmit\">\n        ...\n      \u003C\u002FForm>\n    \u003C\u002Ftemplate>\n    ```\n\n    ::\n\n### Build your form\n\n  Based on last step we can either use `\u003CForm \u002F>` component or `useForm` composable\n  `useForm` is recommended because values are typed automatically\n\n  ```vue showLineNumbers {2}\n  \u003Cscript setup lang=\"ts\">\n  import { toTypedSchema } from '@vee-validate\u002Fzod'\n  import { useForm } from 'vee-validate'\n  import * as z from 'zod'\n\n  import { Button } from '@\u002Fcomponents\u002Fui\u002Fbutton'\n  import {\n    FormControl,\n    FormDescription,\n    FormField,\n    FormItem,\n    FormLabel,\n    FormMessage,\n  } from '@\u002Fcomponents\u002Fui\u002Fform'\n  import { Input } from '@\u002Fcomponents\u002Fui\u002Finput'\n\n  const formSchema = toTypedSchema(z.object({\n    username: z.string().min(2).max(50),\n  }))\n\n  const form = useForm({\n    validationSchema: formSchema,\n  })\n\n  const onSubmit = form.handleSubmit((values) => {\n    console.log('Form submitted!', values)\n  })\n  \u003C\u002Fscript>\n\n  \u003Ctemplate>\n    \u003Cform @submit=\"onSubmit\">\n      \u003CFormField v-slot=\"{ componentField }\" name=\"username\">\n        \u003CFormItem>\n          \u003CFormLabel>Username\u003C\u002FFormLabel>\n          \u003CFormControl>\n            \u003CInput type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" \u002F>\n          \u003C\u002FFormControl>\n          \u003CFormDescription>\n            This is your public display name.\n          \u003C\u002FFormDescription>\n          \u003CFormMessage \u002F>\n        \u003C\u002FFormItem>\n      \u003C\u002FFormField>\n      \u003CButton type=\"submit\">\n        Submit\n      \u003C\u002FButton>\n    \u003C\u002Fform>\n  \u003C\u002Ftemplate>\n  ```\n\n### Done\n\n  That's it. You now have a fully accessible form that is type-safe with client-side validation.\n\n  ::component-preview\n  ---\n  name: InputForm\n  class: '[&_[role=tablist]]:hidden [&>div>div:first-child]:hidden'\n  ---\n  ::\n\n::::\n\n\u003C!-- ## Extras\n\nThis example shows how to add motion to your forms with [Formkit AutoAnimate](https:\u002F\u002Fauto-animate.formkit.com\u002F)\n\n**Note:** You need to install `@formkit\u002Fauto-animate` to use this feature:\n\n```bash\nnpm install @formkit\u002Fauto-animate\n```\n\n::component-preview\n---\nname: InputFormAutoAnimate\n---\n:: -->\n",{"title":125,"description":926},"gW7hdFT421DvsW3SvtwlhGQi5NwwkkHQwzyZwFz9wPI",[935,936],{"title":121,"path":122,"stem":123,"children":-1},{"title":129,"path":130,"stem":131,"children":-1},1788943234007]