[{"data":1,"prerenderedAt":530},["ShallowReactive",2],{"content-\u002Fdocs\u002Fbinding-inputs\u002Fradio":3},{"id":4,"title":5,"body":6,"description":508,"extension":509,"meta":510,"metaRows":511,"navigation":524,"path":525,"seo":526,"source":527,"stem":528,"__hash__":529},"docs\u002Fdocs\u002Fbinding-inputs\u002Fradio.md","Radio groups",{"type":7,"value":8,"toc":502},"minimark",[9,13,20,23,45,50,55,204,213,229,238,242,253,338,348,352,359,453,467,471,498],[10,11,5],"h1",{"id":12},"radio-groups",[14,15,16],"blockquote",{},[17,18,19],"p",{},"One register call across every option; the directive writes the picked option's value attribute into storage.",[21,22],"docs-meta-table",{},[17,24,25,26,30,31,34,35,38,39,44],{},"Pick any of the three plans to watch the JSON readout switch to the option's ",[27,28,29],"code",{},"value"," attribute. Every radio bound through the same ",[27,32,33],{},"form.register('plan')"," call automatically belongs to one group; Attaform infers the grouping from the shared path, not from ",[27,36,37],{},"name=",". The ",[40,41,43],"a",{"href":42},"\u002Fdocs\u002Fbinding-inputs\u002Fcoercion","Schema-driven coercion"," page covers how the directive maps option strings to non-string leaf types.",[46,47],"docs-demo",{"label":48,"slug":49},"Radio Demo","radio",[51,52,54],"h2",{"id":53},"one-register-call-many-options","One register call, many options",[56,57,62],"pre",{"className":58,"code":59,"language":60,"meta":61,"style":61},"language-vue shiki shiki-themes github-light github-dark","\u003Cinput v-register=\"form.register('plan')\" type=\"radio\" value=\"starter\" \u002F>\n\u003Cinput v-register=\"form.register('plan')\" type=\"radio\" value=\"pro\" \u002F>\n\u003Cinput v-register=\"form.register('plan')\" type=\"radio\" value=\"team\" \u002F>\n","vue","",[27,63,64,124,164],{"__ignoreMap":61},[65,66,69,73,77,81,84,88,91,94,97,100,103,105,108,110,113,116,118,121],"span",{"class":67,"line":68},"line",1,[65,70,72],{"class":71},"sVt8B","\u003C",[65,74,76],{"class":75},"s9eBZ","input",[65,78,80],{"class":79},"sScJk"," v-register",[65,82,83],{"class":71},"=",[65,85,87],{"class":86},"sZZnC","\"",[65,89,90],{"class":71},"form.",[65,92,93],{"class":79},"register",[65,95,96],{"class":71},"(",[65,98,99],{"class":86},"'plan'",[65,101,102],{"class":71},")",[65,104,87],{"class":86},[65,106,107],{"class":79}," type",[65,109,83],{"class":71},[65,111,112],{"class":86},"\"radio\"",[65,114,115],{"class":79}," value",[65,117,83],{"class":71},[65,119,120],{"class":86},"\"starter\"",[65,122,123],{"class":71}," \u002F>\n",[65,125,127,129,131,133,135,137,139,141,143,145,147,149,151,153,155,157,159,162],{"class":67,"line":126},2,[65,128,72],{"class":71},[65,130,76],{"class":75},[65,132,80],{"class":79},[65,134,83],{"class":71},[65,136,87],{"class":86},[65,138,90],{"class":71},[65,140,93],{"class":79},[65,142,96],{"class":71},[65,144,99],{"class":86},[65,146,102],{"class":71},[65,148,87],{"class":86},[65,150,107],{"class":79},[65,152,83],{"class":71},[65,154,112],{"class":86},[65,156,115],{"class":79},[65,158,83],{"class":71},[65,160,161],{"class":86},"\"pro\"",[65,163,123],{"class":71},[65,165,167,169,171,173,175,177,179,181,183,185,187,189,191,193,195,197,199,202],{"class":67,"line":166},3,[65,168,72],{"class":71},[65,170,76],{"class":75},[65,172,80],{"class":79},[65,174,83],{"class":71},[65,176,87],{"class":86},[65,178,90],{"class":71},[65,180,93],{"class":79},[65,182,96],{"class":71},[65,184,99],{"class":86},[65,186,102],{"class":71},[65,188,87],{"class":86},[65,190,107],{"class":79},[65,192,83],{"class":71},[65,194,112],{"class":86},[65,196,115],{"class":79},[65,198,83],{"class":71},[65,200,201],{"class":86},"\"team\"",[65,203,123],{"class":71},[17,205,206,207,209,210,212],{},"Every radio bound to ",[27,208,33],{}," belongs to the same group. The directive writes the picked option's ",[27,211,29],{}," attribute into storage:",[56,214,218],{"className":215,"code":216,"language":217,"meta":61,"style":61},"language-ts shiki shiki-themes github-light github-dark","form.values.plan \u002F\u002F 'starter' | 'pro' | 'team'\n","ts",[27,219,220],{"__ignoreMap":61},[65,221,222,225],{"class":67,"line":68},[65,223,224],{"class":71},"form.values.plan ",[65,226,228],{"class":227},"sJ8bj","\u002F\u002F 'starter' | 'pro' | 'team'\n",[17,230,231,232,234,235,237],{},"No ",[27,233,37],{}," ceremony; the shared ",[27,236,93],{}," call IS the group. The browser's per-name single-pick semantics still apply for keyboard navigation, and Attaform reads the result.",[51,239,241],{"id":240},"default-selection","Default selection",[17,243,244,245,248,249,252],{},"Defaulting a radio group is no different from defaulting any other field. Set the default in ",[27,246,247],{},"defaultValues"," (or the schema's ",[27,250,251],{},".default(...)","), and the matching radio renders pre-selected:",[56,254,256],{"className":215,"code":255,"language":217,"meta":61,"style":61},"const form = useForm({\n  schema: z.object({\n    plan: z.enum(['starter', 'pro', 'team']),\n  }),\n  defaultValues: { plan: 'starter' },\n})\n",[27,257,258,277,287,315,321,332],{"__ignoreMap":61},[65,259,260,264,268,271,274],{"class":67,"line":68},[65,261,263],{"class":262},"szBVR","const",[65,265,267],{"class":266},"sj4cs"," form",[65,269,270],{"class":262}," =",[65,272,273],{"class":79}," useForm",[65,275,276],{"class":71},"({\n",[65,278,279,282,285],{"class":67,"line":126},[65,280,281],{"class":71},"  schema: z.",[65,283,284],{"class":79},"object",[65,286,276],{"class":71},[65,288,289,292,295,298,301,304,307,309,312],{"class":67,"line":166},[65,290,291],{"class":71},"    plan: z.",[65,293,294],{"class":79},"enum",[65,296,297],{"class":71},"([",[65,299,300],{"class":86},"'starter'",[65,302,303],{"class":71},", ",[65,305,306],{"class":86},"'pro'",[65,308,303],{"class":71},[65,310,311],{"class":86},"'team'",[65,313,314],{"class":71},"]),\n",[65,316,318],{"class":67,"line":317},4,[65,319,320],{"class":71},"  }),\n",[65,322,324,327,329],{"class":67,"line":323},5,[65,325,326],{"class":71},"  defaultValues: { plan: ",[65,328,300],{"class":86},[65,330,331],{"class":71}," },\n",[65,333,335],{"class":67,"line":334},6,[65,336,337],{"class":71},"})\n",[17,339,340,341,344,345,347],{},"The directive sets ",[27,342,343],{},"checked"," on whichever radio's ",[27,346,29],{}," matches the stored value.",[51,349,351],{"id":350},"numeric-and-enum-options","Numeric and enum options",[17,353,354,355,358],{},"Radio inputs only emit DOM strings, but the schema leaf can be a number, an enum literal, or any other scalar. The ",[27,356,357],{},".number"," modifier coerces:",[56,360,362],{"className":58,"code":361,"language":60,"meta":61,"style":61},"\u003Cinput v-register.number=\"form.register('priority')\" type=\"radio\" value=\"1\" \u002F>\n\u003Cinput v-register.number=\"form.register('priority')\" type=\"radio\" value=\"2\" \u002F>\n",[27,363,364,410],{"__ignoreMap":61},[65,365,366,368,370,372,375,378,380,382,384,386,388,391,393,395,397,399,401,403,405,408],{"class":67,"line":68},[65,367,72],{"class":71},[65,369,76],{"class":75},[65,371,80],{"class":79},[65,373,374],{"class":71},".",[65,376,377],{"class":79},"number",[65,379,83],{"class":71},[65,381,87],{"class":86},[65,383,90],{"class":71},[65,385,93],{"class":79},[65,387,96],{"class":71},[65,389,390],{"class":86},"'priority'",[65,392,102],{"class":71},[65,394,87],{"class":86},[65,396,107],{"class":79},[65,398,83],{"class":71},[65,400,112],{"class":86},[65,402,115],{"class":79},[65,404,83],{"class":71},[65,406,407],{"class":86},"\"1\"",[65,409,123],{"class":71},[65,411,412,414,416,418,420,422,424,426,428,430,432,434,436,438,440,442,444,446,448,451],{"class":67,"line":126},[65,413,72],{"class":71},[65,415,76],{"class":75},[65,417,80],{"class":79},[65,419,374],{"class":71},[65,421,377],{"class":79},[65,423,83],{"class":71},[65,425,87],{"class":86},[65,427,90],{"class":71},[65,429,93],{"class":79},[65,431,96],{"class":71},[65,433,390],{"class":86},[65,435,102],{"class":71},[65,437,87],{"class":86},[65,439,107],{"class":79},[65,441,83],{"class":71},[65,443,112],{"class":86},[65,445,115],{"class":79},[65,447,83],{"class":71},[65,449,450],{"class":86},"\"2\"",[65,452,123],{"class":71},[17,454,455,456,459,460,463,464,466],{},"The directive parses ",[27,457,458],{},"'1'"," → ",[27,461,462],{},"1"," before writing. The ",[40,465,43],{"href":42}," page covers every leaf-type mapping.",[51,468,470],{"id":469},"where-to-next","Where to next",[472,473,474,482,489],"ul",{},[475,476,477,481],"li",{},[40,478,480],{"href":479},"\u002Fdocs\u002Fbinding-inputs\u002Fselect","Select & multi-select",": same single-pick semantics in a dropdown shape; reach for it when the option set is long enough to warrant a dropdown.",[475,483,484,488],{},[40,485,487],{"href":486},"\u002Fdocs\u002Fbinding-inputs\u002Fcheckbox","Checkbox & checkbox groups",": the multi-pick counterpart.",[475,490,491,493,494,497],{},[40,492,43],{"href":42},": how ",[27,495,496],{},"value="," strings map to non-string leaves.",[499,500,501],"style",{},"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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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":61,"searchDepth":126,"depth":126,"links":503},[504,505,506,507],{"id":53,"depth":126,"text":54},{"id":240,"depth":126,"text":241},{"id":350,"depth":126,"text":351},{"id":469,"depth":126,"text":470},"Every radio sharing a register call belongs to the same group. The directive writes the checked option's value attribute into storage as the single picked value.","md",{},[512,515,518,521],{"label":513,"value":514},"Category","Directive binding",{"label":516,"value":517,"kind":27},"Element","\u003Cinput type=\"radio\">",{"label":519,"value":520},"Modifiers","none",{"label":522,"value":523,"kind":27},"Leaf type","enum literal · string · number",true,"\u002Fdocs\u002Fbinding-inputs\u002Fradio",{"title":5,"description":508},null,"docs\u002Fbinding-inputs\u002Fradio","xLJpOZ3Fai2EXEA2-98qf1acfrFYt50fy4g0OHAxHyk",1780949759131]