[{"data":1,"prerenderedAt":1406},["ShallowReactive",2],{"navigation":3,"$f2vxmxe0ttlw1b":470,"\u002Fdocs\u002Fcomponents\u002Ffield":481,"surround-\u002Fdocs\u002Fcomponents\u002Ffield":1403},[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":121,"body":483,"description":1396,"extension":1397,"links":1398,"meta":1399,"navigation":204,"new":18,"path":122,"rawbody":1400,"seo":1401,"stem":123,"__hash__":1402},"content\u002Fdocs\u002Fcomponents\u002Ffield.md",{"type":484,"value":485,"toc":1362},"minimark",[486,494,498,509,513,522,526,533,539,569,572,576,582,585,589,592,596,599,603,607,612,615,620,624,628,631,635,639,659,664,668,681,686,690,702,743,750,754,782,789,793,822,826,829,835,872,878,881,891,934,940,957,960,966,992,998,1001,1004,1060,1066,1069,1072,1098,1104,1107,1113,1155,1161,1165,1170,1196,1202,1206,1209,1235,1241,1244,1250,1276,1282,1285,1296,1335,1341,1347],[487,488],"component-preview",{"className":489,"name":493},[490,491,492],"[&_.preview]:h-[800px]","[&_.preview]:p-6","md:[&_.preview]:h-[850px]","FieldDemo",[495,496,299],"h2",{"id":497},"installation",[499,500,506],"pre",{"className":501,"code":503,"language":504,"meta":505},[502],"language-bash","npx shadcn-vue@latest add field\n","bash","",[507,508,503],"code",{"__ignoreMap":505},[495,510,512],{"id":511},"usage","Usage",[499,514,520],{"className":515,"code":517,"language":518,"meta":519},[516],"language-vue","\u003Cscript setup lang=\"ts\">\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from '@\u002Fcomponents\u002Fui\u002Ffield'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CFieldSet>\n    \u003CFieldLegend>Profile\u003C\u002FFieldLegend>\n    \u003CFieldDescription>This appears on invoices and emails.\u003C\u002FFieldDescription>\n    \u003CFieldGroup>\n      \u003CField>\n        \u003CFieldLabel for=\"name\">\n          Full name\n        \u003C\u002FFieldLabel>\n        \u003CInput id=\"name\" autocomplete=\"off\" placeholder=\"Evil Rabbit\" \u002F>\n        \u003CFieldDescription>This appears on invoices and emails.\u003C\u002FFieldDescription>\n      \u003C\u002FField>\n      \u003CField>\n        \u003CFieldLabel for=\"username\">\n          Username\n        \u003C\u002FFieldLabel>\n        \u003CInput id=\"username\" autocomplete=\"off\" aria-invalid \u002F>\n        \u003CFieldError>Choose another username.\u003C\u002FFieldError>\n      \u003C\u002FField>\n      \u003CField orientation=\"horizontal\">\n        \u003CSwitch id=\"newsletter\" \u002F>\n        \u003CFieldLabel for=\"newsletter\">\n          Subscribe to the newsletter\n        \u003C\u002FFieldLabel>\n      \u003C\u002FField>\n    \u003C\u002FFieldGroup>\n  \u003C\u002FFieldSet>\n\u003C\u002Ftemplate>\n","vue","showLineNumbers",[507,521,517],{"__ignoreMap":505},[495,523,525],{"id":524},"anatomy","Anatomy",[527,528,529,530,532],"p",{},"The ",[507,531,121],{}," family is designed for composing accessible forms. A typical field is structured as follows:",[499,534,537],{"className":535,"code":536,"language":518,"meta":519},[516],"\u003Ctemplate>\n  \u003CField>\n    \u003CFieldLabel for=\"input-id\">\n      Label\n    \u003C\u002FFieldLabel>\n    \u003C!-- Input, Select, Switch, etc. -->\n    \u003CFieldDescription>Optional helper text.\u003C\u002FFieldDescription>\n    \u003CFieldError>Validation message.\u003C\u002FFieldError>\n  \u003C\u002FField>\n\u003C\u002Ftemplate>\n",[507,538,536],{"__ignoreMap":505},[540,541,542,548,554],"ul",{},[543,544,545,547],"li",{},[507,546,121],{}," is the core wrapper for a single field.",[543,549,550,553],{},[507,551,552],{},"FieldContent"," is a flex column that groups label and description. Not required if you have no description.",[543,555,556,557,560,561,564,565,568],{},"Wrap related fields with ",[507,558,559],{},"FieldGroup",", and use ",[507,562,563],{},"FieldSet"," with ",[507,566,567],{},"FieldLegend"," for semantic grouping.",[495,570,372],{"id":571},"examples",[573,574,133],"h3",{"id":575},"input",[487,577],{"className":578,"name":580,"previewClass":581},[579,491],"!mb-4","FieldInputDemo","h-80",[573,583,274],{"id":584},"textarea",[487,586],{"className":587,"name":588},[579,491],"FieldTextareaDemo",[573,590,222],{"id":591},"select",[487,593],{"className":594,"name":595},[579,491],"FieldSelectDemo",[573,597,242],{"id":598},"slider",[487,600],{"className":601,"name":602},[579,491],"FieldSliderDemo",[573,604,606],{"id":605},"fieldset","Fieldset",[487,608],{"className":609,"name":610,"previewClass":611},[579,491],"FieldFieldsetDemo","h-80 sm:h-72",[573,613,77],{"id":614},"checkbox",[487,616],{"className":617,"name":618,"previewClass":619},[579,491],"FieldCheckboxDemo","h-[26rem] sm:h-96",[573,621,623],{"id":622},"radio","Radio",[487,625],{"className":626,"name":627},[579,491],"FieldRadioDemo",[573,629,258],{"id":630},"switch",[487,632],{"className":633,"name":634},[579,491],"FieldSwitchDemo",[573,636,638],{"id":637},"choice-card","Choice Card",[527,640,641,642,644,645,648,649,652,653,655,656,658],{},"Wrap ",[507,643,121],{}," components inside ",[507,646,647],{},"FieldLabel"," to create selectable field groups. This works with ",[507,650,651],{},"RadioItem",", ",[507,654,77],{}," and ",[507,657,258],{}," components.",[487,660],{"className":661,"name":662,"previewClass":663},[579,491],"FieldChoiceCardDemo","h-88 sm:h-72",[573,665,667],{"id":666},"field-group","Field Group",[527,669,670,671,673,674,676,677,680],{},"Stack ",[507,672,121],{}," components with ",[507,675,559],{},". Add ",[507,678,679],{},"FieldSeparator"," to divide them.",[487,682],{"className":683,"name":684,"previewClass":685},[579,491],"FieldGroupDemo","h-96 sm:h-88",[495,687,689],{"id":688},"responsive-layout","Responsive Layout",[527,691,692,693],{},"If you are in tailwindcss v3 you need to install ",[694,695,699],"a",{"href":696,"rel":697},"https:\u002F\u002Fgithub.com\u002Ftailwindlabs\u002Ftailwindcss-container-queries",[698],"nofollow",[507,700,701],{},"@tailwindcss\u002Fcontainer-queries",[540,703,704,711,727],{},[543,705,706,710],{},[707,708,709],"strong",{},"Vertical fields:"," Default orientation stacks label, control, and helper text—ideal for mobile-first layouts.",[543,712,713,716,717,720,721,723,724,726],{},[707,714,715],{},"Horizontal fields:"," Set ",[507,718,719],{},"orientation=\"horizontal\""," on ",[507,722,121],{}," to align the label and control side-by-side. Pair with ",[507,725,552],{}," to keep descriptions aligned.",[543,728,729,716,732,735,736,739,740,742],{},[707,730,731],{},"Responsive fields:",[507,733,734],{},"orientation=\"responsive\""," for automatic column layouts inside container-aware parents. Apply ",[507,737,738],{},"@container\u002Ffield-group"," classes on ",[507,741,559],{}," to switch orientations at specific breakpoints.",[487,744],{"className":745,"name":749},[579,746,491,747,748],"[&_.preview]:h-[650px]","[&_.preview]:md:h-[500px]","[&_.preview]:md:p-10","FieldResponsiveDemo",[495,751,753],{"id":752},"validation-and-errors","Validation and Errors",[540,755,756,766,772],{},[543,757,758,759,762,763,765],{},"Add ",[507,760,761],{},"data-invalid"," to ",[507,764,121],{}," to switch the entire block into an error state.",[543,767,758,768,771],{},[507,769,770],{},"aria-invalid"," on the input itself for assistive technologies.",[543,773,774,775,778,779,781],{},"Render ",[507,776,777],{},"FieldError"," immediately after the control or inside ",[507,780,552],{}," to keep error messages aligned with the field.",[499,783,787],{"className":784,"code":785,"language":518,"meta":786},[516],"\u003Ctemplate>\n  \u003CField data-invalid>\n    \u003CFieldLabel for=\"email\">\n      Email\n    \u003C\u002FFieldLabel>\n    \u003CInput id=\"email\" type=\"email\" aria-invalid \u002F>\n    \u003CFieldError>Enter a valid email address.\u003C\u002FFieldError>\n  \u003C\u002FField>\n\u003C\u002Ftemplate>\n","showLineNumbers \u002Fdata-invalid\u002F \u002Faria-invalid\u002F",[507,788,785],{"__ignoreMap":505},[495,790,792],{"id":791},"accessibility","Accessibility",[540,794,795,802,816],{},[543,796,797,655,799,801],{},[507,798,563],{},[507,800,567],{}," keep related controls grouped for keyboard and assistive tech users.",[543,803,804,806,807,810,811,655,813,815],{},[507,805,121],{}," outputs ",[507,808,809],{},"role=\"group\""," so nested controls inherit labeling from ",[507,812,647],{},[507,814,567],{}," when combined.",[543,817,818,819,821],{},"Apply ",[507,820,679],{}," sparingly to ensure screen readers encounter clear section boundaries.",[495,823,825],{"id":824},"api-reference","API Reference",[573,827,563],{"id":828},"fieldset-1",[527,830,831,832,834],{},"Container that renders a semantic ",[507,833,605],{}," with spacing presets.",[836,837,838,854],"table",{},[839,840,841],"thead",{},[842,843,844,848,851],"tr",{},[845,846,847],"th",{},"Prop",[845,849,850],{},"Type",[845,852,853],{},"Default",[855,856,857],"tbody",{},[842,858,859,865,870],{},[860,861,862],"td",{},[507,863,864],{},"class",[860,866,867],{},[507,868,869],{},"string",[860,871],{},[499,873,876],{"className":874,"code":875,"language":518,"meta":505},[516],"\u003Ctemplate>\n  \u003CFieldSet>\n    \u003CFieldLegend>Delivery\u003C\u002FFieldLegend>\n    \u003CFieldGroup>\n      \u003C!-- Fields -->\n    \u003C\u002FFieldGroup>\n  \u003C\u002FFieldSet>\n\u003C\u002Ftemplate>\n",[507,877,875],{"__ignoreMap":505},[573,879,567],{"id":880},"fieldlegend",[527,882,883,884,886,887,890],{},"Legend element for a ",[507,885,563],{},". Switch to the ",[507,888,889],{},"label"," variant to align with label sizing.",[836,892,893,903],{},[839,894,895],{},[842,896,897,899,901],{},[845,898,847],{},[845,900,850],{},[845,902,853],{},[855,904,905,922],{},[842,906,907,912,917],{},[860,908,909],{},[507,910,911],{},"variant",[860,913,914],{},[507,915,916],{},"\"legend\" | \"label\"",[860,918,919],{},[507,920,921],{},"\"legend\"",[842,923,924,928,932],{},[860,925,926],{},[507,927,864],{},[860,929,930],{},[507,931,869],{},[860,933],{},[499,935,938],{"className":936,"code":937,"language":518,"meta":505},[516],"\u003CFieldLegend variant=\"label\">\nNotification Preferences\n\u003C\u002FFieldLegend>\n",[507,939,937],{"__ignoreMap":505},[527,941,529,942,944,945,655,948,950,951,953,954,956],{},[507,943,567],{}," has two variants: ",[507,946,947],{},"legend",[507,949,889],{},". The ",[507,952,889],{}," variant applies label sizing and alignment. Handy if you have nested ",[507,955,563],{},".",[573,958,559],{"id":959},"fieldgroup",[527,961,962,963,965],{},"Layout wrapper that stacks ",[507,964,121],{}," components and enables container queries for responsive orientations.",[836,967,968,978],{},[839,969,970],{},[842,971,972,974,976],{},[845,973,847],{},[845,975,850],{},[845,977,853],{},[855,979,980],{},[842,981,982,986,990],{},[860,983,984],{},[507,985,864],{},[860,987,988],{},[507,989,869],{},[860,991],{},[499,993,996],{"className":994,"code":995,"language":518,"meta":505},[516],"\u003Ctemplate>\n  \u003CFieldGroup class=\"@container\u002Ffield-group flex flex-col gap-6\">\n    \u003CField>\u003C!-- Fields -->\u003C\u002FField>\n    \u003CField>\u003C!-- Fields -->\u003C\u002FField>\n  \u003C\u002FFieldGroup>\n\u003C\u002Ftemplate>\n",[507,997,995],{"__ignoreMap":505},[573,999,121],{"id":1000},"field",[527,1002,1003],{},"The core wrapper for a single field. Provides orientation control, invalid state styling, and spacing.",[836,1005,1006,1016],{},[839,1007,1008],{},[842,1009,1010,1012,1014],{},[845,1011,847],{},[845,1013,850],{},[845,1015,853],{},[855,1017,1018,1035,1047],{},[842,1019,1020,1025,1030],{},[860,1021,1022],{},[507,1023,1024],{},"orientation",[860,1026,1027],{},[507,1028,1029],{},"\"vertical\" | \"horizontal\" | \"responsive\"",[860,1031,1032],{},[507,1033,1034],{},"\"vertical\"",[842,1036,1037,1041,1045],{},[860,1038,1039],{},[507,1040,864],{},[860,1042,1043],{},[507,1044,869],{},[860,1046],{},[842,1048,1049,1053,1058],{},[860,1050,1051],{},[507,1052,761],{},[860,1054,1055],{},[507,1056,1057],{},"boolean",[860,1059],{},[499,1061,1064],{"className":1062,"code":1063,"language":518,"meta":505},[516],"\u003CField orientation=\"horizontal\">\n  \u003CFieldLabel for=\"remember\">Remember me\u003C\u002FFieldLabel>\n  \u003CSwitch id=\"remember\" \u002F>\n\u003C\u002FField>\n",[507,1065,1063],{"__ignoreMap":505},[573,1067,552],{"id":1068},"fieldcontent",[527,1070,1071],{},"Flex column that groups control and descriptions when the label sits beside the control. Not required if you have no description.",[836,1073,1074,1084],{},[839,1075,1076],{},[842,1077,1078,1080,1082],{},[845,1079,847],{},[845,1081,850],{},[845,1083,853],{},[855,1085,1086],{},[842,1087,1088,1092,1096],{},[860,1089,1090],{},[507,1091,864],{},[860,1093,1094],{},[507,1095,869],{},[860,1097],{},[499,1099,1102],{"className":1100,"code":1101,"language":518,"meta":505},[516],"\u003CField>\n  \u003CCheckbox id=\"notifications\" \u002F>\n  \u003CFieldContent>\n    \u003CFieldLabel for=\"notifications\">Notifications\u003C\u002FFieldLabel>\n    \u003CFieldDescription>Email, SMS, and push options.\u003C\u002FFieldDescription>\n  \u003C\u002FFieldContent>\n\u003C\u002FField>\n",[507,1103,1101],{"__ignoreMap":505},[573,1105,647],{"id":1106},"fieldlabel",[527,1108,1109,1110,1112],{},"Label styled for both direct inputs and nested ",[507,1111,121],{}," children.",[836,1114,1115,1125],{},[839,1116,1117],{},[842,1118,1119,1121,1123],{},[845,1120,847],{},[845,1122,850],{},[845,1124,853],{},[855,1126,1127,1139],{},[842,1128,1129,1133,1137],{},[860,1130,1131],{},[507,1132,864],{},[860,1134,1135],{},[507,1136,869],{},[860,1138],{},[842,1140,1141,1146,1150],{},[860,1142,1143],{},[507,1144,1145],{},"asChild",[860,1147,1148],{},[507,1149,1057],{},[860,1151,1152],{},[507,1153,1154],{},"false",[499,1156,1159],{"className":1157,"code":1158,"language":518,"meta":505},[516],"\u003CFieldLabel for=\"email\">\nEmail\n\u003C\u002FFieldLabel>\n",[507,1160,1158],{"__ignoreMap":505},[573,1162,1164],{"id":1163},"fieldtitle","FieldTitle",[527,1166,1167,1168,956],{},"Renders a title with label styling inside ",[507,1169,552],{},[836,1171,1172,1182],{},[839,1173,1174],{},[842,1175,1176,1178,1180],{},[845,1177,847],{},[845,1179,850],{},[845,1181,853],{},[855,1183,1184],{},[842,1185,1186,1190,1194],{},[860,1187,1188],{},[507,1189,864],{},[860,1191,1192],{},[507,1193,869],{},[860,1195],{},[499,1197,1200],{"className":1198,"code":1199,"language":518,"meta":505},[516],"\u003CFieldContent>\n  \u003CFieldTitle>Enable Touch ID\u003C\u002FFieldTitle>\n  \u003CFieldDescription>Unlock your device faster.\u003C\u002FFieldDescription>\n\u003C\u002FFieldContent>\n",[507,1201,1199],{"__ignoreMap":505},[573,1203,1205],{"id":1204},"fielddescription","FieldDescription",[527,1207,1208],{},"Helper text slot that automatically balances long lines in horizontal layouts.",[836,1210,1211,1221],{},[839,1212,1213],{},[842,1214,1215,1217,1219],{},[845,1216,847],{},[845,1218,850],{},[845,1220,853],{},[855,1222,1223],{},[842,1224,1225,1229,1233],{},[860,1226,1227],{},[507,1228,864],{},[860,1230,1231],{},[507,1232,869],{},[860,1234],{},[499,1236,1239],{"className":1237,"code":1238,"language":518,"meta":505},[516],"\u003CFieldDescription>\nWe never share your email with anyone.\n\u003C\u002FFieldDescription>\n",[507,1240,1238],{"__ignoreMap":505},[573,1242,679],{"id":1243},"fieldseparator",[527,1245,1246,1247,1249],{},"Visual divider to separate sections inside a ",[507,1248,559],{},". Accepts optional inline content.",[836,1251,1252,1262],{},[839,1253,1254],{},[842,1255,1256,1258,1260],{},[845,1257,847],{},[845,1259,850],{},[845,1261,853],{},[855,1263,1264],{},[842,1265,1266,1270,1274],{},[860,1267,1268],{},[507,1269,864],{},[860,1271,1272],{},[507,1273,869],{},[860,1275],{},[499,1277,1280],{"className":1278,"code":1279,"language":518,"meta":505},[516],"\u003CFieldSeparator>\nOr continue with\n\u003C\u002FFieldSeparator>\n",[507,1281,1279],{"__ignoreMap":505},[573,1283,777],{"id":1284},"fielderror",[527,1286,1287,1288,1291,1292,1295],{},"Accessible error container that accepts children or an ",[507,1289,1290],{},"errors"," array (e.g., from ",[507,1293,1294],{},"vee-validate",").",[836,1297,1298,1308],{},[839,1299,1300],{},[842,1301,1302,1304,1306],{},[845,1303,847],{},[845,1305,850],{},[845,1307,853],{},[855,1309,1310,1323],{},[842,1311,1312,1316,1321],{},[860,1313,1314],{},[507,1315,1290],{},[860,1317,1318],{},[507,1319,1320],{},"Array\u003C{ message?: string } | undefined>",[860,1322],{},[842,1324,1325,1329,1333],{},[860,1326,1327],{},[507,1328,864],{},[860,1330,1331],{},[507,1332,869],{},[860,1334],{},[499,1336,1339],{"className":1337,"code":1338,"language":518,"meta":505},[516],"\u003CFieldError :errors=\"errors.username\" \u002F>\n",[507,1340,1338],{"__ignoreMap":505},[527,1342,1343,1344,1346],{},"When the ",[507,1345,1290],{}," array contains multiple messages, the component renders a list automatically.",[527,1348,1349,1351,1352,1357,1358,1361],{},[507,1350,777],{}," also accepts issues produced by any validator that implements ",[694,1353,1356],{"href":1354,"rel":1355},"https:\u002F\u002Fstandardschema.dev\u002F",[698],"Standard Schema",", including Zod, Valibot, and ArkType. Pass the ",[507,1359,1360],{},"issues"," array from the schema result directly to render a unified error list across libraries.",{"title":505,"searchDepth":1363,"depth":1363,"links":1364},2,[1365,1366,1367,1368,1381,1382,1383,1384],{"id":497,"depth":1363,"text":299},{"id":511,"depth":1363,"text":512},{"id":524,"depth":1363,"text":525},{"id":571,"depth":1363,"text":372,"children":1369},[1370,1372,1373,1374,1375,1376,1377,1378,1379,1380],{"id":575,"depth":1371,"text":133},3,{"id":584,"depth":1371,"text":274},{"id":591,"depth":1371,"text":222},{"id":598,"depth":1371,"text":242},{"id":605,"depth":1371,"text":606},{"id":614,"depth":1371,"text":77},{"id":622,"depth":1371,"text":623},{"id":630,"depth":1371,"text":258},{"id":637,"depth":1371,"text":638},{"id":666,"depth":1371,"text":667},{"id":688,"depth":1363,"text":689},{"id":752,"depth":1363,"text":753},{"id":791,"depth":1363,"text":792},{"id":824,"depth":1363,"text":825,"children":1385},[1386,1387,1388,1389,1390,1391,1392,1393,1394,1395],{"id":828,"depth":1371,"text":563},{"id":880,"depth":1371,"text":567},{"id":959,"depth":1371,"text":559},{"id":1000,"depth":1371,"text":121},{"id":1068,"depth":1371,"text":552},{"id":1106,"depth":1371,"text":647},{"id":1163,"depth":1371,"text":1164},{"id":1204,"depth":1371,"text":1205},{"id":1243,"depth":1371,"text":679},{"id":1284,"depth":1371,"text":777},"Combine labels, controls, and help text to compose accessible form fields and grouped inputs.","md",null,{"component":204},"---\ntitle: Field\ndescription: Combine labels, controls, and help text to compose accessible form fields and grouped inputs.\ncomponent: true\n---\n\n::component-preview\n---\nname: FieldDemo\nclass: '[&_.preview]:h-[800px] [&_.preview]:p-6 md:[&_.preview]:h-[850px]'\n---\n::\n\n## Installation\n\n```bash\nnpx shadcn-vue@latest add field\n```\n\n## Usage\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from '@\u002Fcomponents\u002Fui\u002Ffield'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CFieldSet>\n    \u003CFieldLegend>Profile\u003C\u002FFieldLegend>\n    \u003CFieldDescription>This appears on invoices and emails.\u003C\u002FFieldDescription>\n    \u003CFieldGroup>\n      \u003CField>\n        \u003CFieldLabel for=\"name\">\n          Full name\n        \u003C\u002FFieldLabel>\n        \u003CInput id=\"name\" autocomplete=\"off\" placeholder=\"Evil Rabbit\" \u002F>\n        \u003CFieldDescription>This appears on invoices and emails.\u003C\u002FFieldDescription>\n      \u003C\u002FField>\n      \u003CField>\n        \u003CFieldLabel for=\"username\">\n          Username\n        \u003C\u002FFieldLabel>\n        \u003CInput id=\"username\" autocomplete=\"off\" aria-invalid \u002F>\n        \u003CFieldError>Choose another username.\u003C\u002FFieldError>\n      \u003C\u002FField>\n      \u003CField orientation=\"horizontal\">\n        \u003CSwitch id=\"newsletter\" \u002F>\n        \u003CFieldLabel for=\"newsletter\">\n          Subscribe to the newsletter\n        \u003C\u002FFieldLabel>\n      \u003C\u002FField>\n    \u003C\u002FFieldGroup>\n  \u003C\u002FFieldSet>\n\u003C\u002Ftemplate>\n```\n\n## Anatomy\n\nThe `Field` family is designed for composing accessible forms. A typical field is structured as follows:\n\n```vue showLineNumbers\n\u003Ctemplate>\n  \u003CField>\n    \u003CFieldLabel for=\"input-id\">\n      Label\n    \u003C\u002FFieldLabel>\n    \u003C!-- Input, Select, Switch, etc. -->\n    \u003CFieldDescription>Optional helper text.\u003C\u002FFieldDescription>\n    \u003CFieldError>Validation message.\u003C\u002FFieldError>\n  \u003C\u002FField>\n\u003C\u002Ftemplate>\n```\n\n- `Field` is the core wrapper for a single field.\n- `FieldContent` is a flex column that groups label and description. Not required if you have no description.\n- Wrap related fields with `FieldGroup`, and use `FieldSet` with `FieldLegend` for semantic grouping.\n\n## Examples\n\n### Input\n\n::component-preview\n---\nname: FieldInputDemo\nclass: '!mb-4 [&_.preview]:p-6'\npreviewClass: h-80\n---\n::\n\n### Textarea\n\n::component-preview\n---\nname: FieldTextareaDemo\nclass: '!mb-4 [&_.preview]:p-6'\n---\n::\n\n### Select\n\n::component-preview\n---\nname: FieldSelectDemo\nclass: '!mb-4 [&_.preview]:p-6'\n---\n::\n\n### Slider\n\n::component-preview\n---\nname: FieldSliderDemo\nclass: '!mb-4 [&_.preview]:p-6'\n---\n::\n\n### Fieldset\n\n::component-preview\n---\nname: FieldFieldsetDemo\nclass: '!mb-4 [&_.preview]:p-6'\npreviewClass: h-80 sm:h-72\n---\n::\n\n### Checkbox\n\n::component-preview\n---\nname: FieldCheckboxDemo\nclass: '!mb-4 [&_.preview]:p-6'\npreviewClass: h-[26rem] sm:h-96\n---\n::\n\n### Radio\n\n::component-preview\n---\nname: FieldRadioDemo\nclass: '!mb-4 [&_.preview]:p-6'\n---\n::\n\n### Switch\n\n::component-preview\n---\nname: FieldSwitchDemo\nclass: '!mb-4 [&_.preview]:p-6'\n---\n::\n\n### Choice Card\n\nWrap `Field` components inside `FieldLabel` to create selectable field groups. This works with `RadioItem`, `Checkbox` and `Switch` components.\n\n::component-preview\n---\nname: FieldChoiceCardDemo\nclass: '!mb-4 [&_.preview]:p-6'\npreviewClass: h-88 sm:h-72\n---\n::\n\n### Field Group\n\nStack `Field` components with `FieldGroup`. Add `FieldSeparator` to divide them.\n\n::component-preview\n---\nname: FieldGroupDemo\nclass: '!mb-4 [&_.preview]:p-6'\npreviewClass: h-96 sm:h-88\n---\n::\n\n## Responsive Layout\n\nIf you are in tailwindcss v3 you need to install [`@tailwindcss\u002Fcontainer-queries`](https:\u002F\u002Fgithub.com\u002Ftailwindlabs\u002Ftailwindcss-container-queries)\n\n- **Vertical fields:** Default orientation stacks label, control, and helper text—ideal for mobile-first layouts.\n- **Horizontal fields:** Set `orientation=\"horizontal\"` on `Field` to align the label and control side-by-side. Pair with `FieldContent` to keep descriptions aligned.\n- **Responsive fields:** Set `orientation=\"responsive\"` for automatic column layouts inside container-aware parents. Apply `@container\u002Ffield-group` classes on `FieldGroup` to switch orientations at specific breakpoints.\n\n::component-preview\n---\nname: FieldResponsiveDemo\nclass: '!mb-4 [&_.preview]:h-[650px] [&_.preview]:p-6 [&_.preview]:md:h-[500px] [&_.preview]:md:p-10'\n---\n::\n\n## Validation and Errors\n\n- Add `data-invalid` to `Field` to switch the entire block into an error state.\n- Add `aria-invalid` on the input itself for assistive technologies.\n- Render `FieldError` immediately after the control or inside `FieldContent` to keep error messages aligned with the field.\n\n```vue showLineNumbers \u002Fdata-invalid\u002F \u002Faria-invalid\u002F\n\u003Ctemplate>\n  \u003CField data-invalid>\n    \u003CFieldLabel for=\"email\">\n      Email\n    \u003C\u002FFieldLabel>\n    \u003CInput id=\"email\" type=\"email\" aria-invalid \u002F>\n    \u003CFieldError>Enter a valid email address.\u003C\u002FFieldError>\n  \u003C\u002FField>\n\u003C\u002Ftemplate>\n```\n\n## Accessibility\n\n  - `FieldSet` and `FieldLegend` keep related controls grouped for keyboard and assistive tech users.\n  - `Field` outputs `role=\"group\"` so nested controls inherit labeling from `FieldLabel` and `FieldLegend` when combined.\n  - Apply `FieldSeparator` sparingly to ensure screen readers encounter clear section boundaries.\n\n## API Reference\n\n### FieldSet\n\nContainer that renders a semantic `fieldset` with spacing presets.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `class` | `string` |         |\n\n```vue\n\u003Ctemplate>\n  \u003CFieldSet>\n    \u003CFieldLegend>Delivery\u003C\u002FFieldLegend>\n    \u003CFieldGroup>\n      \u003C!-- Fields -->\n    \u003C\u002FFieldGroup>\n  \u003C\u002FFieldSet>\n\u003C\u002Ftemplate>\n```\n\n### FieldLegend\n\nLegend element for a `FieldSet`. Switch to the `label` variant to align with label sizing.\n\n| Prop        | Type                  | Default    |\n| ----------- | --------------------- | ---------- |\n| `variant`   | `\"legend\" \\| \"label\"` | `\"legend\"` |\n| `class` | `string`              |            |\n\n```vue\n\u003CFieldLegend variant=\"label\">\nNotification Preferences\n\u003C\u002FFieldLegend>\n```\n\nThe `FieldLegend` has two variants: `legend` and `label`. The `label` variant applies label sizing and alignment. Handy if you have nested `FieldSet`.\n\n### FieldGroup\n\nLayout wrapper that stacks `Field` components and enables container queries for responsive orientations.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `class` | `string` |         |\n\n```vue\n\u003Ctemplate>\n  \u003CFieldGroup class=\"@container\u002Ffield-group flex flex-col gap-6\">\n    \u003CField>\u003C!-- Fields -->\u003C\u002FField>\n    \u003CField>\u003C!-- Fields -->\u003C\u002FField>\n  \u003C\u002FFieldGroup>\n\u003C\u002Ftemplate>\n```\n\n### Field\n\nThe core wrapper for a single field. Provides orientation control, invalid state styling, and spacing.\n\n| Prop           | Type                                         | Default      |\n| -------------- | -------------------------------------------- | ------------ |\n| `orientation`  | `\"vertical\" \\| \"horizontal\" \\| \"responsive\"` | `\"vertical\"` |\n| `class`    | `string`                                     |              |\n| `data-invalid` | `boolean`                                    |              |\n\n```vue\n\u003CField orientation=\"horizontal\">\n  \u003CFieldLabel for=\"remember\">Remember me\u003C\u002FFieldLabel>\n  \u003CSwitch id=\"remember\" \u002F>\n\u003C\u002FField>\n```\n\n### FieldContent\n\nFlex column that groups control and descriptions when the label sits beside the control. Not required if you have no description.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `class` | `string` |         |\n\n```vue\n\u003CField>\n  \u003CCheckbox id=\"notifications\" \u002F>\n  \u003CFieldContent>\n    \u003CFieldLabel for=\"notifications\">Notifications\u003C\u002FFieldLabel>\n    \u003CFieldDescription>Email, SMS, and push options.\u003C\u002FFieldDescription>\n  \u003C\u002FFieldContent>\n\u003C\u002FField>\n```\n\n### FieldLabel\n\nLabel styled for both direct inputs and nested `Field` children.\n\n| Prop        | Type      | Default |\n| ----------- | --------- | ------- |\n| `class` | `string`  |         |\n| `asChild`   | `boolean` | `false` |\n\n```vue\n\u003CFieldLabel for=\"email\">\nEmail\n\u003C\u002FFieldLabel>\n```\n\n### FieldTitle\n\nRenders a title with label styling inside `FieldContent`.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `class` | `string` |         |\n\n```vue\n\u003CFieldContent>\n  \u003CFieldTitle>Enable Touch ID\u003C\u002FFieldTitle>\n  \u003CFieldDescription>Unlock your device faster.\u003C\u002FFieldDescription>\n\u003C\u002FFieldContent>\n```\n\n### FieldDescription\n\nHelper text slot that automatically balances long lines in horizontal layouts.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `class` | `string` |         |\n\n```vue\n\u003CFieldDescription>\nWe never share your email with anyone.\n\u003C\u002FFieldDescription>\n```\n\n### FieldSeparator\n\nVisual divider to separate sections inside a `FieldGroup`. Accepts optional inline content.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `class` | `string` |         |\n\n```vue\n\u003CFieldSeparator>\nOr continue with\n\u003C\u002FFieldSeparator>\n```\n\n### FieldError\n\nAccessible error container that accepts children or an `errors` array (e.g., from `vee-validate`).\n\n| Prop        | Type                                       | Default |\n| ----------- | ------------------------------------------ | ------- |\n| `errors`    | `Array\u003C{ message?: string } \\| undefined>` |         |\n| `class` | `string`                                   |         |\n\n```vue\n\u003CFieldError :errors=\"errors.username\" \u002F>\n```\n\nWhen the `errors` array contains multiple messages, the component renders a list automatically.\n\n`FieldError` also accepts issues produced by any validator that implements [Standard Schema](https:\u002F\u002Fstandardschema.dev\u002F), including Zod, Valibot, and ArkType. Pass the `issues` array from the schema result directly to render a unified error list across libraries.\n",{"title":121,"description":1396},"c0Hgp0UiLBpDNj_5BVFRxEUOQOIKRMqsqhqQfe8dkqE",[1404,1405],{"title":117,"path":118,"stem":119,"children":-1},{"title":125,"path":126,"stem":127,"children":-1},1788943233954]