[{"data":1,"prerenderedAt":343},["ShallowReactive",2],{"content-\u002Fdocs\u002Fbinding-inputs\u002Fcheckbox":3},{"id":4,"title":5,"body":6,"description":322,"extension":323,"meta":324,"metaRows":325,"navigation":337,"path":338,"seo":339,"source":340,"stem":341,"__hash__":342},"docs\u002Fdocs\u002Fbinding-inputs\u002Fcheckbox.md","Checkbox",{"type":7,"value":8,"toc":317},"minimark",[9,13,20,23,26,30,35,43,104,126,130,140,266,272,283,287,313],[10,11,5],"h1",{"id":12},"checkbox",[14,15,16],"blockquote",{},[17,18,19],"p",{},"Boolean for one, array of values for a group; the leaf type picks the binding shape.",[21,22],"docs-meta-table",{},[17,24,25],{},"Toggle the single checkbox to flip the boolean. Tick a few in the group to watch the array populate with the matching enum literals. The order in storage reflects the order the boxes were checked, not the declaration order in the template. The schema's leaf type at each path decides which binding mode the directive picks.",[27,28],"docs-demo",{"label":29,"slug":12},"Checkbox Demo",[31,32,34],"h2",{"id":33},"single-checkbox-boolean","Single checkbox → boolean",[17,36,37,38,42],{},"When the schema leaf is ",[39,40,41],"code",{},"z.boolean()",", the directive binds checked-state directly:",[44,45,50],"pre",{"className":46,"code":47,"language":48,"meta":49,"style":49},"language-vue shiki shiki-themes github-light github-dark","\u003Cinput v-register=\"form.register('acceptTerms')\" type=\"checkbox\" \u002F>\n","vue","",[39,51,52],{"__ignoreMap":49},[53,54,57,61,65,69,72,76,79,82,85,88,91,93,96,98,101],"span",{"class":55,"line":56},"line",1,[53,58,60],{"class":59},"sVt8B","\u003C",[53,62,64],{"class":63},"s9eBZ","input",[53,66,68],{"class":67},"sScJk"," v-register",[53,70,71],{"class":59},"=",[53,73,75],{"class":74},"sZZnC","\"",[53,77,78],{"class":59},"form.",[53,80,81],{"class":67},"register",[53,83,84],{"class":59},"(",[53,86,87],{"class":74},"'acceptTerms'",[53,89,90],{"class":59},")",[53,92,75],{"class":74},[53,94,95],{"class":67}," type",[53,97,71],{"class":59},[53,99,100],{"class":74},"\"checkbox\"",[53,102,103],{"class":59}," \u002F>\n",[17,105,106,109,110,113,114,117,118,121,122,125],{},[39,107,108],{},"acceptTerms"," in storage is ",[39,111,112],{},"true"," while checked, ",[39,115,116],{},"false"," otherwise. The ",[39,119,120],{},"value"," attribute is ignored in this mode; boolean state lives in the ",[39,123,124],{},"checked"," property, not the value.",[31,127,129],{"id":128},"checkbox-group-array","Checkbox group → array",[17,131,37,132,135,136,139],{},[39,133,134],{},"z.array(z.enum([...]))"," (or any array type), every ",[39,137,138],{},"\u003Cinput type=\"checkbox\">"," bound to the same path forms a group:",[44,141,143],{"className":46,"code":142,"language":48,"meta":49,"style":49},"\u003Cinput v-register=\"form.register('languages')\" type=\"checkbox\" value=\"ts\" \u002F>\n\u003Cinput v-register=\"form.register('languages')\" type=\"checkbox\" value=\"js\" \u002F>\n\u003Cinput v-register=\"form.register('languages')\" type=\"checkbox\" value=\"rust\" \u002F>\n",[39,144,145,186,226],{"__ignoreMap":49},[53,146,147,149,151,153,155,157,159,161,163,166,168,170,172,174,176,179,181,184],{"class":55,"line":56},[53,148,60],{"class":59},[53,150,64],{"class":63},[53,152,68],{"class":67},[53,154,71],{"class":59},[53,156,75],{"class":74},[53,158,78],{"class":59},[53,160,81],{"class":67},[53,162,84],{"class":59},[53,164,165],{"class":74},"'languages'",[53,167,90],{"class":59},[53,169,75],{"class":74},[53,171,95],{"class":67},[53,173,71],{"class":59},[53,175,100],{"class":74},[53,177,178],{"class":67}," value",[53,180,71],{"class":59},[53,182,183],{"class":74},"\"ts\"",[53,185,103],{"class":59},[53,187,189,191,193,195,197,199,201,203,205,207,209,211,213,215,217,219,221,224],{"class":55,"line":188},2,[53,190,60],{"class":59},[53,192,64],{"class":63},[53,194,68],{"class":67},[53,196,71],{"class":59},[53,198,75],{"class":74},[53,200,78],{"class":59},[53,202,81],{"class":67},[53,204,84],{"class":59},[53,206,165],{"class":74},[53,208,90],{"class":59},[53,210,75],{"class":74},[53,212,95],{"class":67},[53,214,71],{"class":59},[53,216,100],{"class":74},[53,218,178],{"class":67},[53,220,71],{"class":59},[53,222,223],{"class":74},"\"js\"",[53,225,103],{"class":59},[53,227,229,231,233,235,237,239,241,243,245,247,249,251,253,255,257,259,261,264],{"class":55,"line":228},3,[53,230,60],{"class":59},[53,232,64],{"class":63},[53,234,68],{"class":67},[53,236,71],{"class":59},[53,238,75],{"class":74},[53,240,78],{"class":59},[53,242,81],{"class":67},[53,244,84],{"class":59},[53,246,165],{"class":74},[53,248,90],{"class":59},[53,250,75],{"class":74},[53,252,95],{"class":67},[53,254,71],{"class":59},[53,256,100],{"class":74},[53,258,178],{"class":67},[53,260,71],{"class":59},[53,262,263],{"class":74},"\"rust\"",[53,265,103],{"class":59},[17,267,268,269,271],{},"Each input's ",[39,270,120],{}," attribute is the entry written into the array when it's checked. Unchecking removes the entry. Storage holds only the currently-checked values; the array starts empty when no box is ticked.",[17,273,274,275,278,279,282],{},"The directive picks the binding mode from the schema, not from how you write the template. Declare ",[39,276,277],{},"z.array(z.string())"," and the same ",[39,280,281],{},"form.register('languages')"," call site automatically groups every bound checkbox.",[31,284,286],{"id":285},"where-to-next","Where to next",[288,289,290,299,306],"ul",{},[291,292,293,298],"li",{},[294,295,297],"a",{"href":296},"\u002Fdocs\u002Fbinding-inputs\u002Fradio","Radio groups",": the single-pick counterpart.",[291,300,301,305],{},[294,302,304],{"href":303},"\u002Fdocs\u002Fbinding-inputs\u002Fselect","Select & multi-select",": the same array semantics in a dropdown shape.",[291,307,308,312],{},[294,309,311],{"href":310},"\u002Fdocs\u002Fbinding-inputs\u002Fcoercion","Schema-driven coercion",": how leaf types drive binding shape.",[314,315,316],"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);}",{"title":49,"searchDepth":188,"depth":188,"links":318},[319,320,321],{"id":33,"depth":188,"text":34},{"id":128,"depth":188,"text":129},{"id":285,"depth":188,"text":286},"A single checkbox binds to a boolean; multiple checkboxes sharing a register call bind to an array of the checked values. The directive reads the schema leaf type and picks the right mode.","md",{},[326,329,331,334],{"label":327,"value":328},"Category","Directive binding",{"label":330,"value":138,"kind":39},"Element",{"label":332,"value":333},"Modifiers","none",{"label":335,"value":336,"kind":39},"Leaf types","boolean · readonly Value[]",true,"\u002Fdocs\u002Fbinding-inputs\u002Fcheckbox",{"title":5,"description":322},null,"docs\u002Fbinding-inputs\u002Fcheckbox","XSzrqGEyRbmwSamADRcUg8PXFlU_mRDj5zZj0khWZao",1780949759065]