[{"data":1,"prerenderedAt":1338},["ShallowReactive",2],{"navigation":3,"$fMW9jOOkNpZriWVK3P_bZYNOyYR2IEPvrHsC7cDBlJJc":405,"/docs/components/field":418,"surround-/docs/components/field":1335},[4],{"title":5,"path":6,"stem":7,"children":8,"page":17},"Docs","/docs","docs",[9,90,353,360,366,379],{"path":6,"stem":7,"title":10,"type":11,"children":12},"Get Started","group",[13,19,44,48,52,70,74,78,82,86],{"title":14,"path":15,"stem":16,"new":17,"type":18,"children":-1},"Introduction","/docs/introduction","docs/01.introduction",false,"page",{"title":20,"path":21,"stem":22,"children":23,"new":17,"type":11},"Installation","/docs/installation","docs/02.installation",[24,28,32,36,40],{"title":25,"path":26,"stem":27,"new":17,"type":18,"children":-1},"Vite","/docs/installation/vite","docs/installation/01.vite",{"title":29,"path":30,"stem":31,"new":17,"type":18,"children":-1},"Nuxt","/docs/installation/nuxt","docs/installation/02.nuxt",{"title":33,"path":34,"stem":35,"new":17,"type":18,"children":-1},"Astro","/docs/installation/astro","docs/installation/03.astro",{"title":37,"path":38,"stem":39,"new":17,"type":18,"children":-1},"Laravel","/docs/installation/laravel","docs/installation/04.laravel",{"title":41,"path":42,"stem":43,"new":17,"type":18,"children":-1},"Manual Installation","/docs/installation/manual","docs/installation/05.manual",{"title":45,"path":46,"stem":47,"new":17,"type":18,"children":-1},"components.json","/docs/components-json","docs/03.components-json",{"title":49,"path":50,"stem":51,"new":17,"type":18,"children":-1},"Theming","/docs/theming","docs/04.theming",{"title":53,"path":54,"stem":55,"children":56,"new":17,"type":11},"Dark Mode","/docs/dark-mode","docs/05.dark-mode",[57,60,63,67],{"title":25,"path":58,"stem":59,"new":17,"type":18,"children":-1},"/docs/dark-mode/vite","docs/dark-mode/01.vite",{"title":29,"path":61,"stem":62,"new":17,"type":18,"children":-1},"/docs/dark-mode/nuxt","docs/dark-mode/02.nuxt",{"title":64,"path":65,"stem":66,"new":17,"type":18,"children":-1},"Vitepress","/docs/dark-mode/vitepress","docs/dark-mode/03.vitepress",{"title":33,"path":68,"stem":69,"new":17,"type":18,"children":-1},"/docs/dark-mode/astro","docs/dark-mode/04.astro",{"title":71,"path":72,"stem":73,"new":17,"type":18,"children":-1},"CLI","/docs/cli","docs/06.cli",{"title":75,"path":76,"stem":77,"new":17,"type":18,"children":-1},"JavaScript","/docs/javascript","docs/07.javascript",{"title":79,"path":80,"stem":81,"new":17,"type":18,"children":-1},"Figma","/docs/figma","docs/09.figma",{"title":83,"path":84,"stem":85,"new":17,"type":18,"children":-1},"Changelog","/docs/changelog","docs/10.changelog",{"title":87,"path":88,"stem":89,"new":17,"type":18,"children":-1},"Legacy Docs","/docs/legacy","docs/11.legacy",{"title":91,"path":92,"stem":93,"children":94,"new":17,"type":11},"Components","/docs/components","docs/02.components",[95,100,104,108,112,116,120,124,128,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289,293,297,301,305,309,313,317,321,325,329,333,337,341,345,349],{"title":96,"path":97,"stem":98,"new":17,"type":99,"children":-1},"Accordion","/docs/components/accordion","docs/components/accordion","component",{"title":101,"path":102,"stem":103,"new":17,"type":99,"children":-1},"Alert","/docs/components/alert","docs/components/alert",{"title":105,"path":106,"stem":107,"new":17,"type":99,"children":-1},"Alert Dialog","/docs/components/alert-dialog","docs/components/alert-dialog",{"title":109,"path":110,"stem":111,"new":17,"type":99,"children":-1},"Aspect Ratio","/docs/components/aspect-ratio","docs/components/aspect-ratio",{"title":113,"path":114,"stem":115,"new":17,"type":99,"children":-1},"Avatar","/docs/components/avatar","docs/components/avatar",{"title":117,"path":118,"stem":119,"new":17,"type":99,"children":-1},"Badge","/docs/components/badge","docs/components/badge",{"title":121,"path":122,"stem":123,"new":17,"type":99,"children":-1},"Breadcrumb","/docs/components/breadcrumb","docs/components/breadcrumb",{"title":125,"path":126,"stem":127,"new":17,"type":99,"children":-1},"Button","/docs/components/button","docs/components/button",{"title":129,"path":130,"stem":131,"new":132,"type":99,"children":-1},"Button Group","/docs/components/button-group","docs/components/button-group",true,{"title":134,"path":135,"stem":136,"new":17,"type":99,"children":-1},"Calendar","/docs/components/calendar","docs/components/calendar",{"title":138,"path":139,"stem":140,"new":17,"type":99,"children":-1},"Card","/docs/components/card","docs/components/card",{"title":142,"path":143,"stem":144,"new":17,"type":99,"children":-1},"Carousel","/docs/components/carousel","docs/components/carousel",{"title":146,"path":147,"stem":148,"new":17,"type":99,"children":-1},"Chart","/docs/components/chart","docs/components/chart",{"title":150,"path":151,"stem":152,"new":17,"type":99,"children":-1},"Checkbox","/docs/components/checkbox","docs/components/checkbox",{"title":154,"path":155,"stem":156,"new":17,"type":99,"children":-1},"Collapsible","/docs/components/collapsible","docs/components/collapsible",{"title":158,"path":159,"stem":160,"new":17,"type":99,"children":-1},"Combobox","/docs/components/combobox","docs/components/combobox",{"title":162,"path":163,"stem":164,"new":17,"type":99,"children":-1},"Command","/docs/components/command","docs/components/command",{"title":166,"path":167,"stem":168,"new":17,"type":99,"children":-1},"Context Menu","/docs/components/context-menu","docs/components/context-menu",{"title":170,"path":171,"stem":172,"new":17,"type":99,"children":-1},"Data Table","/docs/components/data-table","docs/components/data-table",{"title":174,"path":175,"stem":176,"new":17,"type":99,"children":-1},"Date Picker","/docs/components/date-picker","docs/components/date-picker",{"title":178,"path":179,"stem":180,"new":17,"type":99,"children":-1},"Dialog","/docs/components/dialog","docs/components/dialog",{"title":182,"path":183,"stem":184,"new":17,"type":99,"children":-1},"Drawer","/docs/components/drawer","docs/components/drawer",{"title":186,"path":187,"stem":188,"new":17,"type":99,"children":-1},"Dropdown Menu","/docs/components/dropdown-menu","docs/components/dropdown-menu",{"title":190,"path":191,"stem":192,"new":132,"type":99,"children":-1},"Empty","/docs/components/empty","docs/components/empty",{"title":194,"path":195,"stem":196,"new":132,"type":99,"children":-1},"Field","/docs/components/field","docs/components/field",{"title":198,"path":199,"stem":200,"new":17,"type":99,"children":-1},"Form","/docs/components/form","docs/components/form",{"title":202,"path":203,"stem":204,"new":17,"type":99,"children":-1},"Hover Card","/docs/components/hover-card","docs/components/hover-card",{"title":206,"path":207,"stem":208,"new":17,"type":99,"children":-1},"Input","/docs/components/input","docs/components/input",{"title":210,"path":211,"stem":212,"new":132,"type":99,"children":-1},"Input Group","/docs/components/input-group","docs/components/input-group",{"title":214,"path":215,"stem":216,"new":17,"type":99,"children":-1},"Input OTP","/docs/components/input-otp","docs/components/input-otp",{"title":218,"path":219,"stem":220,"new":132,"type":99,"children":-1},"Item","/docs/components/item","docs/components/item",{"title":222,"path":223,"stem":224,"new":132,"type":99,"children":-1},"Kbd","/docs/components/kbd","docs/components/kbd",{"title":226,"path":227,"stem":228,"new":17,"type":99,"children":-1},"Label","/docs/components/label","docs/components/label",{"title":230,"path":231,"stem":232,"new":17,"type":99,"children":-1},"Menubar","/docs/components/menubar","docs/components/menubar",{"title":234,"path":235,"stem":236,"new":132,"type":99,"children":-1},"Native Select","/docs/components/native-select","docs/components/native-select",{"title":238,"path":239,"stem":240,"new":17,"type":99,"children":-1},"Navigation Menu","/docs/components/navigation-menu","docs/components/navigation-menu",{"title":242,"path":243,"stem":244,"new":17,"type":99,"children":-1},"Number Field","/docs/components/number-field","docs/components/number-field",{"title":246,"path":247,"stem":248,"new":17,"type":99,"children":-1},"Pagination","/docs/components/pagination","docs/components/pagination",{"title":250,"path":251,"stem":252,"new":17,"type":99,"children":-1},"Pin Input","/docs/components/pin-input","docs/components/pin-input",{"title":254,"path":255,"stem":256,"new":17,"type":99,"children":-1},"Popover","/docs/components/popover","docs/components/popover",{"title":258,"path":259,"stem":260,"new":17,"type":99,"children":-1},"Progress","/docs/components/progress","docs/components/progress",{"title":262,"path":263,"stem":264,"new":17,"type":99,"children":-1},"Radio Group","/docs/components/radio-group","docs/components/radio-group",{"title":266,"path":267,"stem":268,"new":17,"type":99,"children":-1},"Range Calendar","/docs/components/range-calendar","docs/components/range-calendar",{"title":270,"path":271,"stem":272,"new":17,"type":99,"children":-1},"Resizable","/docs/components/resizable","docs/components/resizable",{"title":274,"path":275,"stem":276,"new":17,"type":99,"children":-1},"Scroll Area","/docs/components/scroll-area","docs/components/scroll-area",{"title":278,"path":279,"stem":280,"new":17,"type":99,"children":-1},"Select","/docs/components/select","docs/components/select",{"title":282,"path":283,"stem":284,"new":17,"type":99,"children":-1},"Separator","/docs/components/separator","docs/components/separator",{"title":286,"path":287,"stem":288,"new":17,"type":99,"children":-1},"Sheet","/docs/components/sheet","docs/components/sheet",{"title":290,"path":291,"stem":292,"new":17,"type":99,"children":-1},"Sidebar","/docs/components/sidebar","docs/components/sidebar",{"title":294,"path":295,"stem":296,"new":17,"type":99,"children":-1},"Skeleton","/docs/components/skeleton","docs/components/skeleton",{"title":298,"path":299,"stem":300,"new":17,"type":99,"children":-1},"Slider","/docs/components/slider","docs/components/slider",{"title":302,"path":303,"stem":304,"new":17,"type":99,"children":-1},"Sonner","/docs/components/sonner","docs/components/sonner",{"title":306,"path":307,"stem":308,"new":132,"type":99,"children":-1},"Spinner","/docs/components/spinner","docs/components/spinner",{"title":310,"path":311,"stem":312,"new":17,"type":99,"children":-1},"Stepper","/docs/components/stepper","docs/components/stepper",{"title":314,"path":315,"stem":316,"new":17,"type":99,"children":-1},"Switch","/docs/components/switch","docs/components/switch",{"title":318,"path":319,"stem":320,"new":17,"type":99,"children":-1},"Table","/docs/components/table","docs/components/table",{"title":322,"path":323,"stem":324,"new":17,"type":99,"children":-1},"Tabs","/docs/components/tabs","docs/components/tabs",{"title":326,"path":327,"stem":328,"new":17,"type":99,"children":-1},"Tags Input","/docs/components/tags-input","docs/components/tags-input",{"title":330,"path":331,"stem":332,"new":17,"type":99,"children":-1},"Textarea","/docs/components/textarea","docs/components/textarea",{"title":334,"path":335,"stem":336,"new":17,"type":99,"children":-1},"Toast","/docs/components/toast","docs/components/toast",{"title":338,"path":339,"stem":340,"new":17,"type":99,"children":-1},"Toggle","/docs/components/toggle","docs/components/toggle",{"title":342,"path":343,"stem":344,"new":17,"type":99,"children":-1},"Toggle Group","/docs/components/toggle-group","docs/components/toggle-group",{"title":346,"path":347,"stem":348,"new":17,"type":99,"children":-1},"Tooltip","/docs/components/tooltip","docs/components/tooltip",{"title":350,"path":351,"stem":352,"new":17,"type":99,"children":-1},"Typography","/docs/components/typography","docs/components/typography",{"title":20,"path":21,"stem":22,"children":354,"new":17,"type":11},[355,356,357,358,359],{"title":25,"path":26,"stem":27,"new":17,"type":18,"children":-1},{"title":29,"path":30,"stem":31,"new":17,"type":18,"children":-1},{"title":33,"path":34,"stem":35,"new":17,"type":18,"children":-1},{"title":37,"path":38,"stem":39,"new":17,"type":18,"children":-1},{"title":41,"path":42,"stem":43,"new":17,"type":18,"children":-1},{"title":53,"path":54,"stem":55,"children":361,"new":17,"type":11},[362,363,364,365],{"title":25,"path":58,"stem":59,"new":17,"type":18,"children":-1},{"title":29,"path":61,"stem":62,"new":17,"type":18,"children":-1},{"title":64,"path":65,"stem":66,"new":17,"type":18,"children":-1},{"title":33,"path":68,"stem":69,"new":17,"type":18,"children":-1},{"title":367,"path":368,"stem":369,"children":370,"new":17,"type":11},"Forms","/docs/forms","docs/forms",[371,375],{"title":372,"path":373,"stem":374,"new":17,"type":18,"children":-1},"VeeValidate","/docs/forms/vee-validate","docs/forms/01.vee-validate",{"title":376,"path":377,"stem":378,"new":17,"type":18,"children":-1},"TanStack Form","/docs/forms/tanstack-form","docs/forms/02.tanstack-form",{"title":380,"path":381,"stem":382,"children":383,"new":17,"type":11},"Registry","/docs/registry","docs/registry/index",[384,385,389,393,397,401],{"title":380,"path":381,"stem":382,"new":17,"type":18,"children":-1},{"title":386,"path":387,"stem":388,"new":17,"type":18,"children":-1},"Examples","/docs/registry/examples","docs/registry/examples",{"title":390,"path":391,"stem":392,"new":17,"type":18,"children":-1},"FAQ","/docs/registry/faq","docs/registry/faq",{"title":394,"path":395,"stem":396,"new":17,"type":18,"children":-1},"Getting Started","/docs/registry/getting-started","docs/registry/getting-started",{"title":398,"path":399,"stem":400,"new":17,"type":18,"children":-1},"registry-item.json","/docs/registry/registry-item-json","docs/registry/registry-item-json",{"title":402,"path":403,"stem":404,"new":17,"type":18,"children":-1},"registry.json","/docs/registry/registry-json","docs/registry/registry-json",{"repo":406},{"id":407,"name":408,"repo":409,"description":410,"createdAt":411,"updatedAt":412,"pushedAt":413,"stars":414,"watchers":415,"forks":416,"defaultBranch":417},658791894,"shadcn-vue","unovue/shadcn-vue","Vue port of shadcn-ui","2023-06-26T13:53:23Z","2026-04-06T17:33:41Z","2026-04-06T17:33:39Z",9706,37,634,"dev",{"id":419,"title":194,"body":420,"description":1328,"extension":1329,"links":1330,"meta":1331,"navigation":132,"new":132,"path":195,"rawbody":1332,"seo":1333,"stem":196,"__hash__":1334},"content/docs/components/field.md",{"type":421,"value":422,"toc":1294},"minimark",[423,431,435,446,450,459,463,470,476,506,509,513,518,521,525,528,532,535,539,543,547,550,554,558,562,565,569,573,593,597,601,614,618,622,634,675,682,686,714,721,725,754,758,761,767,804,810,813,823,866,872,889,892,898,924,930,933,936,992,998,1001,1004,1030,1036,1039,1045,1087,1093,1097,1102,1128,1134,1138,1141,1167,1173,1176,1182,1208,1214,1217,1228,1267,1273,1279],[424,425],"component-preview",{"className":426,"name":430},[427,428,429],"[&_.preview]:h-[800px]","[&_.preview]:p-6","md:[&_.preview]:h-[850px]","FieldDemo",[432,433,20],"h2",{"id":434},"installation",[436,437,443],"pre",{"className":438,"code":440,"language":441,"meta":442},[439],"language-bash","npx shadcn-vue@latest add field\n","bash","",[444,445,440],"code",{"__ignoreMap":442},[432,447,449],{"id":448},"usage","Usage",[436,451,457],{"className":452,"code":454,"language":455,"meta":456},[453],"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 '@/components/ui/field'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CFieldSet>\n    \u003CFieldLegend>Profile\u003C/FieldLegend>\n    \u003CFieldDescription>This appears on invoices and emails.\u003C/FieldDescription>\n    \u003CFieldGroup>\n      \u003CField>\n        \u003CFieldLabel for=\"name\">\n          Full name\n        \u003C/FieldLabel>\n        \u003CInput id=\"name\" autocomplete=\"off\" placeholder=\"Evil Rabbit\" />\n        \u003CFieldDescription>This appears on invoices and emails.\u003C/FieldDescription>\n      \u003C/Field>\n      \u003CField>\n        \u003CFieldLabel for=\"username\">\n          Username\n        \u003C/FieldLabel>\n        \u003CInput id=\"username\" autocomplete=\"off\" aria-invalid />\n        \u003CFieldError>Choose another username.\u003C/FieldError>\n      \u003C/Field>\n      \u003CField orientation=\"horizontal\">\n        \u003CSwitch id=\"newsletter\" />\n        \u003CFieldLabel for=\"newsletter\">\n          Subscribe to the newsletter\n        \u003C/FieldLabel>\n      \u003C/Field>\n    \u003C/FieldGroup>\n  \u003C/FieldSet>\n\u003C/template>\n","vue","showLineNumbers",[444,458,454],{"__ignoreMap":442},[432,460,462],{"id":461},"anatomy","Anatomy",[464,465,466,467,469],"p",{},"The ",[444,468,194],{}," family is designed for composing accessible forms. A typical field is structured as follows:",[436,471,474],{"className":472,"code":473,"language":455,"meta":456},[453],"\u003Ctemplate>\n  \u003CField>\n    \u003CFieldLabel for=\"input-id\">\n      Label\n    \u003C/FieldLabel>\n    \u003C!-- Input, Select, Switch, etc. -->\n    \u003CFieldDescription>Optional helper text.\u003C/FieldDescription>\n    \u003CFieldError>Validation message.\u003C/FieldError>\n  \u003C/Field>\n\u003C/template>\n",[444,475,473],{"__ignoreMap":442},[477,478,479,485,491],"ul",{},[480,481,482,484],"li",{},[444,483,194],{}," is the core wrapper for a single field.",[480,486,487,490],{},[444,488,489],{},"FieldContent"," is a flex column that groups label and description. Not required if you have no description.",[480,492,493,494,497,498,501,502,505],{},"Wrap related fields with ",[444,495,496],{},"FieldGroup",", and use ",[444,499,500],{},"FieldSet"," with ",[444,503,504],{},"FieldLegend"," for semantic grouping.",[432,507,386],{"id":508},"examples",[510,511,206],"h3",{"id":512},"input",[424,514],{"className":515,"name":517},[516,428],"!mb-4","FieldInputDemo",[510,519,330],{"id":520},"textarea",[424,522],{"className":523,"name":524},[516,428],"FieldTextareaDemo",[510,526,278],{"id":527},"select",[424,529],{"className":530,"name":531},[516,428],"FieldSelectDemo",[510,533,298],{"id":534},"slider",[424,536],{"className":537,"name":538},[516,428],"FieldSliderDemo",[510,540,542],{"id":541},"fieldset","Fieldset",[424,544],{"className":545,"name":546},[516,428],"FieldFieldsetDemo",[510,548,150],{"id":549},"checkbox",[424,551],{"className":552,"name":553},[516,428],"FieldCheckboxDemo",[510,555,557],{"id":556},"radio","Radio",[424,559],{"className":560,"name":561},[516,428],"FieldRadioDemo",[510,563,314],{"id":564},"switch",[424,566],{"className":567,"name":568},[516,428],"FieldSwitchDemo",[510,570,572],{"id":571},"choice-card","Choice Card",[464,574,575,576,578,579,582,583,586,587,589,590,592],{},"Wrap ",[444,577,194],{}," components inside ",[444,580,581],{},"FieldLabel"," to create selectable field groups. This works with ",[444,584,585],{},"RadioItem",", ",[444,588,150],{}," and ",[444,591,314],{}," components.",[424,594],{"className":595,"name":596},[516,428],"FieldChoiceCardDemo",[510,598,600],{"id":599},"field-group","Field Group",[464,602,603,604,606,607,609,610,613],{},"Stack ",[444,605,194],{}," components with ",[444,608,496],{},". Add ",[444,611,612],{},"FieldSeparator"," to divide them.",[424,615],{"className":616,"name":617},[516,428],"FieldGroupDemo",[432,619,621],{"id":620},"responsive-layout","Responsive Layout",[464,623,624,625],{},"If you are in tailwindcss v3 you need to install ",[626,627,631],"a",{"href":628,"rel":629},"https://github.com/tailwindlabs/tailwindcss-container-queries",[630],"nofollow",[444,632,633],{},"@tailwindcss/container-queries",[477,635,636,643,659],{},[480,637,638,642],{},[639,640,641],"strong",{},"Vertical fields:"," Default orientation stacks label, control, and helper text—ideal for mobile-first layouts.",[480,644,645,648,649,652,653,655,656,658],{},[639,646,647],{},"Horizontal fields:"," Set ",[444,650,651],{},"orientation=\"horizontal\""," on ",[444,654,194],{}," to align the label and control side-by-side. Pair with ",[444,657,489],{}," to keep descriptions aligned.",[480,660,661,648,664,667,668,671,672,674],{},[639,662,663],{},"Responsive fields:",[444,665,666],{},"orientation=\"responsive\""," for automatic column layouts inside container-aware parents. Apply ",[444,669,670],{},"@container/field-group"," classes on ",[444,673,496],{}," to switch orientations at specific breakpoints.",[424,676],{"className":677,"name":681},[516,678,428,679,680],"[&_.preview]:h-[650px]","[&_.preview]:md:h-[500px]","[&_.preview]:md:p-10","FieldResponsiveDemo",[432,683,685],{"id":684},"validation-and-errors","Validation and Errors",[477,687,688,698,704],{},[480,689,690,691,694,695,697],{},"Add ",[444,692,693],{},"data-invalid"," to ",[444,696,194],{}," to switch the entire block into an error state.",[480,699,690,700,703],{},[444,701,702],{},"aria-invalid"," on the input itself for assistive technologies.",[480,705,706,707,710,711,713],{},"Render ",[444,708,709],{},"FieldError"," immediately after the control or inside ",[444,712,489],{}," to keep error messages aligned with the field.",[436,715,719],{"className":716,"code":717,"language":455,"meta":718},[453],"\u003Ctemplate>\n  \u003CField data-invalid>\n    \u003CFieldLabel for=\"email\">\n      Email\n    \u003C/FieldLabel>\n    \u003CInput id=\"email\" type=\"email\" aria-invalid />\n    \u003CFieldError>Enter a valid email address.\u003C/FieldError>\n  \u003C/Field>\n\u003C/template>\n","showLineNumbers /data-invalid/ /aria-invalid/",[444,720,717],{"__ignoreMap":442},[432,722,724],{"id":723},"accessibility","Accessibility",[477,726,727,734,748],{},[480,728,729,589,731,733],{},[444,730,500],{},[444,732,504],{}," keep related controls grouped for keyboard and assistive tech users.",[480,735,736,738,739,742,743,589,745,747],{},[444,737,194],{}," outputs ",[444,740,741],{},"role=\"group\""," so nested controls inherit labeling from ",[444,744,581],{},[444,746,504],{}," when combined.",[480,749,750,751,753],{},"Apply ",[444,752,612],{}," sparingly to ensure screen readers encounter clear section boundaries.",[432,755,757],{"id":756},"api-reference","API Reference",[510,759,500],{"id":760},"fieldset-1",[464,762,763,764,766],{},"Container that renders a semantic ",[444,765,541],{}," with spacing presets.",[768,769,770,786],"table",{},[771,772,773],"thead",{},[774,775,776,780,783],"tr",{},[777,778,779],"th",{},"Prop",[777,781,782],{},"Type",[777,784,785],{},"Default",[787,788,789],"tbody",{},[774,790,791,797,802],{},[792,793,794],"td",{},[444,795,796],{},"class",[792,798,799],{},[444,800,801],{},"string",[792,803],{},[436,805,808],{"className":806,"code":807,"language":455,"meta":442},[453],"\u003Ctemplate>\n  \u003CFieldSet>\n    \u003CFieldLegend>Delivery\u003C/FieldLegend>\n    \u003CFieldGroup>\n      \u003C!-- Fields -->\n    \u003C/FieldGroup>\n  \u003C/FieldSet>\n\u003C/template>\n",[444,809,807],{"__ignoreMap":442},[510,811,504],{"id":812},"fieldlegend",[464,814,815,816,818,819,822],{},"Legend element for a ",[444,817,500],{},". Switch to the ",[444,820,821],{},"label"," variant to align with label sizing.",[768,824,825,835],{},[771,826,827],{},[774,828,829,831,833],{},[777,830,779],{},[777,832,782],{},[777,834,785],{},[787,836,837,854],{},[774,838,839,844,849],{},[792,840,841],{},[444,842,843],{},"variant",[792,845,846],{},[444,847,848],{},"\"legend\" | \"label\"",[792,850,851],{},[444,852,853],{},"\"legend\"",[774,855,856,860,864],{},[792,857,858],{},[444,859,796],{},[792,861,862],{},[444,863,801],{},[792,865],{},[436,867,870],{"className":868,"code":869,"language":455,"meta":442},[453],"\u003CFieldLegend variant=\"label\">\nNotification Preferences\n\u003C/FieldLegend>\n",[444,871,869],{"__ignoreMap":442},[464,873,466,874,876,877,589,880,882,883,885,886,888],{},[444,875,504],{}," has two variants: ",[444,878,879],{},"legend",[444,881,821],{},". The ",[444,884,821],{}," variant applies label sizing and alignment. Handy if you have nested ",[444,887,500],{},".",[510,890,496],{"id":891},"fieldgroup",[464,893,894,895,897],{},"Layout wrapper that stacks ",[444,896,194],{}," components and enables container queries for responsive orientations.",[768,899,900,910],{},[771,901,902],{},[774,903,904,906,908],{},[777,905,779],{},[777,907,782],{},[777,909,785],{},[787,911,912],{},[774,913,914,918,922],{},[792,915,916],{},[444,917,796],{},[792,919,920],{},[444,921,801],{},[792,923],{},[436,925,928],{"className":926,"code":927,"language":455,"meta":442},[453],"\u003Ctemplate>\n  \u003CFieldGroup class=\"@container/field-group flex flex-col gap-6\">\n    \u003CField>\u003C!-- Fields -->\u003C/Field>\n    \u003CField>\u003C!-- Fields -->\u003C/Field>\n  \u003C/FieldGroup>\n\u003C/template>\n",[444,929,927],{"__ignoreMap":442},[510,931,194],{"id":932},"field",[464,934,935],{},"The core wrapper for a single field. Provides orientation control, invalid state styling, and spacing.",[768,937,938,948],{},[771,939,940],{},[774,941,942,944,946],{},[777,943,779],{},[777,945,782],{},[777,947,785],{},[787,949,950,967,979],{},[774,951,952,957,962],{},[792,953,954],{},[444,955,956],{},"orientation",[792,958,959],{},[444,960,961],{},"\"vertical\" | \"horizontal\" | \"responsive\"",[792,963,964],{},[444,965,966],{},"\"vertical\"",[774,968,969,973,977],{},[792,970,971],{},[444,972,796],{},[792,974,975],{},[444,976,801],{},[792,978],{},[774,980,981,985,990],{},[792,982,983],{},[444,984,693],{},[792,986,987],{},[444,988,989],{},"boolean",[792,991],{},[436,993,996],{"className":994,"code":995,"language":455,"meta":442},[453],"\u003CField orientation=\"horizontal\">\n  \u003CFieldLabel for=\"remember\">Remember me\u003C/FieldLabel>\n  \u003CSwitch id=\"remember\" />\n\u003C/Field>\n",[444,997,995],{"__ignoreMap":442},[510,999,489],{"id":1000},"fieldcontent",[464,1002,1003],{},"Flex column that groups control and descriptions when the label sits beside the control. Not required if you have no description.",[768,1005,1006,1016],{},[771,1007,1008],{},[774,1009,1010,1012,1014],{},[777,1011,779],{},[777,1013,782],{},[777,1015,785],{},[787,1017,1018],{},[774,1019,1020,1024,1028],{},[792,1021,1022],{},[444,1023,796],{},[792,1025,1026],{},[444,1027,801],{},[792,1029],{},[436,1031,1034],{"className":1032,"code":1033,"language":455,"meta":442},[453],"\u003CField>\n  \u003CCheckbox id=\"notifications\" />\n  \u003CFieldContent>\n    \u003CFieldLabel for=\"notifications\">Notifications\u003C/FieldLabel>\n    \u003CFieldDescription>Email, SMS, and push options.\u003C/FieldDescription>\n  \u003C/FieldContent>\n\u003C/Field>\n",[444,1035,1033],{"__ignoreMap":442},[510,1037,581],{"id":1038},"fieldlabel",[464,1040,1041,1042,1044],{},"Label styled for both direct inputs and nested ",[444,1043,194],{}," children.",[768,1046,1047,1057],{},[771,1048,1049],{},[774,1050,1051,1053,1055],{},[777,1052,779],{},[777,1054,782],{},[777,1056,785],{},[787,1058,1059,1071],{},[774,1060,1061,1065,1069],{},[792,1062,1063],{},[444,1064,796],{},[792,1066,1067],{},[444,1068,801],{},[792,1070],{},[774,1072,1073,1078,1082],{},[792,1074,1075],{},[444,1076,1077],{},"asChild",[792,1079,1080],{},[444,1081,989],{},[792,1083,1084],{},[444,1085,1086],{},"false",[436,1088,1091],{"className":1089,"code":1090,"language":455,"meta":442},[453],"\u003CFieldLabel for=\"email\">\nEmail\n\u003C/FieldLabel>\n",[444,1092,1090],{"__ignoreMap":442},[510,1094,1096],{"id":1095},"fieldtitle","FieldTitle",[464,1098,1099,1100,888],{},"Renders a title with label styling inside ",[444,1101,489],{},[768,1103,1104,1114],{},[771,1105,1106],{},[774,1107,1108,1110,1112],{},[777,1109,779],{},[777,1111,782],{},[777,1113,785],{},[787,1115,1116],{},[774,1117,1118,1122,1126],{},[792,1119,1120],{},[444,1121,796],{},[792,1123,1124],{},[444,1125,801],{},[792,1127],{},[436,1129,1132],{"className":1130,"code":1131,"language":455,"meta":442},[453],"\u003CFieldContent>\n  \u003CFieldTitle>Enable Touch ID\u003C/FieldTitle>\n  \u003CFieldDescription>Unlock your device faster.\u003C/FieldDescription>\n\u003C/FieldContent>\n",[444,1133,1131],{"__ignoreMap":442},[510,1135,1137],{"id":1136},"fielddescription","FieldDescription",[464,1139,1140],{},"Helper text slot that automatically balances long lines in horizontal layouts.",[768,1142,1143,1153],{},[771,1144,1145],{},[774,1146,1147,1149,1151],{},[777,1148,779],{},[777,1150,782],{},[777,1152,785],{},[787,1154,1155],{},[774,1156,1157,1161,1165],{},[792,1158,1159],{},[444,1160,796],{},[792,1162,1163],{},[444,1164,801],{},[792,1166],{},[436,1168,1171],{"className":1169,"code":1170,"language":455,"meta":442},[453],"\u003CFieldDescription>\nWe never share your email with anyone.\n\u003C/FieldDescription>\n",[444,1172,1170],{"__ignoreMap":442},[510,1174,612],{"id":1175},"fieldseparator",[464,1177,1178,1179,1181],{},"Visual divider to separate sections inside a ",[444,1180,496],{},". Accepts optional inline content.",[768,1183,1184,1194],{},[771,1185,1186],{},[774,1187,1188,1190,1192],{},[777,1189,779],{},[777,1191,782],{},[777,1193,785],{},[787,1195,1196],{},[774,1197,1198,1202,1206],{},[792,1199,1200],{},[444,1201,796],{},[792,1203,1204],{},[444,1205,801],{},[792,1207],{},[436,1209,1212],{"className":1210,"code":1211,"language":455,"meta":442},[453],"\u003CFieldSeparator>\nOr continue with\n\u003C/FieldSeparator>\n",[444,1213,1211],{"__ignoreMap":442},[510,1215,709],{"id":1216},"fielderror",[464,1218,1219,1220,1223,1224,1227],{},"Accessible error container that accepts children or an ",[444,1221,1222],{},"errors"," array (e.g., from ",[444,1225,1226],{},"vee-validate",").",[768,1229,1230,1240],{},[771,1231,1232],{},[774,1233,1234,1236,1238],{},[777,1235,779],{},[777,1237,782],{},[777,1239,785],{},[787,1241,1242,1255],{},[774,1243,1244,1248,1253],{},[792,1245,1246],{},[444,1247,1222],{},[792,1249,1250],{},[444,1251,1252],{},"Array\u003C{ message?: string } | undefined>",[792,1254],{},[774,1256,1257,1261,1265],{},[792,1258,1259],{},[444,1260,796],{},[792,1262,1263],{},[444,1264,801],{},[792,1266],{},[436,1268,1271],{"className":1269,"code":1270,"language":455,"meta":442},[453],"\u003CFieldError :errors=\"errors.username\" />\n",[444,1272,1270],{"__ignoreMap":442},[464,1274,1275,1276,1278],{},"When the ",[444,1277,1222],{}," array contains multiple messages, the component renders a list automatically.",[464,1280,1281,1283,1284,1289,1290,1293],{},[444,1282,709],{}," also accepts issues produced by any validator that implements ",[626,1285,1288],{"href":1286,"rel":1287},"https://standardschema.dev/",[630],"Standard Schema",", including Zod, Valibot, and ArkType. Pass the ",[444,1291,1292],{},"issues"," array from the schema result directly to render a unified error list across libraries.",{"title":442,"searchDepth":1295,"depth":1295,"links":1296},2,[1297,1298,1299,1300,1313,1314,1315,1316],{"id":434,"depth":1295,"text":20},{"id":448,"depth":1295,"text":449},{"id":461,"depth":1295,"text":462},{"id":508,"depth":1295,"text":386,"children":1301},[1302,1304,1305,1306,1307,1308,1309,1310,1311,1312],{"id":512,"depth":1303,"text":206},3,{"id":520,"depth":1303,"text":330},{"id":527,"depth":1303,"text":278},{"id":534,"depth":1303,"text":298},{"id":541,"depth":1303,"text":542},{"id":549,"depth":1303,"text":150},{"id":556,"depth":1303,"text":557},{"id":564,"depth":1303,"text":314},{"id":571,"depth":1303,"text":572},{"id":599,"depth":1303,"text":600},{"id":620,"depth":1295,"text":621},{"id":684,"depth":1295,"text":685},{"id":723,"depth":1295,"text":724},{"id":756,"depth":1295,"text":757,"children":1317},[1318,1319,1320,1321,1322,1323,1324,1325,1326,1327],{"id":760,"depth":1303,"text":500},{"id":812,"depth":1303,"text":504},{"id":891,"depth":1303,"text":496},{"id":932,"depth":1303,"text":194},{"id":1000,"depth":1303,"text":489},{"id":1038,"depth":1303,"text":581},{"id":1095,"depth":1303,"text":1096},{"id":1136,"depth":1303,"text":1137},{"id":1175,"depth":1303,"text":612},{"id":1216,"depth":1303,"text":709},"Combine labels, controls, and help text to compose accessible form fields and grouped inputs.","md",null,{"component":132},"---\ntitle: Field\ndescription: Combine labels, controls, and help text to compose accessible form fields and grouped inputs.\ncomponent: true\nnew: 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 '@/components/ui/field'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CFieldSet>\n    \u003CFieldLegend>Profile\u003C/FieldLegend>\n    \u003CFieldDescription>This appears on invoices and emails.\u003C/FieldDescription>\n    \u003CFieldGroup>\n      \u003CField>\n        \u003CFieldLabel for=\"name\">\n          Full name\n        \u003C/FieldLabel>\n        \u003CInput id=\"name\" autocomplete=\"off\" placeholder=\"Evil Rabbit\" />\n        \u003CFieldDescription>This appears on invoices and emails.\u003C/FieldDescription>\n      \u003C/Field>\n      \u003CField>\n        \u003CFieldLabel for=\"username\">\n          Username\n        \u003C/FieldLabel>\n        \u003CInput id=\"username\" autocomplete=\"off\" aria-invalid />\n        \u003CFieldError>Choose another username.\u003C/FieldError>\n      \u003C/Field>\n      \u003CField orientation=\"horizontal\">\n        \u003CSwitch id=\"newsletter\" />\n        \u003CFieldLabel for=\"newsletter\">\n          Subscribe to the newsletter\n        \u003C/FieldLabel>\n      \u003C/Field>\n    \u003C/FieldGroup>\n  \u003C/FieldSet>\n\u003C/template>\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/FieldLabel>\n    \u003C!-- Input, Select, Switch, etc. -->\n    \u003CFieldDescription>Optional helper text.\u003C/FieldDescription>\n    \u003CFieldError>Validation message.\u003C/FieldError>\n  \u003C/Field>\n\u003C/template>\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'\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'\n---\n::\n\n### Checkbox\n\n::component-preview\n---\nname: FieldCheckboxDemo\nclass: '!mb-4 [&_.preview]:p-6'\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'\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'\n---\n::\n\n## Responsive Layout\n\nIf you are in tailwindcss v3 you need to install [`@tailwindcss/container-queries`](https://github.com/tailwindlabs/tailwindcss-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/field-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 /data-invalid/ /aria-invalid/\n\u003Ctemplate>\n  \u003CField data-invalid>\n    \u003CFieldLabel for=\"email\">\n      Email\n    \u003C/FieldLabel>\n    \u003CInput id=\"email\" type=\"email\" aria-invalid />\n    \u003CFieldError>Enter a valid email address.\u003C/FieldError>\n  \u003C/Field>\n\u003C/template>\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/FieldLegend>\n    \u003CFieldGroup>\n      \u003C!-- Fields -->\n    \u003C/FieldGroup>\n  \u003C/FieldSet>\n\u003C/template>\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/FieldLegend>\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/field-group flex flex-col gap-6\">\n    \u003CField>\u003C!-- Fields -->\u003C/Field>\n    \u003CField>\u003C!-- Fields -->\u003C/Field>\n  \u003C/FieldGroup>\n\u003C/template>\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/FieldLabel>\n  \u003CSwitch id=\"remember\" />\n\u003C/Field>\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\" />\n  \u003CFieldContent>\n    \u003CFieldLabel for=\"notifications\">Notifications\u003C/FieldLabel>\n    \u003CFieldDescription>Email, SMS, and push options.\u003C/FieldDescription>\n  \u003C/FieldContent>\n\u003C/Field>\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/FieldLabel>\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/FieldTitle>\n  \u003CFieldDescription>Unlock your device faster.\u003C/FieldDescription>\n\u003C/FieldContent>\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/FieldDescription>\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/FieldSeparator>\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\" />\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://standardschema.dev/), including Zod, Valibot, and ArkType. Pass the `issues` array from the schema result directly to render a unified error list across libraries.\n",{"title":194,"description":1328},"G4S1UNEofyHJzwF7dsEWd-xr5UcD5YNr_BvNOBWB7So",[1336,1337],{"title":190,"path":191,"stem":192,"children":-1},{"title":198,"path":199,"stem":200,"children":-1},1775649987187]