[{"data":1,"prerenderedAt":644},["ShallowReactive",2],{"content-\u002Fdocs\u002Fbinding-inputs\u002Fuse-register":3},{"id":4,"title":5,"body":6,"description":623,"extension":624,"meta":625,"metaRows":626,"navigation":225,"path":639,"seo":640,"source":641,"stem":642,"__hash__":643},"docs\u002Fdocs\u002Fbinding-inputs\u002Fuse-register.md","useRegister",{"type":7,"value":8,"toc":615},"minimark",[9,16,30,33,63,68,73,83,150,165,175,179,341,350,354,359,412,491,495,508,530,547,551,575,579,611],[10,11,13],"h1",{"id":12},"useregister",[14,15,5],"code",{},[17,18,19],"blockquote",{},[20,21,22,23,26,27,29],"p",{},"The bridge between ",[14,24,25],{},"v-register"," on a wrapper component and ",[14,28,25],{}," on its inner native input.",[31,32],"docs-meta-table",{},[20,34,35,36,39,40,43,44,46,47,50,51,54,55,58,59,62],{},"Type into either of the two fields rendered by ",[14,37,38],{},"\u003CFieldRow>"," and watch the JSON readout update. The parent applies ",[14,41,42],{},"v-register=\"form.register('email')\""," to the ",[14,45,38],{}," root; inside ",[14,48,49],{},"FieldRow",", ",[14,52,53],{},"useRegister()"," captures that binding and ",[14,56,57],{},"v-register=\"rv\""," reattaches it to the inner ",[14,60,61],{},"\u003Cinput>",". The sections below trace every step.",[64,65],"docs-demo",{"label":66,"slug":67},"useRegister Demo","use-register",[69,70,72],"h2",{"id":71},"when-to-reach-for-it","When to reach for it",[20,74,75,77,78,82],{},[14,76,5],{}," exists for one specific shape: a Vue component that wraps a single form field, whose ",[79,80,81],"strong",{},"root element is not the input itself",":",[84,85,90],"pre",{"className":86,"code":87,"language":88,"meta":89,"style":89},"language-vue shiki shiki-themes github-light github-dark","\u003C!-- A labeled-row wrapper. The root is \u003Clabel>, not the input. -->\n\u003CFieldRow v-register=\"form.register('email')\" label=\"Email\" \u002F>\n","vue","",[14,91,92,101],{"__ignoreMap":89},[93,94,97],"span",{"class":95,"line":96},"line",1,[93,98,100],{"class":99},"sJ8bj","\u003C!-- A labeled-row wrapper. The root is \u003Clabel>, not the input. -->\n",[93,102,104,108,111,115,118,122,125,128,131,134,137,139,142,144,147],{"class":95,"line":103},2,[93,105,107],{"class":106},"sVt8B","\u003C",[93,109,49],{"class":110},"s9eBZ",[93,112,114],{"class":113},"sScJk"," v-register",[93,116,117],{"class":106},"=",[93,119,121],{"class":120},"sZZnC","\"",[93,123,124],{"class":106},"form.",[93,126,127],{"class":113},"register",[93,129,130],{"class":106},"(",[93,132,133],{"class":120},"'email'",[93,135,136],{"class":106},")",[93,138,121],{"class":120},[93,140,141],{"class":113}," label",[93,143,117],{"class":106},[93,145,146],{"class":120},"\"Email\"",[93,148,149],{"class":106}," \u002F>\n",[20,151,152,153,155,156,158,159,161,162,164],{},"Inside ",[14,154,38],{},", the wrapper's root receives the directive, but you need the binding on the inner ",[14,157,61],{}," to make the form work. ",[14,160,5],{}," captures the parent's ",[14,163,25],{}," binding so you can re-apply it inside.",[20,166,167,168,171,172,174],{},"When the wrapper's root ",[79,169,170],{},"is"," the input itself, Vue's attribute fallthrough already handles the binding, so ",[14,173,5],{}," is unnecessary.",[69,176,178],{"id":177},"capture-re-apply","Capture, re-apply",[84,180,182],{"className":86,"code":181,"language":88,"meta":89,"style":89},"\u003Cscript setup lang=\"ts\">\n  import { useRegister } from 'attaform'\n\n  const rv = useRegister()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Clabel class=\"field-row\">\n    \u003Cspan>{{ label }}\u003C\u002Fspan>\n    \u003Cinput v-register=\"rv\" \u002F>\n  \u003C\u002Flabel>\n\u003C\u002Ftemplate>\n",[14,183,184,205,220,227,246,256,261,271,290,305,322,332],{"__ignoreMap":89},[93,185,186,188,191,194,197,199,202],{"class":95,"line":96},[93,187,107],{"class":106},[93,189,190],{"class":110},"script",[93,192,193],{"class":113}," setup",[93,195,196],{"class":113}," lang",[93,198,117],{"class":106},[93,200,201],{"class":120},"\"ts\"",[93,203,204],{"class":106},">\n",[93,206,207,211,214,217],{"class":95,"line":103},[93,208,210],{"class":209},"szBVR","  import",[93,212,213],{"class":106}," { useRegister } ",[93,215,216],{"class":209},"from",[93,218,219],{"class":120}," 'attaform'\n",[93,221,223],{"class":95,"line":222},3,[93,224,226],{"emptyLinePlaceholder":225},true,"\n",[93,228,230,233,237,240,243],{"class":95,"line":229},4,[93,231,232],{"class":209},"  const",[93,234,236],{"class":235},"sj4cs"," rv",[93,238,239],{"class":209}," =",[93,241,242],{"class":113}," useRegister",[93,244,245],{"class":106},"()\n",[93,247,249,252,254],{"class":95,"line":248},5,[93,250,251],{"class":106},"\u003C\u002F",[93,253,190],{"class":110},[93,255,204],{"class":106},[93,257,259],{"class":95,"line":258},6,[93,260,226],{"emptyLinePlaceholder":225},[93,262,264,266,269],{"class":95,"line":263},7,[93,265,107],{"class":106},[93,267,268],{"class":110},"template",[93,270,204],{"class":106},[93,272,274,277,280,283,285,288],{"class":95,"line":273},8,[93,275,276],{"class":106},"  \u003C",[93,278,279],{"class":110},"label",[93,281,282],{"class":113}," class",[93,284,117],{"class":106},[93,286,287],{"class":120},"\"field-row\"",[93,289,204],{"class":106},[93,291,293,296,298,301,303],{"class":95,"line":292},9,[93,294,295],{"class":106},"    \u003C",[93,297,93],{"class":110},[93,299,300],{"class":106},">{{ label }}\u003C\u002F",[93,302,93],{"class":110},[93,304,204],{"class":106},[93,306,308,310,313,315,317,320],{"class":95,"line":307},10,[93,309,295],{"class":106},[93,311,312],{"class":110},"input",[93,314,114],{"class":113},[93,316,117],{"class":106},[93,318,319],{"class":120},"\"rv\"",[93,321,149],{"class":106},[93,323,325,328,330],{"class":95,"line":324},11,[93,326,327],{"class":106},"  \u003C\u002F",[93,329,279],{"class":110},[93,331,204],{"class":106},[93,333,335,337,339],{"class":95,"line":334},12,[93,336,251],{"class":106},[93,338,268],{"class":110},[93,340,204],{"class":106},[20,342,343,344,346,347,349],{},"That's the whole pattern: call once, hand the return value to ",[14,345,25],{}," inside. ",[14,348,5],{}," reads the parent's binding, surfaces it as a hybrid Ref + RegisterValue Proxy, and the directive picks it up exactly as if the parent had applied it directly to the inner input.",[69,351,353],{"id":352},"two-surfaces-on-the-return-value","Two surfaces on the return value",[20,355,356,358],{},[14,357,53],{}," returns a hybrid Proxy:",[360,361,362,384],"ul",{},[363,364,365,368,369,371,372,375,376,379,380,383],"li",{},[79,366,367],{},"Ref-shaped",": ",[14,370,57],{}," works because the Proxy answers ",[14,373,374],{},"__v_isRef"," \u002F ",[14,377,378],{},".value"," like a ",[14,381,382],{},"Ref\u003CRegisterValue | undefined>",". Vue's template auto-unwrap surfaces the underlying RegisterValue to the directive.",[363,385,386,368,389,50,392,50,395,50,398,401,402,404,405,50,408,411],{},[79,387,388],{},"Pierced reads",[14,390,391],{},"rv.path",[14,393,394],{},"rv.segments",[14,396,397],{},"rv.formKey",[14,399,400],{},"rv.formInstanceId"," all work directly in script setup without ",[14,403,378],{},". Reads inside reactive scopes (",[14,406,407],{},"computed",[14,409,410],{},"watchEffect",") track changes.",[84,413,417],{"className":414,"code":415,"language":416,"meta":89,"style":89},"language-ts shiki shiki-themes github-light github-dark","const rv = useRegister()\n\n\u002F\u002F In script setup: direct pierce\nconst ariaLabel = computed(() => `Field for ${rv?.path}`)\n\n\u002F\u002F In template: Vue auto-unwraps\n\u002F\u002F v-register=\"rv\"\n","ts",[14,418,419,432,436,441,477,481,486],{"__ignoreMap":89},[93,420,421,424,426,428,430],{"class":95,"line":96},[93,422,423],{"class":209},"const",[93,425,236],{"class":235},[93,427,239],{"class":209},[93,429,242],{"class":113},[93,431,245],{"class":106},[93,433,434],{"class":95,"line":103},[93,435,226],{"emptyLinePlaceholder":225},[93,437,438],{"class":95,"line":222},[93,439,440],{"class":99},"\u002F\u002F In script setup: direct pierce\n",[93,442,443,445,448,450,453,456,459,462,465,468,471,474],{"class":95,"line":229},[93,444,423],{"class":209},[93,446,447],{"class":235}," ariaLabel",[93,449,239],{"class":209},[93,451,452],{"class":113}," computed",[93,454,455],{"class":106},"(() ",[93,457,458],{"class":209},"=>",[93,460,461],{"class":120}," `Field for ${",[93,463,464],{"class":106},"rv",[93,466,467],{"class":120},"?.",[93,469,470],{"class":106},"path",[93,472,473],{"class":120},"}`",[93,475,476],{"class":106},")\n",[93,478,479],{"class":95,"line":248},[93,480,226],{"emptyLinePlaceholder":225},[93,482,483],{"class":95,"line":258},[93,484,485],{"class":99},"\u002F\u002F In template: Vue auto-unwraps\n",[93,487,488],{"class":95,"line":263},[93,489,490],{"class":99},"\u002F\u002F v-register=\"rv\"\n",[69,492,494],{"id":493},"unbound-state","Unbound state",[20,496,497,498,500,501,504,505,82],{},"When the parent didn't apply ",[14,499,25],{},", every pierced read returns ",[14,502,503],{},"undefined"," and the composable's return type surfaces this honestly as ",[14,506,507],{},"UseRegisterReturn\u003CV> | undefined",[84,509,511],{"className":414,"code":510,"language":416,"meta":89,"style":89},"const rv = useRegister()\n\u002F\u002F rv?.formKey: optional-chain to defend\n",[14,512,513,525],{"__ignoreMap":89},[93,514,515,517,519,521,523],{"class":95,"line":96},[93,516,423],{"class":209},[93,518,236],{"class":235},[93,520,239],{"class":209},[93,522,242],{"class":113},[93,524,245],{"class":106},[93,526,527],{"class":95,"line":103},[93,528,529],{"class":99},"\u002F\u002F rv?.formKey: optional-chain to defend\n",[20,531,532,533,536,537,539,540,543,544,546],{},"In dev mode, a single ",[14,534,535],{},"console.warn"," fires per instance at mount time when the parent never bound. The directive accepts ",[14,538,503],{}," peacefully (its binding type is ",[14,541,542],{},"RegisterValue\u003CV> | undefined","), so ",[14,545,57],{}," works whether or not a parent bound. No runtime crash, just the warn.",[69,548,550],{"id":549},"multi-field-wrappers","Multi-field wrappers",[20,552,553,555,556,559,560,563,564,567,568,571,572,574],{},[14,554,5],{}," is the right call for ",[79,557,558],{},"single-field"," wrappers. For compound components binding ",[79,561,562],{},"multiple paths"," (a date-range picker exposing start + end fields, an address subform exposing street + city + zip), reach for ",[14,565,566],{},"injectForm\u003CForm>()"," and call ",[14,569,570],{},"ctx.register(path)"," directly. That sidesteps the single-binding assumption ",[14,573,5],{}," makes.",[69,576,578],{"id":577},"where-to-next","Where to next",[360,580,581,595,602],{},[363,582,583,591,592,594],{},[584,585,587,588,590],"a",{"href":586},"\u002Fdocs\u002Fbinding-inputs\u002Fv-register","The ",[14,589,25],{}," directive",": the directive ",[14,593,5],{}," re-binds.",[363,596,597,601],{},[584,598,600],{"href":599},"\u002Fdocs\u002Fbinding-inputs\u002Fcustom-assigners","Custom assigners",": the escape hatch for non-standard element value surfaces.",[363,603,604,610],{},[584,605,607],{"href":606},"\u002Fdocs\u002Fcross-cutting-state\u002Finject-form",[14,608,609],{},"injectForm",": for compound components binding multiple paths.",[612,613,614],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .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}",{"title":89,"searchDepth":103,"depth":103,"links":616},[617,618,619,620,621,622],{"id":71,"depth":103,"text":72},{"id":177,"depth":103,"text":178},{"id":352,"depth":103,"text":353},{"id":493,"depth":103,"text":494},{"id":549,"depth":103,"text":550},{"id":577,"depth":103,"text":578},"The composable that lets a Vue wrapper component bind a parent's v-register onto an inner native element, for component shells whose root isn't the input itself.","md",{},[627,630,633,636],{"label":628,"value":629},"Category","Composable",{"label":631,"value":632},"Signature",{"useRegister\u003CV>()":507,"kind":14},{"label":634,"value":635},"Returns","hybrid Ref + RegisterValue Proxy",{"label":637,"value":638},"Auto-installed","attaform plugin","\u002Fdocs\u002Fbinding-inputs\u002Fuse-register",{"title":5,"description":623},null,"docs\u002Fbinding-inputs\u002Fuse-register","7D0IQl6t_-9jCcge4Mvcdf-A1icFoiVoXEPj2zJiDqg",1780949758919]