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