[{"data":1,"prerenderedAt":1480},["ShallowReactive",2],{"navigation":3,"\u002Fcomponents\u002Fform-field":489,"\u002Fcomponents\u002Fform-field-surround":1475},[4,34,51,317,343,348,353,431],{"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,408,412,416,421,426],{"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":407},"useComponentIcons","\u002Fcomposables\u002Fuse-component-icons","7.composables\u002F4.use-component-icons","i-lucide-shapes",{"title":409,"path":410,"stem":411,"package":11,"category":11,"icon":141},"useTray","\u002Fcomposables\u002Fuse-tray","7.composables\u002F5.use-tray",{"title":413,"path":414,"stem":415,"package":11,"category":11,"icon":352},"i18n composables","\u002Fcomposables\u002Fi18n-composables","7.composables\u002F6.i18n-composables",{"title":417,"path":418,"stem":419,"package":11,"category":11,"icon":420},"useId","\u002Fcomposables\u002Fuse-id","7.composables\u002F7.use-id","i-lucide-hash",{"title":422,"path":423,"stem":424,"package":11,"category":11,"icon":425},"useFilter","\u002Fcomposables\u002Fuse-filter","7.composables\u002F8.use-filter","i-lucide-filter",{"title":427,"path":428,"stem":429,"package":11,"category":11,"icon":430},"useForwardProps","\u002Fcomposables\u002Fuse-forward-props","7.composables\u002F9.use-forward-props","i-lucide-arrow-right-left",{"title":432,"path":433,"stem":434,"children":435,"package":11,"category":11,"icon":437},"Guides","\u002Fguides","8.guides\u002F1.index",[436,438,442,447,451,456,461,466,470,475,479,484],{"title":432,"path":433,"stem":434,"package":11,"category":11,"icon":437},"i-lucide-book-open",{"title":439,"path":440,"stem":441,"package":11,"category":11,"icon":364},"Instant first frame","\u002Fguides\u002Finstant-first-frame-rendering","8.guides\u002F10.instant-first-frame-rendering",{"title":443,"path":444,"stem":445,"package":11,"category":11,"icon":446},"Why Vy UI","\u002Fguides\u002Fwhy-vy-ui","8.guides\u002F11.why-vy-ui","i-lucide-help-circle",{"title":448,"path":449,"stem":450,"package":11,"category":11,"icon":22},"Sparkling","\u002Fguides\u002Fsparkling","8.guides\u002F12.sparkling",{"title":452,"path":453,"stem":454,"package":11,"category":11,"icon":455},"Lynx UI frameworks","\u002Fguides\u002Flynx-ui-frameworks","8.guides\u002F2.lynx-ui-frameworks","i-lucide-library",{"title":457,"path":458,"stem":459,"package":11,"category":11,"icon":460},"Vue Lynx","\u002Fguides\u002Fvue-lynx","8.guides\u002F3.vue-lynx","i-lucide-component",{"title":462,"path":463,"stem":464,"package":11,"category":11,"icon":465},"Lynx vs React Native","\u002Fguides\u002Flynx-vs-react-native","8.guides\u002F4.lynx-vs-react-native","i-lucide-git-compare",{"title":467,"path":468,"stem":469,"package":11,"category":11,"icon":83},"Testing on device","\u002Fguides\u002Ftesting-on-device","8.guides\u002F5.testing-on-device",{"title":471,"path":472,"stem":473,"package":11,"category":11,"icon":474},"Testing with Xcode","\u002Fguides\u002Ftesting-with-xcode","8.guides\u002F6.testing-with-xcode","i-lucide-apple",{"title":476,"path":477,"stem":478,"package":11,"category":11,"icon":27},"rspeedy dev server","\u002Fguides\u002Frspeedy-dev-server","8.guides\u002F7.rspeedy-dev-server",{"title":480,"path":481,"stem":482,"package":11,"category":11,"icon":483},"Tailwind on Lynx","\u002Fguides\u002Ftailwind-on-lynx","8.guides\u002F8.tailwind-on-lynx","i-lucide-wind",{"title":485,"path":486,"stem":487,"package":11,"category":11,"icon":488},"Theming on Lynx","\u002Fguides\u002Ftheming-on-lynx","8.guides\u002F9.theming-on-lynx","i-lucide-paintbrush",{"id":490,"title":157,"body":491,"category":109,"description":1463,"extension":1464,"links":1465,"meta":1471,"navigation":1472,"package":63,"path":158,"seo":1473,"stem":159,"__hash__":1474},"docs\u002F3.components\u002Fform-field.md",{"type":492,"value":493,"toc":1448},"minimark",[494,499,529,533,551,1005,1014,1019,1024,1164,1168,1188,1192,1240,1244,1248,1251,1255,1258,1262,1272,1377,1391,1394,1409,1413,1444],[495,496,498],"h2",{"id":497},"overview","Overview",[500,501,502,506,507,509,510,513,514,520,521,524,525,528],"p",{},[503,504,505],"code",{},"VyFormField"," wraps the headless ",[503,508,41],{}," ",[503,511,512],{},"FormField"," with the text scaffold around a control: label, description, hint, help, and error. Inside a ",[515,516,517],"a",{"href":153},[503,518,519],{},"VyForm"," it registers itself under ",[503,522,523],{},"name",", runs its ",[503,526,527],{},"validators",", and renders the resulting error; on its own it still renders the scaffold, but the value and error are yours to supply.",[495,530,532],{"id":531},"usage","Usage",[500,534,535,536,539,540,539,543,546,547,550],{},"The default slot receives the field's live ",[503,537,538],{},"value",", ",[503,541,542],{},"error",[503,544,545],{},"setValue",", and ",[503,548,549],{},"disabled",". Kit controls do not read the field context on their own, so bind them through the slot.",[552,553,558],"pre",{"className":554,"code":555,"language":556,"meta":557,"style":557},"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","",[503,559,560,595,624,645,666,673,726,736,741,751,773,782,798,813,828,843,849,864,870,907,916,931,946,960,966,976,986,996],{"__ignoreMap":557},[561,562,565,569,573,577,580,583,586,590,592],"span",{"class":563,"line":564},"line",1,[561,566,568],{"class":567},"sMK4o","\u003C",[561,570,572],{"class":571},"swJcz","script",[561,574,576],{"class":575},"spNyl"," setup",[561,578,579],{"class":575}," lang",[561,581,582],{"class":567},"=",[561,584,585],{"class":567},"\"",[561,587,589],{"class":588},"sfazB","ts",[561,591,585],{"class":567},[561,593,594],{"class":567},">\n",[561,596,598,602,605,609,612,615,618,621],{"class":563,"line":597},2,[561,599,601],{"class":600},"s7zQu","import",[561,603,604],{"class":567}," {",[561,606,608],{"class":607},"sTEyZ"," VyForm",[561,610,611],{"class":567}," }",[561,613,614],{"class":600}," from",[561,616,617],{"class":567}," '",[561,619,620],{"class":588},"@vyui\u002Fkit\u002Fform",[561,622,623],{"class":567},"'\n",[561,625,627,629,631,634,636,638,640,643],{"class":563,"line":626},3,[561,628,601],{"class":600},[561,630,604],{"class":567},[561,632,633],{"class":607}," VyFormField",[561,635,611],{"class":567},[561,637,614],{"class":600},[561,639,617],{"class":567},[561,641,642],{"class":588},"@vyui\u002Fkit\u002Fform-field",[561,644,623],{"class":567},[561,646,648,650,652,655,657,659,661,664],{"class":563,"line":647},4,[561,649,601],{"class":600},[561,651,604],{"class":567},[561,653,654],{"class":607}," VyInput",[561,656,611],{"class":567},[561,658,614],{"class":600},[561,660,617],{"class":567},[561,662,663],{"class":588},"@vyui\u002Fkit\u002Finput",[561,665,623],{"class":567},[561,667,669],{"class":563,"line":668},5,[561,670,672],{"emptyLinePlaceholder":671},true,"\n",[561,674,676,679,682,684,687,690,693,697,700,703,706,709,712,715,717,720,723],{"class":563,"line":675},6,[561,677,678],{"class":575},"const",[561,680,681],{"class":607}," required ",[561,683,582],{"class":567},[561,685,686],{"class":567}," (",[561,688,538],{"class":689},"sHdIc",[561,691,692],{"class":567},":",[561,694,696],{"class":695},"sBMFI"," unknown",[561,698,699],{"class":567},")",[561,701,702],{"class":575}," =>",[561,704,705],{"class":607}," (value ",[561,707,708],{"class":567},"?",[561,710,711],{"class":567}," null",[561,713,714],{"class":567}," :",[561,716,617],{"class":567},[561,718,719],{"class":588},"Email is required",[561,721,722],{"class":567},"'",[561,724,725],{"class":607},")\n",[561,727,729,732,734],{"class":563,"line":728},7,[561,730,731],{"class":567},"\u003C\u002F",[561,733,572],{"class":571},[561,735,594],{"class":567},[561,737,739],{"class":563,"line":738},8,[561,740,672],{"emptyLinePlaceholder":671},[561,742,744,746,749],{"class":563,"line":743},9,[561,745,568],{"class":567},[561,747,748],{"class":571},"template",[561,750,594],{"class":567},[561,752,754,757,759,762,764,766,769,771],{"class":563,"line":753},10,[561,755,756],{"class":567},"  \u003C",[561,758,519],{"class":571},[561,760,761],{"class":575}," :default-values",[561,763,582],{"class":567},[561,765,585],{"class":567},[561,767,768],{"class":588},"{ email: '' }",[561,770,585],{"class":567},[561,772,594],{"class":567},[561,774,776,779],{"class":563,"line":775},11,[561,777,778],{"class":567},"    \u003C",[561,780,781],{"class":571},"VyFormField\n",[561,783,785,788,790,792,795],{"class":563,"line":784},12,[561,786,787],{"class":575},"      name",[561,789,582],{"class":567},[561,791,585],{"class":567},[561,793,794],{"class":588},"email",[561,796,797],{"class":567},"\"\n",[561,799,801,804,806,808,811],{"class":563,"line":800},13,[561,802,803],{"class":575},"      label",[561,805,582],{"class":567},[561,807,585],{"class":567},[561,809,810],{"class":588},"Email",[561,812,797],{"class":567},[561,814,816,819,821,823,826],{"class":563,"line":815},14,[561,817,818],{"class":575},"      description",[561,820,582],{"class":567},[561,822,585],{"class":567},[561,824,825],{"class":588},"We only use this to send receipts.",[561,827,797],{"class":567},[561,829,831,834,836,838,841],{"class":563,"line":830},15,[561,832,833],{"class":575},"      help",[561,835,582],{"class":567},[561,837,585],{"class":567},[561,839,840],{"class":588},"Work addresses are fine.",[561,842,797],{"class":567},[561,844,846],{"class":563,"line":845},16,[561,847,848],{"class":575},"      required\n",[561,850,852,855,857,859,862],{"class":563,"line":851},17,[561,853,854],{"class":575},"      :validators",[561,856,582],{"class":567},[561,858,585],{"class":567},[561,860,861],{"class":588},"[required]",[561,863,797],{"class":567},[561,865,867],{"class":563,"line":866},18,[561,868,869],{"class":567},"    >\n",[561,871,873,876,878,881,884,886,888,891,894,897,900,903,905],{"class":563,"line":872},19,[561,874,875],{"class":567},"      \u003C",[561,877,748],{"class":571},[561,879,880],{"class":567}," #",[561,882,883],{"class":575},"default",[561,885,582],{"class":567},[561,887,585],{"class":567},[561,889,890],{"class":567},"{",[561,892,893],{"class":607}," value",[561,895,896],{"class":567},",",[561,898,899],{"class":607}," setValue ",[561,901,902],{"class":567},"}",[561,904,585],{"class":567},[561,906,594],{"class":567},[561,908,910,913],{"class":563,"line":909},20,[561,911,912],{"class":567},"        \u003C",[561,914,915],{"class":571},"VyInput\n",[561,917,919,922,924,926,929],{"class":563,"line":918},21,[561,920,921],{"class":575},"          :model-value",[561,923,582],{"class":567},[561,925,585],{"class":567},[561,927,928],{"class":588},"value as string",[561,930,797],{"class":567},[561,932,934,937,939,941,944],{"class":563,"line":933},22,[561,935,936],{"class":575},"          placeholder",[561,938,582],{"class":567},[561,940,585],{"class":567},[561,942,943],{"class":588},"you@example.com",[561,945,797],{"class":567},[561,947,949,952,954,956,958],{"class":563,"line":948},23,[561,950,951],{"class":575},"          @update:model-value",[561,953,582],{"class":567},[561,955,585],{"class":567},[561,957,545],{"class":588},[561,959,797],{"class":567},[561,961,963],{"class":563,"line":962},24,[561,964,965],{"class":567},"        \u002F>\n",[561,967,969,972,974],{"class":563,"line":968},25,[561,970,971],{"class":567},"      \u003C\u002F",[561,973,748],{"class":571},[561,975,594],{"class":567},[561,977,979,982,984],{"class":563,"line":978},26,[561,980,981],{"class":567},"    \u003C\u002F",[561,983,505],{"class":571},[561,985,594],{"class":567},[561,987,989,992,994],{"class":563,"line":988},27,[561,990,991],{"class":567},"  \u003C\u002F",[561,993,519],{"class":571},[561,995,594],{"class":567},[561,997,999,1001,1003],{"class":563,"line":998},28,[561,1000,731],{"class":567},[561,1002,748],{"class":571},[561,1004,594],{"class":567},[500,1006,1007,1008,1010,1011,1013],{},"Passing only ",[503,1009,523],{}," to the control forwards the name to the native input; it does not connect the control to the form. Use ",[503,1012,545],{}," from the slot.",[1015,1016,1018],"h3",{"id":1017},"manual-error","Manual error",[500,1020,1021,1023],{},[503,1022,542],{}," overrides whatever the surrounding form derived, for server-side validation or a control that validates itself.",[552,1025,1027],{"className":554,"code":1026,"language":556,"meta":557,"style":557},"\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",[503,1028,1029,1037,1080,1108,1140,1148,1156],{"__ignoreMap":557},[561,1030,1031,1033,1035],{"class":563,"line":564},[561,1032,568],{"class":567},[561,1034,748],{"class":571},[561,1036,594],{"class":567},[561,1038,1039,1041,1043,1046,1048,1050,1052,1054,1057,1059,1061,1064,1066,1069,1071,1073,1076,1078],{"class":563,"line":597},[561,1040,756],{"class":567},[561,1042,505],{"class":571},[561,1044,1045],{"class":575}," name",[561,1047,582],{"class":567},[561,1049,585],{"class":567},[561,1051,503],{"class":588},[561,1053,585],{"class":567},[561,1055,1056],{"class":575}," label",[561,1058,582],{"class":567},[561,1060,585],{"class":567},[561,1062,1063],{"class":588},"Invite code",[561,1065,585],{"class":567},[561,1067,1068],{"class":575}," :error",[561,1070,582],{"class":567},[561,1072,585],{"class":567},[561,1074,1075],{"class":588},"serverError",[561,1077,585],{"class":567},[561,1079,594],{"class":567},[561,1081,1082,1084,1086,1088,1090,1092,1094,1096,1098,1100,1102,1104,1106],{"class":563,"line":626},[561,1083,778],{"class":567},[561,1085,748],{"class":571},[561,1087,880],{"class":567},[561,1089,883],{"class":575},[561,1091,582],{"class":567},[561,1093,585],{"class":567},[561,1095,890],{"class":567},[561,1097,893],{"class":607},[561,1099,896],{"class":567},[561,1101,899],{"class":607},[561,1103,902],{"class":567},[561,1105,585],{"class":567},[561,1107,594],{"class":567},[561,1109,1110,1112,1115,1118,1120,1122,1124,1126,1129,1131,1133,1135,1137],{"class":563,"line":647},[561,1111,875],{"class":567},[561,1113,1114],{"class":571},"VyPinInput",[561,1116,1117],{"class":575}," :model-value",[561,1119,582],{"class":567},[561,1121,585],{"class":567},[561,1123,928],{"class":588},[561,1125,585],{"class":567},[561,1127,1128],{"class":575}," @update:model-value",[561,1130,582],{"class":567},[561,1132,585],{"class":567},[561,1134,545],{"class":588},[561,1136,585],{"class":567},[561,1138,1139],{"class":567}," \u002F>\n",[561,1141,1142,1144,1146],{"class":563,"line":668},[561,1143,981],{"class":567},[561,1145,748],{"class":571},[561,1147,594],{"class":567},[561,1149,1150,1152,1154],{"class":563,"line":675},[561,1151,991],{"class":567},[561,1153,505],{"class":571},[561,1155,594],{"class":567},[561,1157,1158,1160,1162],{"class":563,"line":728},[561,1159,731],{"class":567},[561,1161,748],{"class":571},[561,1163,594],{"class":567},[1015,1165,1167],{"id":1166},"slot-overrides","Slot overrides",[500,1169,1170,539,1173,539,1176,539,1179,546,1182,1184,1185,1187],{},[503,1171,1172],{},"label",[503,1174,1175],{},"description",[503,1177,1178],{},"hint",[503,1180,1181],{},"help",[503,1183,542],{}," each take a slot when text alone is not enough. The ",[503,1186,542],{}," slot receives the resolved message.",[495,1189,1191],{"id":1190},"features-and-behavior","Features and behavior",[1193,1194,1195,1201,1206,1219,1225,1231,1234],"ul",{},[1196,1197,1198,1200],"li",{},[503,1199,523],{}," must be unique inside the parent form and is treated as static — swapping it at runtime orphans the registration.",[1196,1202,1203,1205],{},[503,1204,527],{}," run synchronously on submit and stop at the first non-null message.",[1196,1207,1208,1211,1212,1215,1216,1218],{},[503,1209,1210],{},"defaultValue"," seeds the field only when the form's ",[503,1213,1214],{},"defaultValues"," has no entry for ",[503,1217,523],{},".",[1196,1220,1221,1222,1224],{},"The error text replaces ",[503,1223,1181],{}," while it is showing; the two never render together.",[1196,1226,1227,1230],{},[503,1228,1229],{},"required"," appends a red asterisk to the label, and is presentational — pair it with a validator to actually enforce the field.",[1196,1232,1233],{},"Label and hint share one row; description sits under them, and both blocks are omitted when their props and slots are empty.",[1196,1235,1236,1237,1239],{},"Outside a ",[503,1238,519],{}," the component throws, because the core primitive injects the form root context.",[495,1241,1243],{"id":1242},"api","API",[1015,1245,1247],{"id":1246},"props","Props",[1249,1250],"component-props",{"name":512},[1015,1252,1254],{"id":1253},"slots","Slots",[1256,1257],"component-slots",{"name":512},[495,1259,1261],{"id":1260},"styling-and-theming","Styling and theming",[500,1263,1264,1265,1268,1269,1218],{},"Override globally through ",[503,1266,1267],{},"appConfig.ui.formField"," or per instance with ",[503,1270,1271],{},"ui",[1273,1274,1275,1288],"table",{},[1276,1277,1278],"thead",{},[1279,1280,1281,1285],"tr",{},[1282,1283,1284],"th",{},"UI slot",[1282,1286,1287],{},"Purpose",[1289,1290,1291,1302,1312,1322,1331,1340,1350,1359,1368],"tbody",{},[1279,1292,1293,1299],{},[1294,1295,1296],"td",{},[503,1297,1298],{},"root",[1294,1300,1301],{},"Vertical stack for the whole field.",[1279,1303,1304,1309],{},[1294,1305,1306],{},[503,1307,1308],{},"wrapper",[1294,1310,1311],{},"Label, hint, and description block.",[1279,1313,1314,1319],{},[1294,1315,1316],{},[503,1317,1318],{},"labelWrapper",[1294,1320,1321],{},"Row holding the label and the right-aligned hint.",[1279,1323,1324,1328],{},[1294,1325,1326],{},[503,1327,1172],{},[1294,1329,1330],{},"Label text, plus the required asterisk.",[1279,1332,1333,1337],{},[1294,1334,1335],{},[503,1336,1175],{},[1294,1338,1339],{},"Text between the label and the control.",[1279,1341,1342,1347],{},[1294,1343,1344],{},[503,1345,1346],{},"container",[1294,1348,1349],{},"Wrapper around the control slot.",[1279,1351,1352,1356],{},[1294,1353,1354],{},[503,1355,542],{},[1294,1357,1358],{},"Error message under the control.",[1279,1360,1361,1365],{},[1294,1362,1363],{},[503,1364,1178],{},[1294,1366,1367],{},"Auxiliary text next to the label.",[1279,1369,1370,1374],{},[1294,1371,1372],{},[503,1373,1181],{},[1294,1375,1376],{},"Helper text under the control.",[500,1378,1379,1382,1383,1386,1387,1390],{},[503,1380,1381],{},"size"," scales the label, description, hint, help, and error text from ",[503,1384,1385],{},"sm"," through ",[503,1388,1389],{},"xl","; it does not size the control itself.",[495,1392,344],{"id":1393},"accessibility",[500,1395,1396,1397,1400,1401,1404,1405,1408],{},"The scaffold is text next to a control, not a native label association — Lynx has no ",[503,1398,1399],{},"for","\u002F",[503,1402,1403],{},"id"," pairing. Screen readers announce the control by its own ",[503,1406,1407],{},"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.",[495,1410,1412],{"id":1411},"related-components","Related components",[1193,1414,1415,1422,1429],{},[1196,1416,1417,1421],{},[515,1418,1419],{"href":153},[503,1420,109],{}," collects the values these fields register.",[1196,1423,1424,1428],{},[515,1425,1426],{"href":192},[503,1427,191],{}," for a standalone label with no validation scaffold.",[1196,1430,1431,539,1435,546,1439,1443],{},[515,1432,1433],{"href":167},[503,1434,166],{},[515,1436,1437],{"href":298},[503,1438,297],{},[515,1440,1441],{"href":246},[503,1442,245],{}," for controls to place inside a field.",[1445,1446,1447],"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":557,"searchDepth":564,"depth":597,"links":1449},[1450,1451,1455,1456,1460,1461,1462],{"id":497,"depth":597,"text":498},{"id":531,"depth":597,"text":532,"children":1452},[1453,1454],{"id":1017,"depth":626,"text":1018},{"id":1166,"depth":626,"text":1167},{"id":1190,"depth":597,"text":1191},{"id":1242,"depth":597,"text":1243,"children":1457},[1458,1459],{"id":1246,"depth":626,"text":1247},{"id":1253,"depth":626,"text":1254},{"id":1260,"depth":597,"text":1261},{"id":1393,"depth":597,"text":344},{"id":1411,"depth":597,"text":1412},"Label, description, hint, help, and error scaffold around a single form control.","md",[1466],{"label":1467,"icon":1468,"to":1469,"target":1470},"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":1463},"mXokqA3MhAuyJ2x2257U5SXzh1KWTzJpCXxs7bT021M",[1476,1478],{"title":109,"path":153,"stem":154,"description":1477,"icon":-1,"children":-1,"navigation":-1},"A form container that tracks values, runs validators, and emits submit.",{"title":162,"path":163,"stem":164,"description":1479,"icon":-1,"children":-1,"navigation":-1},"Render registered Iconify data or a custom Vue component through Lynx-native SVG.",1789821794493]