[{"data":1,"prerenderedAt":1475},["ShallowReactive",2],{"navigation":3,"\u002Fcomponents\u002Fform-field":484,"\u002Fcomponents\u002Fform-field-surround":1470},[4,34,51,317,343,348,353,426],{"title":5,"path":6,"stem":7,"children":8,"package":11,"category":11,"icon":33},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,13,18,23,28],{"title":10,"path":6,"stem":7,"package":11,"category":11,"icon":12},"Introduction",null,"i-lucide-house",{"title":14,"path":15,"stem":16,"package":11,"category":11,"icon":17},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":19,"path":20,"stem":21,"package":11,"category":11,"icon":22},"Icons","\u002Fgetting-started\u002Ficons","1.getting-started\u002F3.icons","i-lucide-sparkles",{"title":24,"path":25,"stem":26,"package":11,"category":11,"icon":27},"CLI","\u002Fgetting-started\u002Fcli","1.getting-started\u002F4.cli","i-lucide-terminal",{"title":29,"path":30,"stem":31,"package":11,"category":11,"icon":32},"Roadmap","\u002Fgetting-started\u002Froadmap","1.getting-started\u002F5.roadmap","i-lucide-map","i-lucide-rocket",{"title":35,"package":11,"category":11,"icon":36,"path":37,"stem":38,"children":39,"page":50},"Packages","i-lucide-package","\u002Fpackages","2.packages",[40,45],{"title":41,"path":42,"stem":43,"package":11,"category":11,"icon":44},"@vyui\u002Fcore","\u002Fpackages\u002Fcore","2.packages\u002F1.core","i-lucide-box",{"title":46,"path":47,"stem":48,"package":11,"category":11,"icon":49},"@vyui\u002Fkit","\u002Fpackages\u002Fkit","2.packages\u002F2.kit","i-lucide-layers",false,{"title":52,"package":11,"category":11,"icon":53,"path":54,"stem":55,"children":56},"Components","i-lucide-layout-grid","\u002Fcomponents","3.components",[57,59,66,72,78,84,89,94,99,105,111,116,121,126,131,137,142,147,152,156,161,165,170,175,180,185,190,195,200,204,209,214,219,224,229,234,239,244,249,254,258,262,267,272,277,282,287,292,296,300,304,308,312],{"title":52,"path":54,"stem":58,"package":11,"category":11,"icon":53},"3.components\u002Findex",{"title":60,"path":61,"stem":62,"package":63,"category":64,"icon":65},"Accordion","\u002Fcomponents\u002Faccordion","3.components\u002Faccordion","kit","Navigation","i-lucide-list-collapse",{"title":67,"path":68,"stem":69,"package":63,"category":70,"icon":71},"Alert","\u002Fcomponents\u002Falert","3.components\u002Falert","Data Display","i-lucide-triangle-alert",{"title":73,"path":74,"stem":75,"package":76,"category":77,"icon":71},"Alert Dialog","\u002Fcomponents\u002Falert-dialog","3.components\u002Falert-dialog","core","Overlay",{"title":79,"path":80,"stem":81,"package":63,"category":82,"icon":83},"App","\u002Fcomponents\u002Fapp","3.components\u002Fapp","Layout","i-lucide-smartphone",{"title":85,"path":86,"stem":87,"package":63,"category":82,"icon":88},"Aspect Ratio","\u002Fcomponents\u002Faspect-ratio","3.components\u002Faspect-ratio","i-lucide-ratio",{"title":90,"path":91,"stem":92,"package":63,"category":70,"icon":93},"Avatar","\u002Fcomponents\u002Favatar","3.components\u002Favatar","i-lucide-circle-user-round",{"title":95,"path":96,"stem":97,"package":63,"category":70,"icon":98},"Avatar Group","\u002Fcomponents\u002Favatar-group","3.components\u002Favatar-group","i-lucide-users-round",{"title":100,"path":101,"stem":102,"package":63,"category":103,"icon":104},"Button","\u002Fcomponents\u002Fbutton","3.components\u002Fbutton","Buttons","i-lucide-square-mouse-pointer",{"title":106,"path":107,"stem":108,"package":63,"category":109,"icon":110},"Calendar","\u002Fcomponents\u002Fcalendar","3.components\u002Fcalendar","Form","i-lucide-calendar-days",{"title":112,"path":113,"stem":114,"package":63,"category":82,"icon":115},"Card","\u002Fcomponents\u002Fcard","3.components\u002Fcard","i-lucide-square",{"title":117,"path":118,"stem":119,"package":63,"category":109,"icon":120},"Checkbox","\u002Fcomponents\u002Fcheckbox","3.components\u002Fcheckbox","i-lucide-square-check",{"title":122,"path":123,"stem":124,"package":76,"category":64,"icon":125},"Collapsible","\u002Fcomponents\u002Fcollapsible","3.components\u002Fcollapsible","i-lucide-chevrons-down-up",{"title":127,"path":128,"stem":129,"package":76,"category":77,"icon":130},"Dialog","\u002Fcomponents\u002Fdialog","3.components\u002Fdialog","i-lucide-app-window",{"title":132,"path":133,"stem":134,"package":76,"category":135,"icon":136},"Draggable","\u002Fcomponents\u002Fdraggable","3.components\u002Fdraggable","Gestures & Lists","i-lucide-move",{"title":138,"path":139,"stem":140,"package":63,"category":77,"icon":141},"Drawer","\u002Fcomponents\u002Fdrawer","3.components\u002Fdrawer","i-lucide-panel-bottom",{"title":143,"path":144,"stem":145,"package":63,"category":77,"icon":146},"Dropdown Menu","\u002Fcomponents\u002Fdropdown-menu","3.components\u002Fdropdown-menu","i-lucide-menu",{"title":148,"path":149,"stem":150,"package":63,"category":135,"icon":151},"Feed List","\u002Fcomponents\u002Ffeed-list","3.components\u002Ffeed-list","i-lucide-list",{"title":109,"path":153,"stem":154,"package":63,"category":109,"icon":155},"\u002Fcomponents\u002Fform","3.components\u002Fform","i-lucide-clipboard-list",{"title":157,"path":158,"stem":159,"package":63,"category":109,"icon":160},"Form Field","\u002Fcomponents\u002Fform-field","3.components\u002Fform-field","i-lucide-form-input",{"title":162,"path":163,"stem":164,"package":76,"category":70,"icon":22},"Icon","\u002Fcomponents\u002Ficon","3.components\u002Ficon",{"title":166,"path":167,"stem":168,"package":63,"category":109,"icon":169},"Input","\u002Fcomponents\u002Finput","3.components\u002Finput","i-lucide-text-cursor-input",{"title":171,"path":172,"stem":173,"package":63,"category":174,"icon":141},"Island","\u002Fcomponents\u002Fisland","3.components\u002Fisland","Dynamic Island",{"title":176,"path":177,"stem":178,"package":63,"category":174,"icon":179},"Island Button","\u002Fcomponents\u002Fisland-button","3.components\u002Fisland-button","i-lucide-circle-ellipsis",{"title":181,"path":182,"stem":183,"package":63,"category":174,"icon":184},"Island Group","\u002Fcomponents\u002Fisland-group","3.components\u002Fisland-group","i-lucide-panels-top-left",{"title":186,"path":187,"stem":188,"package":63,"category":11,"icon":189},"KeyboardAware","\u002Fcomponents\u002Fkeyboard-aware","3.components\u002Fkeyboard-aware","i-lucide-keyboard",{"title":191,"path":192,"stem":193,"package":63,"category":109,"icon":194},"Label","\u002Fcomponents\u002Flabel","3.components\u002Flabel","i-lucide-tag",{"title":196,"path":197,"stem":198,"package":63,"category":77,"icon":199},"Modal","\u002Fcomponents\u002Fmodal","3.components\u002Fmodal","i-lucide-gallery-vertical-end",{"title":64,"path":201,"stem":202,"package":76,"category":64,"icon":203},"\u002Fcomponents\u002Fnavigation","3.components\u002Fnavigation","i-lucide-route",{"title":205,"path":206,"stem":207,"package":63,"category":109,"icon":208},"Number Field","\u002Fcomponents\u002Fnumber-field","3.components\u002Fnumber-field","i-lucide-list-plus",{"title":210,"path":211,"stem":212,"package":63,"category":109,"icon":213},"Pin Input","\u002Fcomponents\u002Fpin-input","3.components\u002Fpin-input","i-lucide-key-round",{"title":215,"path":216,"stem":217,"package":63,"category":82,"icon":218},"Placeholder","\u002Fcomponents\u002Fplaceholder","3.components\u002Fplaceholder","i-lucide-square-dashed",{"title":220,"path":221,"stem":222,"package":63,"category":77,"icon":223},"Popover","\u002Fcomponents\u002Fpopover","3.components\u002Fpopover","i-lucide-message-square-more",{"title":225,"path":226,"stem":227,"package":63,"category":70,"icon":228},"Progress","\u002Fcomponents\u002Fprogress","3.components\u002Fprogress","i-lucide-chart-no-axes-column-increasing",{"title":230,"path":231,"stem":232,"package":63,"category":109,"icon":233},"Radio Group","\u002Fcomponents\u002Fradio-group","3.components\u002Fradio-group","i-lucide-circle-dot",{"title":235,"path":236,"stem":237,"package":63,"category":109,"icon":238},"Rating","\u002Fcomponents\u002Frating","3.components\u002Frating","i-lucide-star",{"title":240,"path":241,"stem":242,"package":76,"category":82,"icon":243},"Scroll View","\u002Fcomponents\u002Fscroll-view","3.components\u002Fscroll-view","i-lucide-scroll",{"title":245,"path":246,"stem":247,"package":63,"category":109,"icon":248},"Select","\u002Fcomponents\u002Fselect","3.components\u002Fselect","i-lucide-list-check",{"title":250,"path":251,"stem":252,"package":63,"category":82,"icon":253},"Separator","\u002Fcomponents\u002Fseparator","3.components\u002Fseparator","i-lucide-separator-horizontal",{"title":255,"path":256,"stem":257,"package":76,"category":77,"icon":141},"Sheet","\u002Fcomponents\u002Fsheet","3.components\u002Fsheet",{"title":259,"path":260,"stem":261,"package":63,"category":82,"icon":184},"Skeleton","\u002Fcomponents\u002Fskeleton","3.components\u002Fskeleton",{"title":263,"path":264,"stem":265,"package":63,"category":109,"icon":266},"Slider","\u002Fcomponents\u002Fslider","3.components\u002Fslider","i-lucide-sliders-horizontal",{"title":268,"path":269,"stem":270,"package":63,"category":135,"icon":271},"Sortable","\u002Fcomponents\u002Fsortable","3.components\u002Fsortable","i-lucide-list-restart",{"title":273,"path":274,"stem":275,"package":63,"category":64,"icon":276},"Stepper","\u002Fcomponents\u002Fstepper","3.components\u002Fstepper","i-lucide-list-ordered",{"title":278,"path":279,"stem":280,"package":63,"category":135,"icon":281},"Swipe Action","\u002Fcomponents\u002Fswipe-action","3.components\u002Fswipe-action","i-lucide-move-horizontal",{"title":283,"path":284,"stem":285,"package":63,"category":135,"icon":286},"Swiper","\u002Fcomponents\u002Fswiper","3.components\u002Fswiper","i-lucide-gallery-horizontal-end",{"title":288,"path":289,"stem":290,"package":63,"category":109,"icon":291},"Switch","\u002Fcomponents\u002Fswitch","3.components\u002Fswitch","i-lucide-toggle-right",{"title":293,"path":294,"stem":295,"package":63,"category":64,"icon":184},"Tabs","\u002Fcomponents\u002Ftabs","3.components\u002Ftabs",{"title":297,"path":298,"stem":299,"package":63,"category":109,"icon":169},"Textarea","\u002Fcomponents\u002Ftextarea","3.components\u002Ftextarea",{"title":301,"path":302,"stem":303,"package":63,"category":77,"icon":223},"Toast","\u002Fcomponents\u002Ftoast","3.components\u002Ftoast",{"title":305,"path":306,"stem":307,"package":63,"category":109,"icon":291},"Toggle","\u002Fcomponents\u002Ftoggle","3.components\u002Ftoggle",{"title":309,"path":310,"stem":311,"package":63,"category":109,"icon":184},"Toggle Group","\u002Fcomponents\u002Ftoggle-group","3.components\u002Ftoggle-group",{"title":313,"path":314,"stem":315,"package":63,"category":77,"icon":316},"Tray","\u002Fcomponents\u002Ftray","3.components\u002Ftray","i-lucide-square-dashed-bottom",{"title":318,"path":319,"stem":320,"children":321,"package":11,"category":11,"icon":323},"Theming","\u002Ftheming","4.theming\u002F1.index",[322,324,328,333,338],{"title":318,"path":319,"stem":320,"package":11,"category":11,"icon":323},"i-lucide-palette",{"title":325,"path":326,"stem":327,"package":11,"category":11,"icon":266},"Overrides","\u002Ftheming\u002Foverrides","4.theming\u002F2.overrides",{"title":329,"path":330,"stem":331,"package":11,"category":11,"icon":332},"Colors","\u002Ftheming\u002Fcolors","4.theming\u002F3.colors","i-lucide-swatch-book",{"title":334,"path":335,"stem":336,"package":11,"category":11,"icon":337},"Dark Mode","\u002Ftheming\u002Fdark-mode","4.theming\u002F4.dark-mode","i-lucide-moon",{"title":339,"path":340,"stem":341,"package":11,"category":11,"icon":342},"Fonts","\u002Ftheming\u002Ffonts","4.theming\u002F5.fonts","i-lucide-type",{"title":344,"path":345,"stem":346,"package":11,"category":11,"icon":347},"Accessibility","\u002Faccessibility","5.accessibility","i-lucide-accessibility",{"title":349,"path":350,"stem":351,"package":11,"category":11,"icon":352},"i18n","\u002Fi18n","6.i18n","i-lucide-languages",{"title":354,"path":355,"stem":356,"children":357,"package":11,"category":11,"icon":359},"Composables","\u002Fcomposables","7.composables\u002F1.index",[358,360,365,370,375,380,384,389,394,399,403,407,411,416,421],{"title":354,"path":355,"stem":356,"package":11,"category":11,"icon":359},"i-lucide-square-function",{"title":361,"path":362,"stem":363,"package":11,"category":11,"icon":364},"useEmitAsProps","\u002Fcomposables\u002Fuse-emit-as-props","7.composables\u002F10.use-emit-as-props","i-lucide-zap",{"title":366,"path":367,"stem":368,"package":11,"category":11,"icon":369},"useForwardPropsEmits","\u002Fcomposables\u002Fuse-forward-props-emits","7.composables\u002F11.use-forward-props-emits","i-lucide-merge",{"title":371,"path":372,"stem":373,"package":11,"category":11,"icon":374},"useForwardExpose","\u002Fcomposables\u002Fuse-forward-expose","7.composables\u002F12.use-forward-expose","i-lucide-share-2",{"title":376,"path":377,"stem":378,"package":11,"category":11,"icon":379},"usePrimitiveElement","\u002Fcomposables\u002Fuse-primitive-element","7.composables\u002F14.use-primitive-element","i-lucide-crosshair",{"title":381,"path":382,"stem":383,"package":11,"category":11,"icon":83},"useSafeArea","\u002Fcomposables\u002Fuse-safe-area","7.composables\u002F15.use-safe-area",{"title":385,"path":386,"stem":387,"package":11,"category":11,"icon":388},"useGlobalEvent","\u002Fcomposables\u002Fuse-global-event","7.composables\u002F16.use-global-event","i-lucide-radio",{"title":390,"path":391,"stem":392,"package":11,"category":11,"icon":393},"getViewportSize","\u002Fcomposables\u002Fget-viewport-size","7.composables\u002F17.get-viewport-size","i-lucide-scaling",{"title":395,"path":396,"stem":397,"package":11,"category":11,"icon":398},"useAppConfig","\u002Fcomposables\u002Fuse-app-config","7.composables\u002F2.use-app-config","i-lucide-settings",{"title":400,"path":401,"stem":402,"package":11,"category":11,"icon":337},"useColorMode","\u002Fcomposables\u002Fuse-color-mode","7.composables\u002F3.use-color-mode",{"title":404,"path":405,"stem":406,"package":11,"category":11,"icon":141},"useTray","\u002Fcomposables\u002Fuse-tray","7.composables\u002F5.use-tray",{"title":408,"path":409,"stem":410,"package":11,"category":11,"icon":352},"i18n composables","\u002Fcomposables\u002Fi18n-composables","7.composables\u002F6.i18n-composables",{"title":412,"path":413,"stem":414,"package":11,"category":11,"icon":415},"useId","\u002Fcomposables\u002Fuse-id","7.composables\u002F7.use-id","i-lucide-hash",{"title":417,"path":418,"stem":419,"package":11,"category":11,"icon":420},"useFilter","\u002Fcomposables\u002Fuse-filter","7.composables\u002F8.use-filter","i-lucide-filter",{"title":422,"path":423,"stem":424,"package":11,"category":11,"icon":425},"useForwardProps","\u002Fcomposables\u002Fuse-forward-props","7.composables\u002F9.use-forward-props","i-lucide-arrow-right-left",{"title":427,"path":428,"stem":429,"children":430,"package":11,"category":11,"icon":432},"Guides","\u002Fguides","8.guides\u002F1.index",[431,433,437,442,446,451,456,461,465,470,474,479],{"title":427,"path":428,"stem":429,"package":11,"category":11,"icon":432},"i-lucide-book-open",{"title":434,"path":435,"stem":436,"package":11,"category":11,"icon":364},"Instant first frame","\u002Fguides\u002Finstant-first-frame-rendering","8.guides\u002F10.instant-first-frame-rendering",{"title":438,"path":439,"stem":440,"package":11,"category":11,"icon":441},"Why Vy UI","\u002Fguides\u002Fwhy-vy-ui","8.guides\u002F11.why-vy-ui","i-lucide-help-circle",{"title":443,"path":444,"stem":445,"package":11,"category":11,"icon":22},"Sparkling","\u002Fguides\u002Fsparkling","8.guides\u002F12.sparkling",{"title":447,"path":448,"stem":449,"package":11,"category":11,"icon":450},"Lynx UI frameworks","\u002Fguides\u002Flynx-ui-frameworks","8.guides\u002F2.lynx-ui-frameworks","i-lucide-library",{"title":452,"path":453,"stem":454,"package":11,"category":11,"icon":455},"Vue Lynx","\u002Fguides\u002Fvue-lynx","8.guides\u002F3.vue-lynx","i-lucide-component",{"title":457,"path":458,"stem":459,"package":11,"category":11,"icon":460},"Lynx vs React Native","\u002Fguides\u002Flynx-vs-react-native","8.guides\u002F4.lynx-vs-react-native","i-lucide-git-compare",{"title":462,"path":463,"stem":464,"package":11,"category":11,"icon":83},"Testing on device","\u002Fguides\u002Ftesting-on-device","8.guides\u002F5.testing-on-device",{"title":466,"path":467,"stem":468,"package":11,"category":11,"icon":469},"Testing with Xcode","\u002Fguides\u002Ftesting-with-xcode","8.guides\u002F6.testing-with-xcode","i-lucide-apple",{"title":471,"path":472,"stem":473,"package":11,"category":11,"icon":27},"rspeedy dev server","\u002Fguides\u002Frspeedy-dev-server","8.guides\u002F7.rspeedy-dev-server",{"title":475,"path":476,"stem":477,"package":11,"category":11,"icon":478},"Tailwind on Lynx","\u002Fguides\u002Ftailwind-on-lynx","8.guides\u002F8.tailwind-on-lynx","i-lucide-wind",{"title":480,"path":481,"stem":482,"package":11,"category":11,"icon":483},"Theming on Lynx","\u002Fguides\u002Ftheming-on-lynx","8.guides\u002F9.theming-on-lynx","i-lucide-paintbrush",{"id":485,"title":157,"body":486,"category":109,"description":1458,"extension":1459,"links":1460,"meta":1466,"navigation":1467,"package":63,"path":158,"seo":1468,"stem":159,"__hash__":1469},"docs\u002F3.components\u002Fform-field.md",{"type":487,"value":488,"toc":1443},"minimark",[489,494,524,528,546,1000,1009,1014,1019,1159,1163,1183,1187,1235,1239,1243,1246,1250,1253,1257,1267,1372,1386,1389,1404,1408,1439],[490,491,493],"h2",{"id":492},"overview","Overview",[495,496,497,501,502,504,505,508,509,515,516,519,520,523],"p",{},[498,499,500],"code",{},"VyFormField"," wraps the headless ",[498,503,41],{}," ",[498,506,507],{},"FormField"," with the text scaffold around a control: label, description, hint, help, and error. Inside a ",[510,511,512],"a",{"href":153},[498,513,514],{},"VyForm"," it registers itself under ",[498,517,518],{},"name",", runs its ",[498,521,522],{},"validators",", and renders the resulting error; on its own it still renders the scaffold, but the value and error are yours to supply.",[490,525,527],{"id":526},"usage","Usage",[495,529,530,531,534,535,534,538,541,542,545],{},"The default slot receives the field's live ",[498,532,533],{},"value",", ",[498,536,537],{},"error",[498,539,540],{},"setValue",", and ",[498,543,544],{},"disabled",". Kit controls do not read the field context on their own, so bind them through the slot.",[547,548,553],"pre",{"className":549,"code":550,"language":551,"meta":552,"style":552},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { VyForm } from '@vyui\u002Fkit\u002Fform'\nimport { VyFormField } from '@vyui\u002Fkit\u002Fform-field'\nimport { VyInput } from '@vyui\u002Fkit\u002Finput'\n\nconst required = (value: unknown) => (value ? null : 'Email is required')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVyForm :default-values=\"{ email: '' }\">\n    \u003CVyFormField\n      name=\"email\"\n      label=\"Email\"\n      description=\"We only use this to send receipts.\"\n      help=\"Work addresses are fine.\"\n      required\n      :validators=\"[required]\"\n    >\n      \u003Ctemplate #default=\"{ value, setValue }\">\n        \u003CVyInput\n          :model-value=\"value as string\"\n          placeholder=\"you@example.com\"\n          @update:model-value=\"setValue\"\n        \u002F>\n      \u003C\u002Ftemplate>\n    \u003C\u002FVyFormField>\n  \u003C\u002FVyForm>\n\u003C\u002Ftemplate>\n","vue","",[498,554,555,590,619,640,661,668,721,731,736,746,768,777,793,808,823,838,844,859,865,902,911,926,941,955,961,971,981,991],{"__ignoreMap":552},[556,557,560,564,568,572,575,578,581,585,587],"span",{"class":558,"line":559},"line",1,[556,561,563],{"class":562},"sMK4o","\u003C",[556,565,567],{"class":566},"swJcz","script",[556,569,571],{"class":570},"spNyl"," setup",[556,573,574],{"class":570}," lang",[556,576,577],{"class":562},"=",[556,579,580],{"class":562},"\"",[556,582,584],{"class":583},"sfazB","ts",[556,586,580],{"class":562},[556,588,589],{"class":562},">\n",[556,591,593,597,600,604,607,610,613,616],{"class":558,"line":592},2,[556,594,596],{"class":595},"s7zQu","import",[556,598,599],{"class":562}," {",[556,601,603],{"class":602},"sTEyZ"," VyForm",[556,605,606],{"class":562}," }",[556,608,609],{"class":595}," from",[556,611,612],{"class":562}," '",[556,614,615],{"class":583},"@vyui\u002Fkit\u002Fform",[556,617,618],{"class":562},"'\n",[556,620,622,624,626,629,631,633,635,638],{"class":558,"line":621},3,[556,623,596],{"class":595},[556,625,599],{"class":562},[556,627,628],{"class":602}," VyFormField",[556,630,606],{"class":562},[556,632,609],{"class":595},[556,634,612],{"class":562},[556,636,637],{"class":583},"@vyui\u002Fkit\u002Fform-field",[556,639,618],{"class":562},[556,641,643,645,647,650,652,654,656,659],{"class":558,"line":642},4,[556,644,596],{"class":595},[556,646,599],{"class":562},[556,648,649],{"class":602}," VyInput",[556,651,606],{"class":562},[556,653,609],{"class":595},[556,655,612],{"class":562},[556,657,658],{"class":583},"@vyui\u002Fkit\u002Finput",[556,660,618],{"class":562},[556,662,664],{"class":558,"line":663},5,[556,665,667],{"emptyLinePlaceholder":666},true,"\n",[556,669,671,674,677,679,682,685,688,692,695,698,701,704,707,710,712,715,718],{"class":558,"line":670},6,[556,672,673],{"class":570},"const",[556,675,676],{"class":602}," required ",[556,678,577],{"class":562},[556,680,681],{"class":562}," (",[556,683,533],{"class":684},"sHdIc",[556,686,687],{"class":562},":",[556,689,691],{"class":690},"sBMFI"," unknown",[556,693,694],{"class":562},")",[556,696,697],{"class":570}," =>",[556,699,700],{"class":602}," (value ",[556,702,703],{"class":562},"?",[556,705,706],{"class":562}," null",[556,708,709],{"class":562}," :",[556,711,612],{"class":562},[556,713,714],{"class":583},"Email is required",[556,716,717],{"class":562},"'",[556,719,720],{"class":602},")\n",[556,722,724,727,729],{"class":558,"line":723},7,[556,725,726],{"class":562},"\u003C\u002F",[556,728,567],{"class":566},[556,730,589],{"class":562},[556,732,734],{"class":558,"line":733},8,[556,735,667],{"emptyLinePlaceholder":666},[556,737,739,741,744],{"class":558,"line":738},9,[556,740,563],{"class":562},[556,742,743],{"class":566},"template",[556,745,589],{"class":562},[556,747,749,752,754,757,759,761,764,766],{"class":558,"line":748},10,[556,750,751],{"class":562},"  \u003C",[556,753,514],{"class":566},[556,755,756],{"class":570}," :default-values",[556,758,577],{"class":562},[556,760,580],{"class":562},[556,762,763],{"class":583},"{ email: '' }",[556,765,580],{"class":562},[556,767,589],{"class":562},[556,769,771,774],{"class":558,"line":770},11,[556,772,773],{"class":562},"    \u003C",[556,775,776],{"class":566},"VyFormField\n",[556,778,780,783,785,787,790],{"class":558,"line":779},12,[556,781,782],{"class":570},"      name",[556,784,577],{"class":562},[556,786,580],{"class":562},[556,788,789],{"class":583},"email",[556,791,792],{"class":562},"\"\n",[556,794,796,799,801,803,806],{"class":558,"line":795},13,[556,797,798],{"class":570},"      label",[556,800,577],{"class":562},[556,802,580],{"class":562},[556,804,805],{"class":583},"Email",[556,807,792],{"class":562},[556,809,811,814,816,818,821],{"class":558,"line":810},14,[556,812,813],{"class":570},"      description",[556,815,577],{"class":562},[556,817,580],{"class":562},[556,819,820],{"class":583},"We only use this to send receipts.",[556,822,792],{"class":562},[556,824,826,829,831,833,836],{"class":558,"line":825},15,[556,827,828],{"class":570},"      help",[556,830,577],{"class":562},[556,832,580],{"class":562},[556,834,835],{"class":583},"Work addresses are fine.",[556,837,792],{"class":562},[556,839,841],{"class":558,"line":840},16,[556,842,843],{"class":570},"      required\n",[556,845,847,850,852,854,857],{"class":558,"line":846},17,[556,848,849],{"class":570},"      :validators",[556,851,577],{"class":562},[556,853,580],{"class":562},[556,855,856],{"class":583},"[required]",[556,858,792],{"class":562},[556,860,862],{"class":558,"line":861},18,[556,863,864],{"class":562},"    >\n",[556,866,868,871,873,876,879,881,883,886,889,892,895,898,900],{"class":558,"line":867},19,[556,869,870],{"class":562},"      \u003C",[556,872,743],{"class":566},[556,874,875],{"class":562}," #",[556,877,878],{"class":570},"default",[556,880,577],{"class":562},[556,882,580],{"class":562},[556,884,885],{"class":562},"{",[556,887,888],{"class":602}," value",[556,890,891],{"class":562},",",[556,893,894],{"class":602}," setValue ",[556,896,897],{"class":562},"}",[556,899,580],{"class":562},[556,901,589],{"class":562},[556,903,905,908],{"class":558,"line":904},20,[556,906,907],{"class":562},"        \u003C",[556,909,910],{"class":566},"VyInput\n",[556,912,914,917,919,921,924],{"class":558,"line":913},21,[556,915,916],{"class":570},"          :model-value",[556,918,577],{"class":562},[556,920,580],{"class":562},[556,922,923],{"class":583},"value as string",[556,925,792],{"class":562},[556,927,929,932,934,936,939],{"class":558,"line":928},22,[556,930,931],{"class":570},"          placeholder",[556,933,577],{"class":562},[556,935,580],{"class":562},[556,937,938],{"class":583},"you@example.com",[556,940,792],{"class":562},[556,942,944,947,949,951,953],{"class":558,"line":943},23,[556,945,946],{"class":570},"          @update:model-value",[556,948,577],{"class":562},[556,950,580],{"class":562},[556,952,540],{"class":583},[556,954,792],{"class":562},[556,956,958],{"class":558,"line":957},24,[556,959,960],{"class":562},"        \u002F>\n",[556,962,964,967,969],{"class":558,"line":963},25,[556,965,966],{"class":562},"      \u003C\u002F",[556,968,743],{"class":566},[556,970,589],{"class":562},[556,972,974,977,979],{"class":558,"line":973},26,[556,975,976],{"class":562},"    \u003C\u002F",[556,978,500],{"class":566},[556,980,589],{"class":562},[556,982,984,987,989],{"class":558,"line":983},27,[556,985,986],{"class":562},"  \u003C\u002F",[556,988,514],{"class":566},[556,990,589],{"class":562},[556,992,994,996,998],{"class":558,"line":993},28,[556,995,726],{"class":562},[556,997,743],{"class":566},[556,999,589],{"class":562},[495,1001,1002,1003,1005,1006,1008],{},"Passing only ",[498,1004,518],{}," to the control forwards the name to the native input; it does not connect the control to the form. Use ",[498,1007,540],{}," from the slot.",[1010,1011,1013],"h3",{"id":1012},"manual-error","Manual error",[495,1015,1016,1018],{},[498,1017,537],{}," overrides whatever the surrounding form derived, for server-side validation or a control that validates itself.",[547,1020,1022],{"className":549,"code":1021,"language":551,"meta":552,"style":552},"\u003Ctemplate>\n  \u003CVyFormField name=\"code\" label=\"Invite code\" :error=\"serverError\">\n    \u003Ctemplate #default=\"{ value, setValue }\">\n      \u003CVyPinInput :model-value=\"value as string\" @update:model-value=\"setValue\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FVyFormField>\n\u003C\u002Ftemplate>\n",[498,1023,1024,1032,1075,1103,1135,1143,1151],{"__ignoreMap":552},[556,1025,1026,1028,1030],{"class":558,"line":559},[556,1027,563],{"class":562},[556,1029,743],{"class":566},[556,1031,589],{"class":562},[556,1033,1034,1036,1038,1041,1043,1045,1047,1049,1052,1054,1056,1059,1061,1064,1066,1068,1071,1073],{"class":558,"line":592},[556,1035,751],{"class":562},[556,1037,500],{"class":566},[556,1039,1040],{"class":570}," name",[556,1042,577],{"class":562},[556,1044,580],{"class":562},[556,1046,498],{"class":583},[556,1048,580],{"class":562},[556,1050,1051],{"class":570}," label",[556,1053,577],{"class":562},[556,1055,580],{"class":562},[556,1057,1058],{"class":583},"Invite code",[556,1060,580],{"class":562},[556,1062,1063],{"class":570}," :error",[556,1065,577],{"class":562},[556,1067,580],{"class":562},[556,1069,1070],{"class":583},"serverError",[556,1072,580],{"class":562},[556,1074,589],{"class":562},[556,1076,1077,1079,1081,1083,1085,1087,1089,1091,1093,1095,1097,1099,1101],{"class":558,"line":621},[556,1078,773],{"class":562},[556,1080,743],{"class":566},[556,1082,875],{"class":562},[556,1084,878],{"class":570},[556,1086,577],{"class":562},[556,1088,580],{"class":562},[556,1090,885],{"class":562},[556,1092,888],{"class":602},[556,1094,891],{"class":562},[556,1096,894],{"class":602},[556,1098,897],{"class":562},[556,1100,580],{"class":562},[556,1102,589],{"class":562},[556,1104,1105,1107,1110,1113,1115,1117,1119,1121,1124,1126,1128,1130,1132],{"class":558,"line":642},[556,1106,870],{"class":562},[556,1108,1109],{"class":566},"VyPinInput",[556,1111,1112],{"class":570}," :model-value",[556,1114,577],{"class":562},[556,1116,580],{"class":562},[556,1118,923],{"class":583},[556,1120,580],{"class":562},[556,1122,1123],{"class":570}," @update:model-value",[556,1125,577],{"class":562},[556,1127,580],{"class":562},[556,1129,540],{"class":583},[556,1131,580],{"class":562},[556,1133,1134],{"class":562}," \u002F>\n",[556,1136,1137,1139,1141],{"class":558,"line":663},[556,1138,976],{"class":562},[556,1140,743],{"class":566},[556,1142,589],{"class":562},[556,1144,1145,1147,1149],{"class":558,"line":670},[556,1146,986],{"class":562},[556,1148,500],{"class":566},[556,1150,589],{"class":562},[556,1152,1153,1155,1157],{"class":558,"line":723},[556,1154,726],{"class":562},[556,1156,743],{"class":566},[556,1158,589],{"class":562},[1010,1160,1162],{"id":1161},"slot-overrides","Slot overrides",[495,1164,1165,534,1168,534,1171,534,1174,541,1177,1179,1180,1182],{},[498,1166,1167],{},"label",[498,1169,1170],{},"description",[498,1172,1173],{},"hint",[498,1175,1176],{},"help",[498,1178,537],{}," each take a slot when text alone is not enough. The ",[498,1181,537],{}," slot receives the resolved message.",[490,1184,1186],{"id":1185},"features-and-behavior","Features and behavior",[1188,1189,1190,1196,1201,1214,1220,1226,1229],"ul",{},[1191,1192,1193,1195],"li",{},[498,1194,518],{}," must be unique inside the parent form and is treated as static — swapping it at runtime orphans the registration.",[1191,1197,1198,1200],{},[498,1199,522],{}," run synchronously on submit and stop at the first non-null message.",[1191,1202,1203,1206,1207,1210,1211,1213],{},[498,1204,1205],{},"defaultValue"," seeds the field only when the form's ",[498,1208,1209],{},"defaultValues"," has no entry for ",[498,1212,518],{},".",[1191,1215,1216,1217,1219],{},"The error text replaces ",[498,1218,1176],{}," while it is showing; the two never render together.",[1191,1221,1222,1225],{},[498,1223,1224],{},"required"," appends a red asterisk to the label, and is presentational — pair it with a validator to actually enforce the field.",[1191,1227,1228],{},"Label and hint share one row; description sits under them, and both blocks are omitted when their props and slots are empty.",[1191,1230,1231,1232,1234],{},"Outside a ",[498,1233,514],{}," the component throws, because the core primitive injects the form root context.",[490,1236,1238],{"id":1237},"api","API",[1010,1240,1242],{"id":1241},"props","Props",[1244,1245],"component-props",{"name":507},[1010,1247,1249],{"id":1248},"slots","Slots",[1251,1252],"component-slots",{"name":507},[490,1254,1256],{"id":1255},"styling-and-theming","Styling and theming",[495,1258,1259,1260,1263,1264,1213],{},"Override globally through ",[498,1261,1262],{},"appConfig.ui.formField"," or per instance with ",[498,1265,1266],{},"ui",[1268,1269,1270,1283],"table",{},[1271,1272,1273],"thead",{},[1274,1275,1276,1280],"tr",{},[1277,1278,1279],"th",{},"UI slot",[1277,1281,1282],{},"Purpose",[1284,1285,1286,1297,1307,1317,1326,1335,1345,1354,1363],"tbody",{},[1274,1287,1288,1294],{},[1289,1290,1291],"td",{},[498,1292,1293],{},"root",[1289,1295,1296],{},"Vertical stack for the whole field.",[1274,1298,1299,1304],{},[1289,1300,1301],{},[498,1302,1303],{},"wrapper",[1289,1305,1306],{},"Label, hint, and description block.",[1274,1308,1309,1314],{},[1289,1310,1311],{},[498,1312,1313],{},"labelWrapper",[1289,1315,1316],{},"Row holding the label and the right-aligned hint.",[1274,1318,1319,1323],{},[1289,1320,1321],{},[498,1322,1167],{},[1289,1324,1325],{},"Label text, plus the required asterisk.",[1274,1327,1328,1332],{},[1289,1329,1330],{},[498,1331,1170],{},[1289,1333,1334],{},"Text between the label and the control.",[1274,1336,1337,1342],{},[1289,1338,1339],{},[498,1340,1341],{},"container",[1289,1343,1344],{},"Wrapper around the control slot.",[1274,1346,1347,1351],{},[1289,1348,1349],{},[498,1350,537],{},[1289,1352,1353],{},"Error message under the control.",[1274,1355,1356,1360],{},[1289,1357,1358],{},[498,1359,1173],{},[1289,1361,1362],{},"Auxiliary text next to the label.",[1274,1364,1365,1369],{},[1289,1366,1367],{},[498,1368,1176],{},[1289,1370,1371],{},"Helper text under the control.",[495,1373,1374,1377,1378,1381,1382,1385],{},[498,1375,1376],{},"size"," scales the label, description, hint, help, and error text from ",[498,1379,1380],{},"sm"," through ",[498,1383,1384],{},"xl","; it does not size the control itself.",[490,1387,344],{"id":1388},"accessibility",[495,1390,1391,1392,1395,1396,1399,1400,1403],{},"The scaffold is text next to a control, not a native label association — Lynx has no ",[498,1393,1394],{},"for","\u002F",[498,1397,1398],{},"id"," pairing. Screen readers announce the control by its own ",[498,1401,1402],{},"accessibility-label",", so give icon-only or ambiguous controls one that matches the visible label, and repeat the error message there when a field is invalid.",[490,1405,1407],{"id":1406},"related-components","Related components",[1188,1409,1410,1417,1424],{},[1191,1411,1412,1416],{},[510,1413,1414],{"href":153},[498,1415,109],{}," collects the values these fields register.",[1191,1418,1419,1423],{},[510,1420,1421],{"href":192},[498,1422,191],{}," for a standalone label with no validation scaffold.",[1191,1425,1426,534,1430,541,1434,1438],{},[510,1427,1428],{"href":167},[498,1429,166],{},[510,1431,1432],{"href":298},[498,1433,297],{},[510,1435,1436],{"href":246},[498,1437,245],{}," for controls to place inside a field.",[1440,1441,1442],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":552,"searchDepth":559,"depth":592,"links":1444},[1445,1446,1450,1451,1455,1456,1457],{"id":492,"depth":592,"text":493},{"id":526,"depth":592,"text":527,"children":1447},[1448,1449],{"id":1012,"depth":621,"text":1013},{"id":1161,"depth":621,"text":1162},{"id":1185,"depth":592,"text":1186},{"id":1237,"depth":592,"text":1238,"children":1452},[1453,1454],{"id":1241,"depth":621,"text":1242},{"id":1248,"depth":621,"text":1249},{"id":1255,"depth":592,"text":1256},{"id":1388,"depth":592,"text":344},{"id":1406,"depth":592,"text":1407},"Label, description, hint, help, and error scaffold around a single form control.","md",[1461],{"label":1462,"icon":1463,"to":1464,"target":1465},"Source","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002FKealanAU\u002Fvyui\u002Fblob\u002Fmain\u002Fpackages\u002Fkit\u002Fsrc\u002Fcomponents\u002FFormField.vue","_blank",{},{"icon":160},{"title":157,"description":1458},"mXokqA3MhAuyJ2x2257U5SXzh1KWTzJpCXxs7bT021M",[1471,1473],{"title":109,"path":153,"stem":154,"description":1472,"icon":-1,"children":-1,"navigation":-1},"A form container that tracks values, runs validators, and emits submit.",{"title":162,"path":163,"stem":164,"description":1474,"icon":-1,"children":-1,"navigation":-1},"Render registered Iconify data or a custom Vue component through Lynx-native SVG.",1791722643027]