[{"data":1,"prerenderedAt":1325},["ShallowReactive",2],{"navigation":3,"\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-input":358,"\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-input-surround":1320},[4,14,36,69,140,341],{"title":5,"path":6,"stem":7,"children":8},"Introduction","\u002Fgetting-started","1.getting-started\u002F1.index",[9,10],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation",{"title":15,"path":16,"stem":17,"children":18,"page":35},"Guides","\u002Fguides","2.guides",[19,23,27,31],{"title":20,"path":21,"stem":22},"Your First Layout","\u002Fguides\u002Fyour-first-layout","2.guides\u002F1.your-first-layout",{"title":24,"path":25,"stem":26},"Your First Page Template","\u002Fguides\u002Fyour-first-page-template","2.guides\u002F2.your-first-page-template",{"title":28,"path":29,"stem":30},"Your First Component","\u002Fguides\u002Fyour-first-component","2.guides\u002F3.your-first-component",{"title":32,"path":33,"stem":34},"Alternative UI Variants","\u002Fguides\u002Falternative-ui-variants","2.guides\u002F4.alternative-ui-variants",false,{"title":37,"path":38,"stem":39,"children":40,"page":35},"Core Concepts","\u002Fcore-concepts","3.core-concepts",[41,45,49,53,57,61,65],{"title":42,"path":43,"stem":44},"How It All Works","\u002Fcore-concepts\u002Farchitecture","3.core-concepts\u002F1.architecture",{"title":46,"path":47,"stem":48},"The Data Model","\u002Fcore-concepts\u002Fthe-data-model","3.core-concepts\u002F2.the-data-model",{"title":50,"path":51,"stem":52},"Layouts & Pages","\u002Fcore-concepts\u002Flayouts-and-pages","3.core-concepts\u002F3.layouts-and-pages",{"title":54,"path":55,"stem":56},"Dynamic Pages","\u002Fcore-concepts\u002Fdynamic-pages","3.core-concepts\u002F4.dynamic-pages",{"title":58,"path":59,"stem":60},"Components","\u002Fcore-concepts\u002Fcomponents","3.core-concepts\u002F5.components",{"title":62,"path":63,"stem":64},"Draft & Publish Workflow","\u002Fcore-concepts\u002Fdraft-and-publish","3.core-concepts\u002F6.draft-and-publish",{"title":66,"path":67,"stem":68},"The Admin Panel","\u002Fcore-concepts\u002Fadmin-panel","3.core-concepts\u002F7.admin-panel",{"title":70,"path":71,"stem":72,"children":73,"page":35},"Api","\u002Fapi","4.api",[74,78,116,120,124,128,132,136],{"title":75,"path":76,"stem":77},"Bundle Setup","\u002Fapi\u002Fbundle-setup","4.api\u002F1.bundle-setup",{"title":58,"path":79,"stem":80,"children":81,"page":35},"\u002Fapi\u002Fcomponents","4.api\u002F2.components",[82,86,103],{"title":83,"path":84,"stem":85},"Creating Components","\u002Fapi\u002Fcomponents\u002Fcreating-components","4.api\u002F2.components\u002F1.creating-components",{"title":87,"path":88,"stem":89,"children":90,"page":35},"Annotations","\u002Fapi\u002Fcomponents\u002Fannotations","4.api\u002F2.components\u002F2.annotations",[91,95,99],{"title":92,"path":93,"stem":94},"Publishable","\u002Fapi\u002Fcomponents\u002Fannotations\u002Fpublishable","4.api\u002F2.components\u002F2.annotations\u002F1.publishable",{"title":96,"path":97,"stem":98},"Uploadable","\u002Fapi\u002Fcomponents\u002Fannotations\u002Fuploadable","4.api\u002F2.components\u002F2.annotations\u002F2.uploadable",{"title":100,"path":101,"stem":102},"Timestamped","\u002Fapi\u002Fcomponents\u002Fannotations\u002Ftimestamped","4.api\u002F2.components\u002F2.annotations\u002F3.timestamped",{"title":104,"path":105,"stem":106,"children":107,"page":35},"Built Ins","\u002Fapi\u002Fcomponents\u002Fbuilt-ins","4.api\u002F2.components\u002F3.built-ins",[108,112],{"title":109,"path":110,"stem":111},"Collection Component","\u002Fapi\u002Fcomponents\u002Fbuilt-ins\u002Fcollection-component","4.api\u002F2.components\u002F3.built-ins\u002F1.collection-component",{"title":113,"path":114,"stem":115},"Form Component","\u002Fapi\u002Fcomponents\u002Fbuilt-ins\u002Fform-component","4.api\u002F2.components\u002F3.built-ins\u002F2.form-component",{"title":117,"path":118,"stem":119},"Dynamic & Nested Pages","\u002Fapi\u002Fdynamic-pages","4.api\u002F3.dynamic-pages",{"title":121,"path":122,"stem":123},"Users & Security","\u002Fapi\u002Fusers-and-security","4.api\u002F4.users-and-security",{"title":125,"path":126,"stem":127},"Data Fixtures","\u002Fapi\u002Fdata-fixtures","4.api\u002F5.data-fixtures",{"title":129,"path":130,"stem":131},"Configuration Reference","\u002Fapi\u002Fconfiguration","4.api\u002F6.configuration",{"title":133,"path":134,"stem":135},"Console Commands","\u002Fapi\u002Fconsole-commands","4.api\u002F7.console-commands",{"title":137,"path":138,"stem":139},"Debugging & Profiler","\u002Fapi\u002Fdebugging","4.api\u002F8.debugging",{"title":141,"path":142,"stem":143,"children":144,"page":35},"Nuxt Module","\u002Fnuxt-module","5.nuxt-module",[145,149,162,182,207,211,295,320,324],{"title":146,"path":147,"stem":148},"Module Setup","\u002Fnuxt-module\u002Fmodule-setup","5.nuxt-module\u002F1.module-setup",{"title":150,"path":151,"stem":152,"children":153,"page":35},"Configuration","\u002Fnuxt-module\u002Fconfiguration","5.nuxt-module\u002F2.configuration",[154,158],{"title":155,"path":156,"stem":157},"Nuxt Config","\u002Fnuxt-module\u002Fconfiguration\u002Fnuxt-config","5.nuxt-module\u002F2.configuration\u002F1.nuxt-config",{"title":159,"path":160,"stem":161},"Site Config & SEO","\u002Fnuxt-module\u002Fconfiguration\u002Fsite-config-and-seo","5.nuxt-module\u002F2.configuration\u002F2.site-config-and-seo",{"title":163,"path":164,"stem":165,"children":166,"page":35},"Building Your Ui","\u002Fnuxt-module\u002Fbuilding-your-ui","5.nuxt-module\u002F3.building-your-ui",[167,171,175,178],{"title":168,"path":169,"stem":170},"Layouts","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-layouts","5.nuxt-module\u002F3.building-your-ui\u002F1.creating-layouts",{"title":172,"path":173,"stem":174},"Page Templates","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-page-templates","5.nuxt-module\u002F3.building-your-ui\u002F2.creating-page-templates",{"title":83,"path":176,"stem":177},"\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-components","5.nuxt-module\u002F3.building-your-ui\u002F3.creating-components",{"title":179,"path":180,"stem":181},"CLI Generator","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcwa-cli","5.nuxt-module\u002F3.building-your-ui\u002F4.cwa-cli",{"title":183,"path":184,"stem":185,"children":186,"page":35},"Cwa Components","\u002Fnuxt-module\u002Fcwa-components","5.nuxt-module\u002F4.cwa-components",[187,191,195,199,203],{"title":188,"path":189,"stem":190},"\u003CCwaComponentGroup \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-component-group","5.nuxt-module\u002F4.cwa-components\u002F1.cwa-component-group",{"title":192,"path":193,"stem":194},"\u003CCwaPage \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-page","5.nuxt-module\u002F4.cwa-components\u002F2.cwa-page",{"title":196,"path":197,"stem":198},"\u003CCwaLink \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-link","5.nuxt-module\u002F4.cwa-components\u002F3.cwa-link",{"title":200,"path":201,"stem":202},"\u003CCwaImage \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-image","5.nuxt-module\u002F4.cwa-components\u002F4.cwa-image",{"title":204,"path":205,"stem":206},"\u003CCwaDefaultLayout \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-default-layout","5.nuxt-module\u002F4.cwa-components\u002F5.cwa-default-layout",{"title":208,"path":209,"stem":210},"The useCwa() API","\u002Fnuxt-module\u002Fcwa-api","5.nuxt-module\u002F5.cwa-api",{"title":212,"path":213,"stem":214,"children":215,"page":35},"Composables","\u002Fnuxt-module\u002Fcomposables","5.nuxt-module\u002F6.composables",[216,224,261,278],{"title":217,"path":218,"stem":219,"children":220,"page":35},"Layout","\u002Fnuxt-module\u002Fcomposables\u002Flayout","5.nuxt-module\u002F6.composables\u002F0.layout",[221],{"title":217,"path":222,"stem":223},"\u002Fnuxt-module\u002Fcomposables\u002Flayout\u002Fuse-cwa-layout","5.nuxt-module\u002F6.composables\u002F0.layout\u002F1.use-cwa-layout",{"title":225,"path":226,"stem":227,"children":228,"page":35},"Component","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent","5.nuxt-module\u002F6.composables\u002F1.component",[229,233,237,241,245,249,253,257],{"title":230,"path":231,"stem":232},"Component (recommended)","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-component","5.nuxt-module\u002F6.composables\u002F1.component\u002F0.use-cwa-component",{"title":234,"path":235,"stem":236},"Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F1.use-cwa-resource",{"title":238,"path":239,"stem":240},"Collection Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-collection-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F2.use-cwa-collection-resource",{"title":242,"path":243,"stem":244},"Image Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-image-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F3.use-cwa-image-resource",{"title":246,"path":247,"stem":248},"Form","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form","5.nuxt-module\u002F6.composables\u002F1.component\u002F4.use-cwa-form",{"title":250,"path":251,"stem":252},"Form Input","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-input","5.nuxt-module\u002F6.composables\u002F1.component\u002F5.use-cwa-form-input",{"title":254,"path":255,"stem":256},"Form Repeated","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-repeated","5.nuxt-module\u002F6.composables\u002F1.component\u002F6.use-cwa-form-repeated",{"title":258,"path":259,"stem":260},"Form Collection","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-collection","5.nuxt-module\u002F6.composables\u002F1.component\u002F7.use-cwa-form-collection",{"title":262,"path":263,"stem":264,"children":265,"page":35},"Admin Manager","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager","5.nuxt-module\u002F6.composables\u002F2.admin-manager",[266,270,274],{"title":267,"path":268,"stem":269},"Manager Tab","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-manager-tab","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F1.use-cwa-resource-manager-tab",{"title":271,"path":272,"stem":273},"Resource Model","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-model","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F2.use-cwa-resource-model",{"title":275,"path":276,"stem":277},"Resource Upload","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-upload","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F3.use-cwa-resource-upload",{"title":279,"path":280,"stem":281,"children":282,"page":35},"Utilities","\u002Fnuxt-module\u002Fcomposables\u002Futilities","5.nuxt-module\u002F6.composables\u002F3.utilities",[283,287,291],{"title":284,"path":285,"stem":286},"Resource Endpoint","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-cwa-resource-endpoint","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F1.use-cwa-resource-endpoint",{"title":288,"path":289,"stem":290},"Query Model","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-query-bound-model","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F2.use-query-bound-model",{"title":292,"path":293,"stem":294},"Resource Route","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-cwa-resource-route","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F3.use-cwa-resource-route",{"title":296,"path":297,"stem":298,"children":299,"page":35},"Component Helpers","\u002Fnuxt-module\u002Fcomponent-helpers","5.nuxt-module\u002F7.component-helpers",[300,304,308,312,316],{"title":301,"path":302,"stem":303},"Images & Media","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fimages-and-uploads","5.nuxt-module\u002F7.component-helpers\u002F1.images-and-uploads",{"title":305,"path":306,"stem":307},"Collections & Pagination","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fcollections-and-pagination","5.nuxt-module\u002F7.component-helpers\u002F2.collections-and-pagination",{"title":309,"path":310,"stem":311},"HTML Content","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fhtml-content","5.nuxt-module\u002F7.component-helpers\u002F3.html-content",{"title":313,"path":314,"stem":315},"Real-Time Updates","\u002Fnuxt-module\u002Fcomponent-helpers\u002Freal-time-updates","5.nuxt-module\u002F7.component-helpers\u002F4.real-time-updates",{"title":317,"path":318,"stem":319},"Forms","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fforms","5.nuxt-module\u002F7.component-helpers\u002F5.forms",{"title":321,"path":322,"stem":323},"Authentication","\u002Fnuxt-module\u002Fauthentication","5.nuxt-module\u002F8.authentication",{"title":325,"path":326,"stem":327,"children":328,"page":35},"Cwa Layer","\u002Fnuxt-module\u002Fcwa-layer","5.nuxt-module\u002F9.cwa-layer",[329,333,337],{"title":330,"path":331,"stem":332},"Overview","\u002Fnuxt-module\u002Fcwa-layer\u002Foverview","5.nuxt-module\u002F9.cwa-layer\u002F1.overview",{"title":334,"path":335,"stem":336},"Auth Pages","\u002Fnuxt-module\u002Fcwa-layer\u002Fauth-pages","5.nuxt-module\u002F9.cwa-layer\u002F2.auth-pages",{"title":338,"path":339,"stem":340},"Admin Panel","\u002Fnuxt-module\u002Fcwa-layer\u002Fadmin-panel","5.nuxt-module\u002F9.cwa-layer\u002F3.admin-panel",{"title":342,"path":343,"stem":344,"children":345,"page":35},"Deployment","\u002Fdeployment","6.deployment",[346,350,354],{"title":347,"path":348,"stem":349},"Docker","\u002Fdeployment\u002Fdocker","6.deployment\u002F1.docker",{"title":351,"path":352,"stem":353},"Kubernetes & Helm","\u002Fdeployment\u002Fkubernetes","6.deployment\u002F2.kubernetes",{"title":355,"path":356,"stem":357},"CI\u002FCD","\u002Fdeployment\u002Fci-cd","6.deployment\u002F3.ci-cd",{"id":359,"title":360,"badge":361,"body":364,"description":1313,"extension":1314,"links":1315,"meta":1316,"navigation":1317,"path":251,"seo":1318,"stem":252,"__hash__":1319},"docs\u002F5.nuxt-module\u002F6.composables\u002F1.component\u002F5.use-cwa-form-input.md","useCwaFormInput",{"label":362,"color":363},"Draft","amber",{"type":365,"value":366,"toc":1302},"minimark",[367,379,461,466,527,531,705,710,713,736,739,744,758,766,772,790,794,823,827,1268,1272,1298],[368,369,370,373,374,378],"p",{},[371,372,360],"code",{}," binds a single field inside a ",[375,376,377],"a",{"href":114},"Form component"," to a reactive value and handles per-field validation, error display, and value synchronisation with the shared form store.",[380,381,386],"pre",{"className":382,"code":383,"language":384,"meta":385,"style":385},"language-ts shiki shiki-themes github-light github-dark material-theme-palenight","const { value, vars, errors, valid, displayErrors, onBlur, validate, onInput } = useCwaFormInput(iri, fullName)\n","ts","",[371,387,388],{"__ignoreMap":385},[389,390,393,397,401,405,408,411,413,416,418,421,423,426,428,431,433,436,438,441,444,448,452,456,458],"span",{"class":391,"line":392},"line",1,[389,394,396],{"class":395},"swB56","const",[389,398,400],{"class":399},"sOvfz"," {",[389,402,404],{"class":403},"sc2zw"," value",[389,406,407],{"class":399},",",[389,409,410],{"class":403}," vars",[389,412,407],{"class":399},[389,414,415],{"class":403}," errors",[389,417,407],{"class":399},[389,419,420],{"class":403}," valid",[389,422,407],{"class":399},[389,424,425],{"class":403}," displayErrors",[389,427,407],{"class":399},[389,429,430],{"class":403}," onBlur",[389,432,407],{"class":399},[389,434,435],{"class":403}," validate",[389,437,407],{"class":399},[389,439,440],{"class":403}," onInput",[389,442,443],{"class":399}," }",[389,445,447],{"class":446},"sVlFx"," =",[389,449,451],{"class":450},"sKpYG"," useCwaFormInput",[389,453,455],{"class":454},"sPB8G","(iri",[389,457,407],{"class":399},[389,459,460],{"class":454}," fullName)\n",[462,463,465],"h2",{"id":464},"parameters","Parameters",[467,468,469,485],"table",{},[470,471,472],"thead",{},[473,474,475,479,482],"tr",{},[476,477,478],"th",{},"Parameter",[476,480,481],{},"Type",[476,483,484],{},"Description",[486,487,488,504],"tbody",{},[473,489,490,496,501],{},[491,492,493],"td",{},[371,494,495],{},"iri",[491,497,498],{},[371,499,500],{},"Ref\u003Cstring | undefined>",[491,502,503],{},"IRI of the Form component resource",[473,505,506,511,516],{},[491,507,508],{},[371,509,510],{},"fullName",[491,512,513],{},[371,514,515],{},"string",[491,517,518,519,522,523,526],{},"Symfony field ",[371,520,521],{},"full_name"," (e.g. ",[371,524,525],{},"contact_form[name]",")",[462,528,530],{"id":529},"return-value","Return value",[467,532,533,544],{},[470,534,535],{},[473,536,537,540,542],{},[476,538,539],{},"Property",[476,541,481],{},[476,543,484],{},[486,545,546,568,597,611,636,651,670,685],{},[473,547,548,553,558],{},[491,549,550],{},[371,551,552],{},"value",[491,554,555],{},[371,556,557],{},"Ref\u003Cany>",[491,559,560,561,564,565],{},"Reactive local value — bind to your ",[371,562,563],{},"\u003Cinput>"," with ",[371,566,567],{},"v-model",[473,569,570,575,580],{},[491,571,572],{},[371,573,574],{},"vars",[491,576,577],{},[371,578,579],{},"ComputedRef",[491,581,582,583,586,587,586,590,586,593,596],{},"Full field vars from the API (",[371,584,585],{},"label",", ",[371,588,589],{},"attr",[371,591,592],{},"errors",[371,594,595],{},"valid",", etc.)",[473,598,599,603,608],{},[491,600,601],{},[371,602,592],{},[491,604,605],{},[371,606,607],{},"ComputedRef\u003Cstring[]>",[491,609,610],{},"Field-level error messages from the API",[473,612,613,617,622],{},[491,614,615],{},[371,616,595],{},[491,618,619],{},[371,620,621],{},"ComputedRef\u003Cboolean | null>",[491,623,624,627,628,631,632,635],{},[371,625,626],{},"true"," = valid, ",[371,629,630],{},"false"," = invalid, ",[371,633,634],{},"null"," = not yet evaluated",[473,637,638,643,648],{},[491,639,640],{},[371,641,642],{},"displayErrors",[491,644,645],{},[371,646,647],{},"ComputedRef\u003Cboolean>",[491,649,650],{},"Whether errors should be shown — see below",[473,652,653,658,663],{},[491,654,655],{},[371,656,657],{},"onBlur",[491,659,660],{},[371,661,662],{},"() => void",[491,664,665,666,669],{},"Call on ",[371,667,668],{},"@blur"," to enable error display after the user leaves the field",[473,671,672,677,682],{},[491,673,674],{},[371,675,676],{},"validate",[491,678,679],{},[371,680,681],{},"(extraData?) => Promise\u003Cvoid>",[491,683,684],{},"Trigger PATCH validation immediately",[473,686,687,692,696],{},[491,688,689],{},[371,690,691],{},"onInput",[491,693,694],{},[371,695,662],{},[491,697,698,699,701,702],{},"Debounced (300 ms) wrapper around ",[371,700,676],{}," — call on ",[371,703,704],{},"@input",[462,706,708],{"id":707},"displayerrors",[371,709,642],{},[368,711,712],{},"Errors should be displayed when any of the following is true:",[714,715,716,723,726],"ul",{},[717,718,719,720,722],"li",{},"The user has blurred the field (",[371,721,657],{}," was called)",[717,724,725],{},"The field was previously valid and has since become invalid (regression)",[717,727,728,729,732,733,735],{},"The form has been submitted and failed (",[371,730,731],{},"isSubmitAttempted"," is ",[371,734,626],{}," for this IRI)",[368,737,738],{},"Bind it to a conditional wrapper around your error list so errors only surface at the right moment.",[462,740,741],{"id":676},[371,742,743],{},"validate()",[368,745,746,747,751,752,754,755,757],{},"For ",[748,749,750],"strong",{},"PATCH forms"," only: sends the current field value to the form's submit endpoint via PATCH so the API can validate it and return per-field errors. The store is updated automatically, and ",[371,753,592],{}," \u002F ",[371,756,595],{}," react accordingly.",[368,759,746,760,586,763,765],{},[748,761,762],{},"POST forms",[371,764,743],{}," is a no-op — validation only happens on full submission.",[462,767,769,770],{"id":768},"field-full_name","Field ",[371,771,521],{},[368,773,774,775,777,778,781,782,785,786,789],{},"Symfony serialises form fields using their ",[371,776,521],{},", which follows the pattern ",[371,779,780],{},"form_name[field_name]"," (or ",[371,783,784],{},"form_name[child][field_name]"," for nested fields). The value comes from ",[371,787,788],{},"vars.value.full_name"," in the form resource response.",[462,791,793],{"id":792},"value-lifecycle","Value lifecycle",[714,795,796,803,809,820],{},[717,797,798,799,802],{},"Initialised from ",[371,800,801],{},"vars.value"," (the API's current value for this field)",[717,804,805,806,808],{},"Resets to the API value when ",[371,807,495],{}," changes (e.g. navigating between resources)",[717,810,811,812,815,816,819],{},"Synced into ",[371,813,814],{},"$cwa.forms.fieldValues"," so ",[371,817,818],{},"useCwaForm.submit()"," can read all fields at once",[717,821,822],{},"Cleared from the store on component unmount",[462,824,826],{"id":825},"example","Example",[380,828,832],{"className":829,"code":830,"language":831,"meta":385,"style":385},"language-vue shiki shiki-themes github-light github-dark material-theme-palenight","\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{ iri: string; fullName: string }>()\nconst iriRef = toRef(props, 'iri')\n\nconst { value, vars, errors, displayErrors, onBlur, onInput } = useCwaFormInput(iriRef, props.fullName)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Clabel :for=\"props.fullName\">{{ vars?.label }}\u003C\u002Flabel>\n\n    \u003Cinput\n      :id=\"props.fullName\"\n      v-model=\"value\"\n      v-bind=\"vars?.attr\"\n      @blur=\"onBlur\"\n      @input=\"onInput\"\n    \u002F>\n\n    \u003Cul v-if=\"displayErrors && errors.length\">\n      \u003Cli v-for=\"error in errors\" :key=\"error\" class=\"text-red-500\">\n        {{ error }}\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[371,833,834,865,908,937,944,992,1002,1007,1017,1028,1060,1065,1073,1088,1102,1117,1131,1145,1151,1156,1177,1223,1229,1239,1249,1259],{"__ignoreMap":385},[389,835,836,839,843,847,850,853,857,860,862],{"class":391,"line":392},[389,837,838],{"class":399},"\u003C",[389,840,842],{"class":841},"s-h7I","script",[389,844,846],{"class":845},"sGtlX"," setup",[389,848,849],{"class":845}," lang",[389,851,852],{"class":399},"=",[389,854,856],{"class":855},"seSrl","\"",[389,858,384],{"class":859},"sLL54",[389,861,856],{"class":855},[389,863,864],{"class":399},">\n",[389,866,868,870,873,875,878,881,885,888,892,895,898,900,902,905],{"class":391,"line":867},2,[389,869,396],{"class":395},[389,871,872],{"class":403}," props",[389,874,447],{"class":446},[389,876,877],{"class":450}," defineProps",[389,879,880],{"class":399},"\u003C{",[389,882,884],{"class":883},"ssFBz"," iri",[389,886,887],{"class":446},":",[389,889,891],{"class":890},"sbW4m"," string",[389,893,894],{"class":399},";",[389,896,897],{"class":883}," fullName",[389,899,887],{"class":446},[389,901,891],{"class":890},[389,903,904],{"class":399}," }>",[389,906,907],{"class":454},"()\n",[389,909,911,913,916,918,921,924,926,929,931,934],{"class":391,"line":910},3,[389,912,396],{"class":395},[389,914,915],{"class":403}," iriRef",[389,917,447],{"class":446},[389,919,920],{"class":450}," toRef",[389,922,923],{"class":454},"(props",[389,925,407],{"class":399},[389,927,928],{"class":855}," '",[389,930,495],{"class":859},[389,932,933],{"class":855},"'",[389,935,936],{"class":454},")\n",[389,938,940],{"class":391,"line":939},4,[389,941,943],{"emptyLinePlaceholder":942},true,"\n",[389,945,947,949,951,953,955,957,959,961,963,965,967,969,971,973,975,977,979,982,984,986,989],{"class":391,"line":946},5,[389,948,396],{"class":395},[389,950,400],{"class":399},[389,952,404],{"class":403},[389,954,407],{"class":399},[389,956,410],{"class":403},[389,958,407],{"class":399},[389,960,415],{"class":403},[389,962,407],{"class":399},[389,964,425],{"class":403},[389,966,407],{"class":399},[389,968,430],{"class":403},[389,970,407],{"class":399},[389,972,440],{"class":403},[389,974,443],{"class":399},[389,976,447],{"class":446},[389,978,451],{"class":450},[389,980,981],{"class":454},"(iriRef",[389,983,407],{"class":399},[389,985,872],{"class":454},[389,987,988],{"class":399},".",[389,990,991],{"class":454},"fullName)\n",[389,993,995,998,1000],{"class":391,"line":994},6,[389,996,997],{"class":399},"\u003C\u002F",[389,999,842],{"class":841},[389,1001,864],{"class":399},[389,1003,1005],{"class":391,"line":1004},7,[389,1006,943],{"emptyLinePlaceholder":942},[389,1008,1010,1012,1015],{"class":391,"line":1009},8,[389,1011,838],{"class":399},[389,1013,1014],{"class":841},"template",[389,1016,864],{"class":399},[389,1018,1020,1023,1026],{"class":391,"line":1019},9,[389,1021,1022],{"class":399},"  \u003C",[389,1024,1025],{"class":841},"div",[389,1027,864],{"class":399},[389,1029,1031,1034,1036,1039,1041,1043,1046,1048,1051,1054,1056,1058],{"class":391,"line":1030},10,[389,1032,1033],{"class":399},"    \u003C",[389,1035,585],{"class":841},[389,1037,1038],{"class":845}," :for",[389,1040,852],{"class":399},[389,1042,856],{"class":855},[389,1044,1045],{"class":859},"props.fullName",[389,1047,856],{"class":855},[389,1049,1050],{"class":399},">",[389,1052,1053],{"class":454},"{{ vars?.label }}",[389,1055,997],{"class":399},[389,1057,585],{"class":841},[389,1059,864],{"class":399},[389,1061,1063],{"class":391,"line":1062},11,[389,1064,943],{"emptyLinePlaceholder":942},[389,1066,1068,1070],{"class":391,"line":1067},12,[389,1069,1033],{"class":399},[389,1071,1072],{"class":841},"input\n",[389,1074,1076,1079,1081,1083,1085],{"class":391,"line":1075},13,[389,1077,1078],{"class":845},"      :id",[389,1080,852],{"class":399},[389,1082,856],{"class":855},[389,1084,1045],{"class":859},[389,1086,1087],{"class":855},"\"\n",[389,1089,1091,1094,1096,1098,1100],{"class":391,"line":1090},14,[389,1092,1093],{"class":845},"      v-model",[389,1095,852],{"class":399},[389,1097,856],{"class":855},[389,1099,552],{"class":859},[389,1101,1087],{"class":855},[389,1103,1105,1108,1110,1112,1115],{"class":391,"line":1104},15,[389,1106,1107],{"class":845},"      v-bind",[389,1109,852],{"class":399},[389,1111,856],{"class":855},[389,1113,1114],{"class":859},"vars?.attr",[389,1116,1087],{"class":855},[389,1118,1120,1123,1125,1127,1129],{"class":391,"line":1119},16,[389,1121,1122],{"class":845},"      @blur",[389,1124,852],{"class":399},[389,1126,856],{"class":855},[389,1128,657],{"class":859},[389,1130,1087],{"class":855},[389,1132,1134,1137,1139,1141,1143],{"class":391,"line":1133},17,[389,1135,1136],{"class":845},"      @input",[389,1138,852],{"class":399},[389,1140,856],{"class":855},[389,1142,691],{"class":859},[389,1144,1087],{"class":855},[389,1146,1148],{"class":391,"line":1147},18,[389,1149,1150],{"class":399},"    \u002F>\n",[389,1152,1154],{"class":391,"line":1153},19,[389,1155,943],{"emptyLinePlaceholder":942},[389,1157,1159,1161,1163,1166,1168,1170,1173,1175],{"class":391,"line":1158},20,[389,1160,1033],{"class":399},[389,1162,714],{"class":841},[389,1164,1165],{"class":845}," v-if",[389,1167,852],{"class":399},[389,1169,856],{"class":855},[389,1171,1172],{"class":859},"displayErrors && errors.length",[389,1174,856],{"class":855},[389,1176,864],{"class":399},[389,1178,1180,1183,1185,1188,1190,1192,1195,1197,1200,1202,1204,1207,1209,1212,1214,1216,1219,1221],{"class":391,"line":1179},21,[389,1181,1182],{"class":399},"      \u003C",[389,1184,717],{"class":841},[389,1186,1187],{"class":845}," v-for",[389,1189,852],{"class":399},[389,1191,856],{"class":855},[389,1193,1194],{"class":859},"error in errors",[389,1196,856],{"class":855},[389,1198,1199],{"class":845}," :key",[389,1201,852],{"class":399},[389,1203,856],{"class":855},[389,1205,1206],{"class":859},"error",[389,1208,856],{"class":855},[389,1210,1211],{"class":845}," class",[389,1213,852],{"class":399},[389,1215,856],{"class":855},[389,1217,1218],{"class":859},"text-red-500",[389,1220,856],{"class":855},[389,1222,864],{"class":399},[389,1224,1226],{"class":391,"line":1225},22,[389,1227,1228],{"class":454},"        {{ error }}\n",[389,1230,1232,1235,1237],{"class":391,"line":1231},23,[389,1233,1234],{"class":399},"      \u003C\u002F",[389,1236,717],{"class":841},[389,1238,864],{"class":399},[389,1240,1242,1245,1247],{"class":391,"line":1241},24,[389,1243,1244],{"class":399},"    \u003C\u002F",[389,1246,714],{"class":841},[389,1248,864],{"class":399},[389,1250,1252,1255,1257],{"class":391,"line":1251},25,[389,1253,1254],{"class":399},"  \u003C\u002F",[389,1256,1025],{"class":841},[389,1258,864],{"class":399},[389,1260,1262,1264,1266],{"class":391,"line":1261},26,[389,1263,997],{"class":399},[389,1265,1014],{"class":841},[389,1267,864],{"class":399},[462,1269,1271],{"id":1270},"notes","Notes",[714,1273,1274,1283,1291],{},[717,1275,1276,1277,1279,1280,1282],{},"Each field component should call ",[371,1278,360],{}," with its own ",[371,1281,510],{}," — the composable registers itself in the shared store and cleans up on unmount",[717,1284,1285,1287,1288,1290],{},[371,1286,691],{}," is a 300 ms debounce so rapid typing doesn't flood the API with validation requests; call ",[371,1289,743],{}," directly if you need immediate validation",[717,1292,1293,1294,1297],{},"Extra data can be passed to ",[371,1295,1296],{},"validate(extraData)"," — it is merged into the PATCH body, useful when validation of one field depends on another's current value",[1299,1300,1301],"style",{},"html pre.shiki code .swB56, html code.shiki .swB56{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#C792EA}html pre.shiki code .sOvfz, html code.shiki .sOvfz{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#89DDFF}html pre.shiki code .sc2zw, html code.shiki .sc2zw{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#BABED8}html pre.shiki code .sVlFx, html code.shiki .sVlFx{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#89DDFF}html pre.shiki code .sKpYG, html code.shiki .sKpYG{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#82AAFF}html pre.shiki code .sPB8G, html code.shiki .sPB8G{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#BABED8}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);}html pre.shiki code .s-h7I, html code.shiki .s-h7I{--shiki-light:#22863A;--shiki-default:#85E89D;--shiki-dark:#F07178}html pre.shiki code .sGtlX, html code.shiki .sGtlX{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#C792EA}html pre.shiki code .seSrl, html code.shiki .seSrl{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#89DDFF}html pre.shiki code .sLL54, html code.shiki .sLL54{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#C3E88D}html pre.shiki code .ssFBz, html code.shiki .ssFBz{--shiki-light:#E36209;--shiki-default:#FFAB70;--shiki-dark:#F07178}html pre.shiki code .sbW4m, html code.shiki .sbW4m{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#FFCB6B}",{"title":385,"searchDepth":867,"depth":867,"links":1303},[1304,1305,1306,1307,1308,1310,1311,1312],{"id":464,"depth":867,"text":465},{"id":529,"depth":867,"text":530},{"id":707,"depth":867,"text":642},{"id":676,"depth":867,"text":743},{"id":768,"depth":867,"text":1309},"Field full_name",{"id":792,"depth":867,"text":793},{"id":825,"depth":867,"text":826},{"id":1270,"depth":867,"text":1271},"Bind a single Symfony form field to a reactive value, validate on input, and control when errors are displayed.","md",null,{},{"title":250},{"title":360,"description":1313},"TP9zk8tbEFO6yRYFY4iSUHnyI3WsgQ5KlvKJdWLINik",[1321,1323],{"title":246,"path":247,"stem":248,"description":1322,"children":-1},"Handle form submission, track in-flight state, and read form-level errors from a CWA Form component resource.",{"title":254,"path":255,"stem":256,"description":1324,"children":-1},"Bind a Symfony RepeatedType field (e.g. new password + confirmation) with cross-field validation.",1782512898899]