[{"data":1,"prerenderedAt":546},["ShallowReactive",2],{"content-\u002Fdocs\u002Freading-the-form\u002Fvalues":3},{"id":4,"title":5,"body":6,"description":528,"extension":529,"meta":530,"metaRows":531,"navigation":151,"path":541,"seo":542,"source":543,"stem":544,"__hash__":545},"docs\u002Fdocs\u002Freading-the-form\u002Fvalues.md","values",{"type":7,"value":8,"toc":521},"minimark",[9,15,22,25,45,49,54,213,217,229,271,278,282,288,375,385,389,441,462,466,517],[10,11,12],"h1",{"id":5},[13,14,5],"code",{},[16,17,18],"blockquote",{},[19,20,21],"p",{},"A reactive Proxy keyed by your schema's paths. Drill anywhere, read anything, let Vue track it.",[23,24],"docs-meta-table",{},[19,26,27,30,31,34,35,38,39,44],{},[13,28,29],{},"form.values"," is the reactive read surface for everything the form holds. The Proxy mirrors your schema's shape: every key resolves to a schema path, every container descends as its own sub-Proxy, and every read inside a reactive scope subscribes for re-renders. Reach for any leaf or container, anywhere; the value you read is always the live one. The exact concrete shape (how defaults, ",[13,32,33],{},".optional()",", ",[13,36,37],{},".nullable()",", and preprocess land) is covered in ",[40,41,43],"a",{"href":42},"\u002Fdocs\u002Fschemas\u002Fstorage-shape","How values are stored",".",[46,47],"docs-demo",{"label":48,"slug":5},"form.values Demo",[50,51,53],"h2",{"id":52},"leaf-and-container-reads","Leaf and container reads",[55,56,61],"pre",{"className":57,"code":58,"language":59,"meta":60,"style":60},"language-ts shiki shiki-themes github-light github-dark","const schema = z.object({\n  profile: z.object({\n    name: z.string(),\n    email: z.email(),\n  }),\n  age: z.number(),\n})\n\nconst form = useForm({ schema })\n\n\u002F\u002F Leaf reads\nform.values.profile.name\nform.values.age\n\n\u002F\u002F Container reads return the nested object\nform.values.profile \u002F\u002F { name: '', email: '' }\n","ts","",[13,62,63,90,100,112,123,129,140,146,153,169,174,181,187,193,198,204],{"__ignoreMap":60},[64,65,68,72,76,79,83,87],"span",{"class":66,"line":67},"line",1,[64,69,71],{"class":70},"szBVR","const",[64,73,75],{"class":74},"sj4cs"," schema",[64,77,78],{"class":70}," =",[64,80,82],{"class":81},"sVt8B"," z.",[64,84,86],{"class":85},"sScJk","object",[64,88,89],{"class":81},"({\n",[64,91,93,96,98],{"class":66,"line":92},2,[64,94,95],{"class":81},"  profile: z.",[64,97,86],{"class":85},[64,99,89],{"class":81},[64,101,103,106,109],{"class":66,"line":102},3,[64,104,105],{"class":81},"    name: z.",[64,107,108],{"class":85},"string",[64,110,111],{"class":81},"(),\n",[64,113,115,118,121],{"class":66,"line":114},4,[64,116,117],{"class":81},"    email: z.",[64,119,120],{"class":85},"email",[64,122,111],{"class":81},[64,124,126],{"class":66,"line":125},5,[64,127,128],{"class":81},"  }),\n",[64,130,132,135,138],{"class":66,"line":131},6,[64,133,134],{"class":81},"  age: z.",[64,136,137],{"class":85},"number",[64,139,111],{"class":81},[64,141,143],{"class":66,"line":142},7,[64,144,145],{"class":81},"})\n",[64,147,149],{"class":66,"line":148},8,[64,150,152],{"emptyLinePlaceholder":151},true,"\n",[64,154,156,158,161,163,166],{"class":66,"line":155},9,[64,157,71],{"class":70},[64,159,160],{"class":74}," form",[64,162,78],{"class":70},[64,164,165],{"class":85}," useForm",[64,167,168],{"class":81},"({ schema })\n",[64,170,172],{"class":66,"line":171},10,[64,173,152],{"emptyLinePlaceholder":151},[64,175,177],{"class":66,"line":176},11,[64,178,180],{"class":179},"sJ8bj","\u002F\u002F Leaf reads\n",[64,182,184],{"class":66,"line":183},12,[64,185,186],{"class":81},"form.values.profile.name\n",[64,188,190],{"class":66,"line":189},13,[64,191,192],{"class":81},"form.values.age\n",[64,194,196],{"class":66,"line":195},14,[64,197,152],{"emptyLinePlaceholder":151},[64,199,201],{"class":66,"line":200},15,[64,202,203],{"class":179},"\u002F\u002F Container reads return the nested object\n",[64,205,207,210],{"class":66,"line":206},16,[64,208,209],{"class":81},"form.values.profile ",[64,211,212],{"class":179},"\u002F\u002F { name: '', email: '' }\n",[50,214,216],{"id":215},"reactivity","Reactivity",[19,218,219,221,222,34,225,228],{},[13,220,29],{}," is implemented as a deep Proxy. Reads inside a ",[13,223,224],{},"computed",[13,226,227],{},"watchEffect",", or template render are tracked; the consumer re-runs when the underlying storage changes:",[55,230,234],{"className":231,"code":232,"language":233,"meta":60,"style":60},"language-vue shiki shiki-themes github-light github-dark","\u003Ctemplate>\n  \u003Cp>Hello, {{ form.values.profile.name }}!\u003C\u002Fp>\n\u003C\u002Ftemplate>\n","vue",[13,235,236,248,262],{"__ignoreMap":60},[64,237,238,241,245],{"class":66,"line":67},[64,239,240],{"class":81},"\u003C",[64,242,244],{"class":243},"s9eBZ","template",[64,246,247],{"class":81},">\n",[64,249,250,253,255,258,260],{"class":66,"line":92},[64,251,252],{"class":81},"  \u003C",[64,254,19],{"class":243},[64,256,257],{"class":81},">Hello, {{ form.values.profile.name }}!\u003C\u002F",[64,259,19],{"class":243},[64,261,247],{"class":81},[64,263,264,267,269],{"class":66,"line":102},[64,265,266],{"class":81},"\u003C\u002F",[64,268,244],{"class":243},[64,270,247],{"class":81},[19,272,273,274,277],{},"Vue's auto-unwrap means you don't write ",[13,275,276],{},".value","; the Proxy presents as a plain object surface.",[50,279,281],{"id":280},"reading-in-templates","Reading in templates",[19,283,284,287],{},[13,285,286],{},"form.values.\u003Cpath>"," is a plain expression in templates, conditionals, and bindings:",[55,289,291],{"className":231,"code":290,"language":233,"meta":60,"style":60},"\u003Ctemplate>\n  \u003Cbutton :disabled=\"!form.values.profile.email\">Send invite\u003C\u002Fbutton>\n  \u003Cp v-if=\"form.values.age >= 18\">Adult plan available.\u003C\u002Fp>\n  \u003Cspan class=\"badge\">Saving as {{ form.values.profile.firstName || 'guest' }}\u003C\u002Fspan>\n\u003C\u002Ftemplate>\n",[13,292,293,301,325,346,367],{"__ignoreMap":60},[64,294,295,297,299],{"class":66,"line":67},[64,296,240],{"class":81},[64,298,244],{"class":243},[64,300,247],{"class":81},[64,302,303,305,308,311,314,318,321,323],{"class":66,"line":92},[64,304,252],{"class":81},[64,306,307],{"class":243},"button",[64,309,310],{"class":85}," :disabled",[64,312,313],{"class":81},"=",[64,315,317],{"class":316},"sZZnC","\"!form.values.profile.email\"",[64,319,320],{"class":81},">Send invite\u003C\u002F",[64,322,307],{"class":243},[64,324,247],{"class":81},[64,326,327,329,331,334,336,339,342,344],{"class":66,"line":102},[64,328,252],{"class":81},[64,330,19],{"class":243},[64,332,333],{"class":85}," v-if",[64,335,313],{"class":81},[64,337,338],{"class":316},"\"form.values.age >= 18\"",[64,340,341],{"class":81},">Adult plan available.\u003C\u002F",[64,343,19],{"class":243},[64,345,247],{"class":81},[64,347,348,350,352,355,357,360,363,365],{"class":66,"line":114},[64,349,252],{"class":81},[64,351,64],{"class":243},[64,353,354],{"class":85}," class",[64,356,313],{"class":81},[64,358,359],{"class":316},"\"badge\"",[64,361,362],{"class":81},">Saving as {{ form.values.profile.firstName || 'guest' }}\u003C\u002F",[64,364,64],{"class":243},[64,366,247],{"class":81},[64,368,369,371,373],{"class":66,"line":125},[64,370,266],{"class":81},[64,372,244],{"class":243},[64,374,247],{"class":81},[19,376,377,378,381,382,384],{},"Each read subscribes the surrounding render so updates flow without manual ",[13,379,380],{},"watch"," or ",[13,383,224],{}," wiring.",[50,386,388],{"id":387},"writes-never-go-through-the-proxy","Writes never go through the Proxy",[19,390,391,393,394,397,398,34,401,34,404,34,407,410,411,34,414,34,417,34,420,34,423,34,426,34,429,432,433,436,437,440],{},[13,392,29],{}," is read-only. Changes to storage flow through methods on ",[13,395,396],{},"form"," (",[13,399,400],{},"setValue",[13,402,403],{},"clear",[13,405,406],{},"reset",[13,408,409],{},"resetField",", and the field-array helpers ",[13,412,413],{},"append",[13,415,416],{},"prepend",[13,418,419],{},"insert",[13,421,422],{},"remove",[13,424,425],{},"swap",[13,427,428],{},"move",[13,430,431],{},"replace",") or through inputs bound with ",[13,434,435],{},"v-register",". Every write hits the same validation, dirty-tracking, and history pipeline; assigning to ",[13,438,439],{},"form.values.email"," directly throws in dev.",[19,442,443,444,447,448,451,452,454,455,457,458,461],{},"Optional leaves (those whose schema admits ",[13,445,446],{},"undefined",", e.g. ",[13,449,450],{},"z.string().optional()",") return to the absent state when the user clears the bound input. This keeps the ",[13,453,33],{}," semantic reachable from the DOM: a user who types invalid text into an optional field and then clears it sees storage flip back to ",[13,456,446],{}," and the validation error clears too. Required leaves keep ",[13,459,460],{},"''"," (or the slim default for non-strings) on clear.",[50,463,465],{"id":464},"where-to-next","Where to next",[467,468,469,479,488,497,505,510],"ul",{},[470,471,472,478],"li",{},[40,473,475],{"href":474},"\u002Fdocs\u002Freading-the-form\u002Ffields",[13,476,477],{},"fields",": the same reads plus per-leaf state.",[470,480,481,487],{},[40,482,484],{"href":483},"\u002Fdocs\u002Freading-the-form\u002Ferrors",[13,485,486],{},"errors",": paired error reads.",[470,489,490,496],{},[40,491,493],{"href":492},"\u002Fdocs\u002Freading-the-form\u002Fto-ref",[13,494,495],{},"toRef",": the ref-shaped escape hatch for path-precise interop.",[470,498,499,504],{},[40,500,502],{"href":501},"\u002Fdocs\u002Fwriting-and-mutating\u002Fset-value",[13,503,400],{},": the write counterpart.",[470,506,507,509],{},[40,508,43],{"href":42},": the conceptual model behind this surface.",[470,511,512,516],{},[40,513,515],{"href":514},"\u002Fdocs\u002Freading-the-form\u002Fthe-form","The form",": every other reactive read.",[518,519,520],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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 .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":60,"searchDepth":92,"depth":92,"links":522},[523,524,525,526,527],{"id":52,"depth":92,"text":53},{"id":215,"depth":92,"text":216},{"id":280,"depth":92,"text":281},{"id":387,"depth":92,"text":388},{"id":464,"depth":92,"text":465},"form.values is a drillable reactive Proxy keyed by schema paths. Read any leaf or container, anywhere, and Vue tracks the access for you.","md",{},[532,535,538],{"label":533,"value":534},"Category","Return property",{"label":536,"value":537,"kind":13},"Type","NestedReadType\u003CForm>",{"label":539,"value":540},"Reactive","Yes","\u002Fdocs\u002Freading-the-form\u002Fvalues",{"title":5,"description":528},null,"docs\u002Freading-the-form\u002Fvalues","cWMeFzmicWs5zGyjX_VpgsmOdCgvuBHRW4ZC0nvXPdo",1780949758279]