[{"data":1,"prerenderedAt":923},["ShallowReactive",2],{"navigation_docs":3,"-form-getting-started-vue-rendering":82,"-form-getting-started-vue-rendering-surround":918},[4],{"title":5,"path":6,"stem":7,"children":8,"page":25},"Form","\u002Fform","1.getting-started",[9,26,58],{"title":10,"path":11,"stem":12,"children":13,"page":25},"Getting Started","\u002Fform\u002Fgetting-started","1.getting-started\u002F1.installation",[14,17,21],{"title":15,"path":16,"stem":12},"Installation","\u002Fform\u002Fgetting-started\u002Finstallation",{"title":18,"path":19,"stem":20},"Your first form","\u002Fform\u002Fgetting-started\u002Ffirst-form","1.getting-started\u002F2.first-form",{"title":22,"path":23,"stem":24},"Vue rendering","\u002Fform\u002Fgetting-started\u002Fvue-rendering","1.getting-started\u002F3.vue-rendering",false,{"title":27,"path":28,"stem":29,"children":30,"page":25},"Guide","\u002Fform\u002Fguide","2.guide\u002F1.forms-data-validation",[31,34,38,42,46,50,54],{"title":32,"path":33,"stem":29},"Forms, data, and validation","\u002Fform\u002Fguide\u002Fforms-data-validation",{"title":35,"path":36,"stem":37},"Fields and visibility","\u002Fform\u002Fguide\u002Ffields-visibility","2.guide\u002F2.fields-visibility",{"title":39,"path":40,"stem":41},"Renderers and composables","\u002Fform\u002Fguide\u002Frenderers-composables","2.guide\u002F3.renderers-composables",{"title":43,"path":44,"stem":45},"Collections and wizards","\u002Fform\u002Fguide\u002Fcollections-wizards","2.guide\u002F4.collections-wizards",{"title":47,"path":48,"stem":49},"Comboboxes","\u002Fform\u002Fguide\u002Fcomboboxes","2.guide\u002F5.comboboxes",{"title":51,"path":52,"stem":53},"Uploads","\u002Fform\u002Fguide\u002Fuploads","2.guide\u002F6.uploads",{"title":55,"path":56,"stem":57},"Composer and rich text","\u002Fform\u002Fguide\u002Fcomposer-rich-text","2.guide\u002F7.composer-rich-text",{"title":59,"path":60,"stem":61,"children":62,"page":25},"Reference","\u002Fform\u002Freference","3.reference\u002F1.fields",[63,66,70,74,78],{"title":64,"path":65,"stem":61},"Fields","\u002Fform\u002Freference\u002Ffields",{"title":67,"path":68,"stem":69},"PHP API","\u002Fform\u002Freference\u002Fphp-api","3.reference\u002F2.php-api",{"title":71,"path":72,"stem":73},"Vue API","\u002Fform\u002Freference\u002Fvue-api","3.reference\u002F3.vue-api",{"title":75,"path":76,"stem":77},"Configuration and commands","\u002Fform\u002Freference\u002Fconfiguration-commands","3.reference\u002F4.configuration-commands",{"title":79,"path":80,"stem":81},"Resource shape","\u002Fform\u002Freference\u002Fresource-shape","3.reference\u002F5.resource-shape",{"id":83,"title":22,"body":84,"description":912,"extension":913,"links":914,"meta":915,"navigation":229,"path":23,"seo":916,"stem":24,"__hash__":917},"docs\u002Fform\u002F1.getting-started\u002F3.vue-rendering.md",{"type":85,"value":86,"toc":907},"minimark",[87,106,115,120,818,828,832,837,864,875,879,896,903],[88,89,90,93,94,97,98,101,102,105],"p",{},[91,92,5],"code",{}," creates the client-side engine, provides it to descendants, and renders the native ",[91,95,96],{},"\u003Cform>"," element around its slot content. Reach for ",[91,99,100],{},"FormProvider"," when the element belongs elsewhere—it is the same component without the element. ",[91,103,104],{},"createFormRenderer()"," creates schema traversal components without registering global state or emitting wrapper markup.",[107,108,109,111,112,114],"warning",{},[91,110,5],{}," owns the ",[91,113,96],{}," element. Do not nest your own inside it: the HTML parser drops nested forms, and the submit handler goes with them.",[116,117,119],"h2",{"id":118},"render-fields-with-slots","Render fields with slots",[121,122,128],"pre",{"className":123,"code":124,"filename":125,"language":126,"meta":127,"style":127},"language-vue shiki shiki-themes material-theme-lighter catppuccin-mocha catppuccin-mocha","\u003Cscript setup lang=\"ts\">\nimport {\n  createFormRenderer,\n  Form,\n  type FormResource,\n} from '@inertify\u002Fform-vue'\n\ndefineProps\u003C{ form: FormResource }>()\n\nconst { FormFields } = createFormRenderer()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CForm :form=\"form\" v-slot=\"{ form: context, processing }\">\n    \u003CFormFields :form=\"context\">\n      \u003Ctemplate\n        #type-text=\"{\n          field,\n          name,\n          value,\n          error,\n          disabled,\n          readonly,\n          setValue,\n          blur,\n          registerElement,\n        }\"\n      >\n        \u003Clabel :for=\"`field-${name}`\">{{ field.label }}\u003C\u002Flabel>\n        \u003Cinput\n          :id=\"`field-${name}`\"\n          :ref=\"registerElement\"\n          :name=\"name\"\n          :value=\"value\"\n          :placeholder=\"field.placeholder\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          @input=\"setValue(($event.target as HTMLInputElement).value)\"\n          @blur=\"blur\"\n        >\n        \u003Cp v-if=\"error\" role=\"alert\">{{ error }}\u003C\u002Fp>\n      \u003C\u002Ftemplate>\n    \u003C\u002FFormFields>\n\n    \u003Cbutton type=\"submit\" :disabled=\"processing\">\n      Save\n    \u003C\u002Fbutton>\n  \u003C\u002FForm>\n\u003C\u002Ftemplate>\n","resources\u002Fjs\u002FPages\u002FProfiles\u002FEdit.vue","vue","",[91,129,130,166,177,187,195,206,224,231,263,268,291,301,306,316,367,391,400,416,424,432,440,448,456,464,472,480,488,497,503,535,543,557,572,587,602,617,632,647,662,677,683,725,735,745,750,784,790,799,809],{"__ignoreMap":127},[131,132,135,139,143,147,150,153,157,161,163],"span",{"class":133,"line":134},"line",1,[131,136,138],{"class":137},"sWTNM","\u003C",[131,140,142],{"class":141},"sgRj0","script",[131,144,146],{"class":145},"sGkbZ"," setup",[131,148,149],{"class":145}," lang",[131,151,152],{"class":137},"=",[131,154,156],{"class":155},"sQGZM","\"",[131,158,160],{"class":159},"s2lAL","ts",[131,162,156],{"class":155},[131,164,165],{"class":137},">\n",[131,167,169,173],{"class":133,"line":168},2,[131,170,172],{"class":171},"su_vF","import",[131,174,176],{"class":175},"sOG8g"," {\n",[131,178,180,184],{"class":133,"line":179},3,[131,181,183],{"class":182},"svMjs","  createFormRenderer",[131,185,186],{"class":175},",\n",[131,188,190,193],{"class":133,"line":189},4,[131,191,192],{"class":182},"  Form",[131,194,186],{"class":175},[131,196,198,201,204],{"class":133,"line":197},5,[131,199,200],{"class":171},"  type",[131,202,203],{"class":182}," FormResource",[131,205,186],{"class":175},[131,207,209,212,215,218,221],{"class":133,"line":208},6,[131,210,211],{"class":175},"}",[131,213,214],{"class":171}," from",[131,216,217],{"class":155}," '",[131,219,220],{"class":159},"@inertify\u002Fform-vue",[131,222,223],{"class":155},"'\n",[131,225,227],{"class":133,"line":226},7,[131,228,230],{"emptyLinePlaceholder":229},true,"\n",[131,232,234,238,241,244,248,251,254,257,260],{"class":133,"line":233},8,[131,235,237],{"class":236},"sgeHj","defineProps",[131,239,138],{"class":240},"sdlML",[131,242,243],{"class":175},"{",[131,245,247],{"class":246},"spHpb"," form",[131,249,250],{"class":137},":",[131,252,203],{"class":253},"s6-7G",[131,255,256],{"class":175}," }",[131,258,259],{"class":240},">",[131,261,262],{"class":182},"()\n",[131,264,266],{"class":133,"line":265},9,[131,267,230],{"emptyLinePlaceholder":229},[131,269,271,275,278,281,283,286,289],{"class":133,"line":270},10,[131,272,274],{"class":273},"sNFzF","const",[131,276,277],{"class":175}," {",[131,279,280],{"class":182}," FormFields ",[131,282,211],{"class":175},[131,284,285],{"class":137}," =",[131,287,288],{"class":236}," createFormRenderer",[131,290,262],{"class":182},[131,292,294,297,299],{"class":133,"line":293},11,[131,295,296],{"class":137},"\u003C\u002F",[131,298,142],{"class":141},[131,300,165],{"class":137},[131,302,304],{"class":133,"line":303},12,[131,305,230],{"emptyLinePlaceholder":229},[131,307,309,311,314],{"class":133,"line":308},13,[131,310,138],{"class":137},[131,312,313],{"class":141},"template",[131,315,165],{"class":137},[131,317,319,322,324,327,330,332,334,336,338,341,343,345,347,350,352,355,358,361,363,365],{"class":133,"line":318},14,[131,320,321],{"class":137},"  \u003C",[131,323,5],{"class":141},[131,325,326],{"class":175}," :",[131,328,329],{"class":145},"form",[131,331,152],{"class":137},[131,333,156],{"class":155},[131,335,329],{"class":182},[131,337,156],{"class":155},[131,339,340],{"class":145}," v-slot",[131,342,152],{"class":137},[131,344,156],{"class":155},[131,346,243],{"class":175},[131,348,247],{"class":349},"sHTG8",[131,351,250],{"class":137},[131,353,354],{"class":182}," context",[131,356,357],{"class":175},",",[131,359,360],{"class":182}," processing",[131,362,256],{"class":175},[131,364,156],{"class":155},[131,366,165],{"class":137},[131,368,370,373,376,378,380,382,384,387,389],{"class":133,"line":369},15,[131,371,372],{"class":137},"    \u003C",[131,374,375],{"class":141},"FormFields",[131,377,326],{"class":175},[131,379,329],{"class":145},[131,381,152],{"class":137},[131,383,156],{"class":155},[131,385,386],{"class":182},"context",[131,388,156],{"class":155},[131,390,165],{"class":137},[131,392,394,397],{"class":133,"line":393},16,[131,395,396],{"class":137},"      \u003C",[131,398,399],{"class":141},"template\n",[131,401,403,406,409,411,413],{"class":133,"line":402},17,[131,404,405],{"class":175},"        #",[131,407,408],{"class":145},"type-text",[131,410,152],{"class":137},[131,412,156],{"class":155},[131,414,415],{"class":175},"{\n",[131,417,419,422],{"class":133,"line":418},18,[131,420,421],{"class":182},"          field",[131,423,186],{"class":175},[131,425,427,430],{"class":133,"line":426},19,[131,428,429],{"class":182},"          name",[131,431,186],{"class":175},[131,433,435,438],{"class":133,"line":434},20,[131,436,437],{"class":182},"          value",[131,439,186],{"class":175},[131,441,443,446],{"class":133,"line":442},21,[131,444,445],{"class":182},"          error",[131,447,186],{"class":175},[131,449,451,454],{"class":133,"line":450},22,[131,452,453],{"class":182},"          disabled",[131,455,186],{"class":175},[131,457,459,462],{"class":133,"line":458},23,[131,460,461],{"class":182},"          readonly",[131,463,186],{"class":175},[131,465,467,470],{"class":133,"line":466},24,[131,468,469],{"class":182},"          setValue",[131,471,186],{"class":175},[131,473,475,478],{"class":133,"line":474},25,[131,476,477],{"class":182},"          blur",[131,479,186],{"class":175},[131,481,483,486],{"class":133,"line":482},26,[131,484,485],{"class":182},"          registerElement",[131,487,186],{"class":175},[131,489,491,494],{"class":133,"line":490},27,[131,492,493],{"class":175},"        }",[131,495,496],{"class":155},"\"\n",[131,498,500],{"class":133,"line":499},28,[131,501,502],{"class":137},"      >\n",[131,504,506,509,512,515,517,519,522,524,526,529,531,533],{"class":133,"line":505},29,[131,507,508],{"class":137},"        \u003C",[131,510,511],{"class":141},"label",[131,513,514],{"class":145}," :for",[131,516,152],{"class":137},[131,518,156],{"class":155},[131,520,521],{"class":159},"`field-${name}`",[131,523,156],{"class":155},[131,525,259],{"class":137},[131,527,528],{"class":182},"{{ field.label }}",[131,530,296],{"class":137},[131,532,511],{"class":141},[131,534,165],{"class":137},[131,536,538,540],{"class":133,"line":537},30,[131,539,508],{"class":137},[131,541,542],{"class":141},"input\n",[131,544,546,549,551,553,555],{"class":133,"line":545},31,[131,547,548],{"class":145},"          :id",[131,550,152],{"class":137},[131,552,156],{"class":155},[131,554,521],{"class":159},[131,556,496],{"class":155},[131,558,560,563,565,567,570],{"class":133,"line":559},32,[131,561,562],{"class":145},"          :ref",[131,564,152],{"class":137},[131,566,156],{"class":155},[131,568,569],{"class":159},"registerElement",[131,571,496],{"class":155},[131,573,575,578,580,582,585],{"class":133,"line":574},33,[131,576,577],{"class":145},"          :name",[131,579,152],{"class":137},[131,581,156],{"class":155},[131,583,584],{"class":159},"name",[131,586,496],{"class":155},[131,588,590,593,595,597,600],{"class":133,"line":589},34,[131,591,592],{"class":145},"          :value",[131,594,152],{"class":137},[131,596,156],{"class":155},[131,598,599],{"class":159},"value",[131,601,496],{"class":155},[131,603,605,608,610,612,615],{"class":133,"line":604},35,[131,606,607],{"class":145},"          :placeholder",[131,609,152],{"class":137},[131,611,156],{"class":155},[131,613,614],{"class":159},"field.placeholder",[131,616,496],{"class":155},[131,618,620,623,625,627,630],{"class":133,"line":619},36,[131,621,622],{"class":145},"          :disabled",[131,624,152],{"class":137},[131,626,156],{"class":155},[131,628,629],{"class":159},"disabled",[131,631,496],{"class":155},[131,633,635,638,640,642,645],{"class":133,"line":634},37,[131,636,637],{"class":145},"          :readonly",[131,639,152],{"class":137},[131,641,156],{"class":155},[131,643,644],{"class":159},"readonly",[131,646,496],{"class":155},[131,648,650,653,655,657,660],{"class":133,"line":649},38,[131,651,652],{"class":145},"          @input",[131,654,152],{"class":137},[131,656,156],{"class":155},[131,658,659],{"class":159},"setValue(($event.target as HTMLInputElement).value)",[131,661,496],{"class":155},[131,663,665,668,670,672,675],{"class":133,"line":664},39,[131,666,667],{"class":145},"          @blur",[131,669,152],{"class":137},[131,671,156],{"class":155},[131,673,674],{"class":159},"blur",[131,676,496],{"class":155},[131,678,680],{"class":133,"line":679},40,[131,681,682],{"class":137},"        >\n",[131,684,686,688,690,693,695,697,700,702,705,707,709,712,714,716,719,721,723],{"class":133,"line":685},41,[131,687,508],{"class":137},[131,689,88],{"class":141},[131,691,692],{"class":145}," v-if",[131,694,152],{"class":137},[131,696,156],{"class":155},[131,698,699],{"class":159},"error",[131,701,156],{"class":155},[131,703,704],{"class":145}," role",[131,706,152],{"class":137},[131,708,156],{"class":155},[131,710,711],{"class":159},"alert",[131,713,156],{"class":155},[131,715,259],{"class":137},[131,717,718],{"class":182},"{{ error }}",[131,720,296],{"class":137},[131,722,88],{"class":141},[131,724,165],{"class":137},[131,726,728,731,733],{"class":133,"line":727},42,[131,729,730],{"class":137},"      \u003C\u002F",[131,732,313],{"class":141},[131,734,165],{"class":137},[131,736,738,741,743],{"class":133,"line":737},43,[131,739,740],{"class":137},"    \u003C\u002F",[131,742,375],{"class":141},[131,744,165],{"class":137},[131,746,748],{"class":133,"line":747},44,[131,749,230],{"emptyLinePlaceholder":229},[131,751,753,755,758,761,763,765,768,770,773,775,777,780,782],{"class":133,"line":752},45,[131,754,372],{"class":137},[131,756,757],{"class":141},"button",[131,759,760],{"class":145}," type",[131,762,152],{"class":137},[131,764,156],{"class":155},[131,766,767],{"class":159},"submit",[131,769,156],{"class":155},[131,771,772],{"class":145}," :disabled",[131,774,152],{"class":137},[131,776,156],{"class":155},[131,778,779],{"class":159},"processing",[131,781,156],{"class":155},[131,783,165],{"class":137},[131,785,787],{"class":133,"line":786},46,[131,788,789],{"class":182},"      Save\n",[131,791,793,795,797],{"class":133,"line":792},47,[131,794,740],{"class":137},[131,796,757],{"class":141},[131,798,165],{"class":137},[131,800,802,805,807],{"class":133,"line":801},48,[131,803,804],{"class":137},"  \u003C\u002F",[131,806,5],{"class":141},[131,808,165],{"class":137},[131,810,812,814,816],{"class":133,"line":811},49,[131,813,296],{"class":137},[131,815,313],{"class":141},[131,817,165],{"class":137},[88,819,820,821,823,824,827],{},"Register the consumer-owned input with ",[91,822,569],{}," when you want ",[91,825,826],{},"scrollToFirstError"," to focus it. The slot also exposes the field controller, all errors, semantic state, validation, visibility, and mutation helpers.",[116,829,831],{"id":830},"slot-precedence","Slot precedence",[88,833,834,836],{},[91,835,375],{}," resolves a field slot in this order:",[838,839,840,847,853,858],"ol",{},[841,842,843,846],"li",{},[91,844,845],{},"field-{path}",", using the fully qualified data path",[841,848,849,852],{},[91,850,851],{},"type-{component}",", normalized to kebab case",[841,854,855],{},[91,856,857],{},"default",[841,859,860,863],{},[91,861,862],{},"{name}-field",", a deprecated compatibility fallback",[88,865,866,867,870,871,874],{},"Use ",[91,868,869],{},"before-{path}-field"," and ",[91,872,873],{},"after-{path}-field"," for insertion points.",[116,876,878],{"id":877},"reuse-your-renderers","Reuse your renderers",[88,880,881,882,884,885,870,888,890,891,895],{},"For larger applications, pass application-owned Vue components to ",[91,883,104],{}," once and export the generated ",[91,886,887],{},"FormField",[91,889,375],{}," components. Read ",[892,893,894],"a",{"href":40},"renderers and composables"," for the registry shape and lower-level APIs.",[897,898,899,900,902],"note",{},"The package includes no HTML field presenter, CSS, Tailwind preset, shadcn component, icon, or editor. Apart from the unstyled ",[91,901,96],{}," element, every element above belongs entirely to the consuming application.",[904,905,906],"style",{},"html pre.shiki code .sWTNM, html code.shiki .sWTNM{--shiki-light:#39ADB5;--shiki-default:#94E2D5;--shiki-dark:#94E2D5}html pre.shiki code .sgRj0, html code.shiki .sgRj0{--shiki-light:#E53935;--shiki-default:#89B4FA;--shiki-dark:#89B4FA}html pre.shiki code .sGkbZ, html code.shiki .sGkbZ{--shiki-light:#9C3EDA;--shiki-default:#F9E2AF;--shiki-dark:#F9E2AF}html pre.shiki code .sQGZM, html code.shiki .sQGZM{--shiki-light:#39ADB5;--shiki-default:#A6E3A1;--shiki-dark:#A6E3A1}html pre.shiki code .s2lAL, html code.shiki .s2lAL{--shiki-light:#91B859;--shiki-default:#A6E3A1;--shiki-dark:#A6E3A1}html pre.shiki code .su_vF, html code.shiki .su_vF{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#CBA6F7;--shiki-default-font-style:inherit;--shiki-dark:#CBA6F7;--shiki-dark-font-style:inherit}html pre.shiki code .sOG8g, html code.shiki .sOG8g{--shiki-light:#39ADB5;--shiki-default:#9399B2;--shiki-dark:#9399B2}html pre.shiki code .svMjs, html code.shiki .svMjs{--shiki-light:#90A4AE;--shiki-default:#CDD6F4;--shiki-dark:#CDD6F4}html pre.shiki code .sgeHj, html code.shiki .sgeHj{--shiki-light:#6182B8;--shiki-light-font-style:inherit;--shiki-default:#89B4FA;--shiki-default-font-style:italic;--shiki-dark:#89B4FA;--shiki-dark-font-style:italic}html pre.shiki code .sdlML, html code.shiki .sdlML{--shiki-light:#39ADB5;--shiki-default:#89DCEB;--shiki-dark:#89DCEB}html pre.shiki code .spHpb, html code.shiki .spHpb{--shiki-light:#E53935;--shiki-light-font-style:inherit;--shiki-default:#CDD6F4;--shiki-default-font-style:italic;--shiki-dark:#CDD6F4;--shiki-dark-font-style:italic}html pre.shiki code .s6-7G, html code.shiki .s6-7G{--shiki-light:#E2931D;--shiki-light-font-style:inherit;--shiki-default:#F9E2AF;--shiki-default-font-style:italic;--shiki-dark:#F9E2AF;--shiki-dark-font-style:italic}html pre.shiki code .sNFzF, html code.shiki .sNFzF{--shiki-light:#9C3EDA;--shiki-default:#CBA6F7;--shiki-dark:#CBA6F7}html pre.shiki code .sHTG8, html code.shiki .sHTG8{--shiki-light:#E53935;--shiki-default:#CDD6F4;--shiki-dark:#CDD6F4}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":127,"searchDepth":168,"depth":168,"links":908},[909,910,911],{"id":118,"depth":168,"text":119},{"id":830,"depth":168,"text":831},{"id":877,"depth":168,"text":878},"Connect a serialized form to application-owned Vue components without package markup or styles.","md",null,{},{"title":22,"description":912},"WFIbCT54vwzoYgwZrN4S4kkPPXZwmvKGnA8LkrOceAI",[919,921],{"title":18,"path":19,"stem":20,"description":920,"children":-1},"Define a Laravel form schema, return it through Inertia, and validate it in a controller.",{"title":32,"path":33,"stem":29,"description":922,"children":-1},"Define a Laravel form, send its resource through Inertia, and validate it on submission.",1786995560669]