[{"data":1,"prerenderedAt":967},["ShallowReactive",2],{"docs-nav-pkg":3,"docs-page-pkg-\u002Fpkg\u002Fcheckbox-group":133},[4,8,12,15,18,21,24,27,30,33,36,39,42,45,48,51,54,57,60,63,66,69,72,75,78,81,84,87,90,93,96,99,102,105,108,111,114,117,121,124,127,130],{"path":5,"title":6,"section":7},"\u002Fpkg","Overview","Start",{"path":9,"title":10,"section":11},"\u002Fpkg\u002Faccordion","Accordion","Components",{"path":13,"title":14,"section":11},"\u002Fpkg\u002Falert-dialog","Alert Dialog",{"path":16,"title":17,"section":11},"\u002Fpkg\u002Fautocomplete","Autocomplete",{"path":19,"title":20,"section":11},"\u002Fpkg\u002Favatar","Avatar",{"path":22,"title":23,"section":11},"\u002Fpkg\u002Fbutton","Button",{"path":25,"title":26,"section":11},"\u002Fpkg\u002Fcheckbox","Checkbox",{"path":28,"title":29,"section":11},"\u002Fpkg\u002Fcheckbox-group","Checkbox Group",{"path":31,"title":32,"section":11},"\u002Fpkg\u002Fcollapsible","Collapsible",{"path":34,"title":35,"section":11},"\u002Fpkg\u002Fcombobox","Combobox",{"path":37,"title":38,"section":11},"\u002Fpkg\u002Fcontext-menu","Context Menu",{"path":40,"title":41,"section":11},"\u002Fpkg\u002Fdialog","Dialog",{"path":43,"title":44,"section":11},"\u002Fpkg\u002Fdrawer","Drawer",{"path":46,"title":47,"section":11},"\u002Fpkg\u002Ffield","Field",{"path":49,"title":50,"section":11},"\u002Fpkg\u002Ffieldset","Fieldset",{"path":52,"title":53,"section":11},"\u002Fpkg\u002Fform","Form",{"path":55,"title":56,"section":11},"\u002Fpkg\u002Ficon-picker","Icon picker",{"path":58,"title":59,"section":11},"\u002Fpkg\u002Finput","Input",{"path":61,"title":62,"section":11},"\u002Fpkg\u002Fmenu","Menu",{"path":64,"title":65,"section":11},"\u002Fpkg\u002Fmenubar","Menubar",{"path":67,"title":68,"section":11},"\u002Fpkg\u002Fmeter","Meter",{"path":70,"title":71,"section":11},"\u002Fpkg\u002Fnavigation-menu","Navigation Menu",{"path":73,"title":74,"section":11},"\u002Fpkg\u002Fnumber-field","Number Field",{"path":76,"title":77,"section":11},"\u002Fpkg\u002Fotp-field","OTP Field",{"path":79,"title":80,"section":11},"\u002Fpkg\u002Fplot","Plot",{"path":82,"title":83,"section":11},"\u002Fpkg\u002Fpopover","Popover",{"path":85,"title":86,"section":11},"\u002Fpkg\u002Fpreview-card","Preview Card",{"path":88,"title":89,"section":11},"\u002Fpkg\u002Fprogress","Progress",{"path":91,"title":92,"section":11},"\u002Fpkg\u002Fradio-group","Radio Group",{"path":94,"title":95,"section":11},"\u002Fpkg\u002Fscroll-area","Scroll Area",{"path":97,"title":98,"section":11},"\u002Fpkg\u002Fselect","Select",{"path":100,"title":101,"section":11},"\u002Fpkg\u002Fseparator","Separator",{"path":103,"title":104,"section":11},"\u002Fpkg\u002Fsidebar","Sidebar",{"path":106,"title":107,"section":11},"\u002Fpkg\u002Fslider","Slider",{"path":109,"title":110,"section":11},"\u002Fpkg\u002Fswitch","Switch",{"path":112,"title":113,"section":11},"\u002Fpkg\u002Ftabs","Tabs",{"path":115,"title":116,"section":11},"\u002Fpkg\u002Ftoast","Toast",{"path":118,"title":119,"section":120},"\u002Fpkg\u002Fapi","Api","Runtime",{"path":122,"title":123,"section":120},"\u002Fpkg\u002Fauth","Auth",{"path":125,"title":126,"section":120},"\u002Fpkg\u002Fblob","Blob",{"path":128,"title":129,"section":120},"\u002Fpkg\u002Fchannels","Channels",{"path":131,"title":132,"section":120},"\u002Fpkg\u002Fdb","Db",{"id":134,"title":29,"body":135,"description":960,"extension":961,"meta":962,"navigation":963,"path":28,"section":11,"seo":964,"stem":965,"__hash__":966},"pkg\u002Fpkg\u002Fcheckbox-group.md",{"type":136,"value":137,"toc":945},"minimark",[138,147,150,155,174,178,219,223,228,234,293,299,343,347,366,369,433,439,443,450,453,524,528,531,561,568,570,684,688,694,697,701,710,712,761,765,768,775,875,904,926,941],[139,140,141,142,146],"p",{},"Shared state for a series of checkboxes. ",[143,144,145],"code",{},"color"," on the group tints nested boxes that do not set their own.",[148,149],"base-checkbox-group-demo",{},[151,152,154],"h2",{"id":153},"usage-guidelines","Usage guidelines",[156,157,158],"ul",{},[159,160,161,165,166,169,170,173],"li",{},[162,163,164],"strong",{},"Accessible name:"," Form controls must have an accessible name. Label the group with ",[143,167,168],{},"aria-labelledby",", wrap each box in a ",[143,171,172],{},"\u003Clabel>",", or use Field and Fieldset.",[151,175,177],{"id":176},"anatomy","Anatomy",[179,180,185],"pre",{"className":181,"code":182,"language":183,"meta":184,"style":184},"language-vue shiki shiki-themes github-light github-dark","\u003CUiCheckboxGroup>\n  \u003CUiCheckboxRoot \u002F>\n\u003C\u002FUiCheckboxGroup>\n","vue","",[143,186,187,203,209],{"__ignoreMap":184},[188,189,192,196,200],"span",{"class":190,"line":191},"line",1,[188,193,195],{"class":194},"sVt8B","\u003C",[188,197,199],{"class":198},"s9eBZ","UiCheckboxGroup",[188,201,202],{"class":194},">\n",[188,204,206],{"class":190,"line":205},2,[188,207,208],{"class":194},"  \u003CUiCheckboxRoot \u002F>\n",[188,210,212,215,217],{"class":190,"line":211},3,[188,213,214],{"class":194},"\u003C\u002F",[188,216,199],{"class":198},[188,218,202],{"class":194},[151,220,222],{"id":221},"examples","Examples",[224,225,227],"h3",{"id":226},"labeling-a-checkbox-group","Labeling a checkbox group",[139,229,230,231,233],{},"Label the group with ",[143,232,168],{}," and a sibling caption:",[179,235,237],{"className":181,"code":236,"language":183,"meta":184,"style":184},"\u003Cdiv id=\"protocols-label\">Allowed network protocols\u003C\u002Fdiv>\n\u003CUiCheckboxGroup aria-labelledby=\"protocols-label\">\n  \u003C!-- ... -->\n\u003C\u002FUiCheckboxGroup>\n",[143,238,239,264,279,284],{"__ignoreMap":184},[188,240,241,243,246,250,253,257,260,262],{"class":190,"line":191},[188,242,195],{"class":194},[188,244,245],{"class":198},"div",[188,247,249],{"class":248},"sScJk"," id",[188,251,252],{"class":194},"=",[188,254,256],{"class":255},"sZZnC","\"protocols-label\"",[188,258,259],{"class":194},">Allowed network protocols\u003C\u002F",[188,261,245],{"class":198},[188,263,202],{"class":194},[188,265,266,268,270,273,275,277],{"class":190,"line":205},[188,267,195],{"class":194},[188,269,199],{"class":198},[188,271,272],{"class":248}," aria-labelledby",[188,274,252],{"class":194},[188,276,256],{"class":255},[188,278,202],{"class":194},[188,280,281],{"class":190,"line":211},[188,282,283],{"class":194},"  \u003C!-- ... -->\n",[188,285,287,289,291],{"class":190,"line":286},4,[188,288,214],{"class":194},[188,290,199],{"class":198},[188,292,202],{"class":194},[139,294,295,296,298],{},"An enclosing ",[143,297,172],{}," is the simplest labeling pattern for each checkbox:",[179,300,302],{"className":181,"code":301,"language":183,"meta":184,"style":184},"\u003Clabel>\n  \u003CUiCheckboxRoot value=\"http\">\n    \u003CUiCheckboxIndicator \u002F>\n  \u003C\u002FUiCheckboxRoot>\n  HTTP\n\u003C\u002Flabel>\n",[143,303,304,313,318,323,328,334],{"__ignoreMap":184},[188,305,306,308,311],{"class":190,"line":191},[188,307,195],{"class":194},[188,309,310],{"class":198},"label",[188,312,202],{"class":194},[188,314,315],{"class":190,"line":205},[188,316,317],{"class":194},"  \u003CUiCheckboxRoot value=\"http\">\n",[188,319,320],{"class":190,"line":211},[188,321,322],{"class":194},"    \u003CUiCheckboxIndicator \u002F>\n",[188,324,325],{"class":190,"line":286},[188,326,327],{"class":194},"  \u003C\u002FUiCheckboxRoot>\n",[188,329,331],{"class":190,"line":330},5,[188,332,333],{"class":194},"  HTTP\n",[188,335,337,339,341],{"class":190,"line":336},6,[188,338,214],{"class":194},[188,340,310],{"class":198},[188,342,202],{"class":194},[224,344,346],{"id":345},"rendering-as-a-native-button","Rendering as a native button",[139,348,349,350,353,354,357,358,361,362,365],{},"By default each checkbox renders a ",[143,351,352],{},"\u003Cspan>"," so it can sit inside a wrapping label. Prefer a native ",[143,355,356],{},"\u003Cbutton>"," when the label is a sibling (",[143,359,360],{},"for"," \u002F ",[143,363,364],{},"id",").",[148,367],{"variant":368},"nativeButton",[179,370,372],{"className":181,"code":371,"language":183,"meta":184,"style":184},"\u003Cdiv id=\"protocols-label\">Allowed network protocols\u003C\u002Fdiv>\n\u003CUiCheckboxGroup aria-labelledby=\"protocols-label\">\n  \u003CUiCheckboxRoot :id=\"id\" native-button value=\"http\">\n    \u003CUiCheckboxIndicator \u002F>\n  \u003C\u002FUiCheckboxRoot>\n  \u003Clabel :for=\"id\">HTTP\u003C\u002Flabel>\n\u003C\u002FUiCheckboxGroup>\n",[143,373,374,392,406,411,415,419,424],{"__ignoreMap":184},[188,375,376,378,380,382,384,386,388,390],{"class":190,"line":191},[188,377,195],{"class":194},[188,379,245],{"class":198},[188,381,249],{"class":248},[188,383,252],{"class":194},[188,385,256],{"class":255},[188,387,259],{"class":194},[188,389,245],{"class":198},[188,391,202],{"class":194},[188,393,394,396,398,400,402,404],{"class":190,"line":205},[188,395,195],{"class":194},[188,397,199],{"class":198},[188,399,272],{"class":248},[188,401,252],{"class":194},[188,403,256],{"class":255},[188,405,202],{"class":194},[188,407,408],{"class":190,"line":211},[188,409,410],{"class":194},"  \u003CUiCheckboxRoot :id=\"id\" native-button value=\"http\">\n",[188,412,413],{"class":190,"line":286},[188,414,322],{"class":194},[188,416,417],{"class":190,"line":330},[188,418,327],{"class":194},[188,420,421],{"class":190,"line":336},[188,422,423],{"class":194},"  \u003Clabel :for=\"id\">HTTP\u003C\u002Flabel>\n",[188,425,427,429,431],{"class":190,"line":426},7,[188,428,214],{"class":194},[188,430,199],{"class":198},[188,432,202],{"class":194},[139,434,435,436,438],{},"Do not wrap a native button in a ",[143,437,172],{}," — that is invalid HTML.",[224,440,442],{"id":441},"form-integration","Form integration",[139,444,445,446,449],{},"Use Fieldset for the group name. Give every box the same ",[143,447,448],{},"name"," so checked values submit together:",[148,451],{"variant":452},"form",[179,454,456],{"className":181,"code":455,"language":183,"meta":184,"style":184},"\u003CUiFieldsetRoot>\n  \u003CUiFieldsetLegend>Allowed network protocols\u003C\u002FUiFieldsetLegend>\n  \u003CUiCheckboxGroup>\n    \u003Clabel>\n      \u003CUiCheckboxRoot name=\"allowedNetworkProtocols\" value=\"http\">\n        \u003CUiCheckboxIndicator \u002F>\n      \u003C\u002FUiCheckboxRoot>\n      HTTP\n    \u003C\u002Flabel>\n  \u003C\u002FUiCheckboxGroup>\n\u003C\u002FUiFieldsetRoot>\n",[143,457,458,467,472,477,482,487,492,497,503,509,515],{"__ignoreMap":184},[188,459,460,462,465],{"class":190,"line":191},[188,461,195],{"class":194},[188,463,464],{"class":198},"UiFieldsetRoot",[188,466,202],{"class":194},[188,468,469],{"class":190,"line":205},[188,470,471],{"class":194},"  \u003CUiFieldsetLegend>Allowed network protocols\u003C\u002FUiFieldsetLegend>\n",[188,473,474],{"class":190,"line":211},[188,475,476],{"class":194},"  \u003CUiCheckboxGroup>\n",[188,478,479],{"class":190,"line":286},[188,480,481],{"class":194},"    \u003Clabel>\n",[188,483,484],{"class":190,"line":330},[188,485,486],{"class":194},"      \u003CUiCheckboxRoot name=\"allowedNetworkProtocols\" value=\"http\">\n",[188,488,489],{"class":190,"line":336},[188,490,491],{"class":194},"        \u003CUiCheckboxIndicator \u002F>\n",[188,493,494],{"class":190,"line":426},[188,495,496],{"class":194},"      \u003C\u002FUiCheckboxRoot>\n",[188,498,500],{"class":190,"line":499},8,[188,501,502],{"class":194},"      HTTP\n",[188,504,506],{"class":190,"line":505},9,[188,507,508],{"class":194},"    \u003C\u002Flabel>\n",[188,510,512],{"class":190,"line":511},10,[188,513,514],{"class":194},"  \u003C\u002FUiCheckboxGroup>\n",[188,516,518,520,522],{"class":190,"line":517},11,[188,519,214],{"class":194},[188,521,464],{"class":198},[188,523,202],{"class":194},[224,525,527],{"id":526},"parent-checkbox","Parent checkbox",[139,529,530],{},"A checkbox that ticks or clears the others:",[532,533,534,548,554],"ol",{},[159,535,536,537,540,541,361,544,547],{},"Make the group controlled (",[143,538,539],{},"v-model:value"," or ",[143,542,543],{},":value",[143,545,546],{},"@update:value",")",[159,549,550,551],{},"Pass every child value to ",[143,552,553],{},"allValues",[159,555,556,557,560],{},"Put ",[143,558,559],{},"parent"," on the controlling checkbox",[139,562,563,564,567],{},"The group sets ",[143,565,566],{},"data-indeterminate"," on the parent when some, but not all, children are ticked.",[148,569],{"variant":559},[179,571,573],{"className":181,"code":572,"language":183,"meta":184,"style":184},"\u003CUiCheckboxGroup v-model:value=\"selected\" :all-values=\"apples\">\n  \u003Clabel>\n    \u003CUiCheckboxRoot parent>\n      \u003CUiCheckboxIndicator \u002F>\n    \u003C\u002FUiCheckboxRoot>\n    Apples\n  \u003C\u002Flabel>\n  \u003Clabel>\n    \u003CUiCheckboxRoot value=\"fuji-apple\">\n      \u003CUiCheckboxIndicator \u002F>\n    \u003C\u002FUiCheckboxRoot>\n    Fuji\n  \u003C\u002Flabel>\n\u003C\u002FUiCheckboxGroup>\n",[143,574,575,617,622,627,632,637,642,647,651,656,660,664,670,675],{"__ignoreMap":184},[188,576,577,579,581,584,587,590,592,595,598,600,603,606,608,610,613,615],{"class":190,"line":191},[188,578,195],{"class":194},[188,580,199],{"class":198},[188,582,583],{"class":248}," v-model",[188,585,586],{"class":194},":",[188,588,589],{"class":248},"value",[188,591,252],{"class":194},[188,593,594],{"class":255},"\"",[188,596,597],{"class":194},"selected",[188,599,594],{"class":255},[188,601,602],{"class":194}," :",[188,604,605],{"class":248},"all-values",[188,607,252],{"class":194},[188,609,594],{"class":255},[188,611,612],{"class":194},"apples",[188,614,594],{"class":255},[188,616,202],{"class":194},[188,618,619],{"class":190,"line":205},[188,620,621],{"class":194},"  \u003Clabel>\n",[188,623,624],{"class":190,"line":211},[188,625,626],{"class":194},"    \u003CUiCheckboxRoot parent>\n",[188,628,629],{"class":190,"line":286},[188,630,631],{"class":194},"      \u003CUiCheckboxIndicator \u002F>\n",[188,633,634],{"class":190,"line":330},[188,635,636],{"class":194},"    \u003C\u002FUiCheckboxRoot>\n",[188,638,639],{"class":190,"line":336},[188,640,641],{"class":194},"    Apples\n",[188,643,644],{"class":190,"line":426},[188,645,646],{"class":194},"  \u003C\u002Flabel>\n",[188,648,649],{"class":190,"line":499},[188,650,621],{"class":194},[188,652,653],{"class":190,"line":505},[188,654,655],{"class":194},"    \u003CUiCheckboxRoot value=\"fuji-apple\">\n",[188,657,658],{"class":190,"line":511},[188,659,631],{"class":194},[188,661,662],{"class":190,"line":517},[188,663,636],{"class":194},[188,665,667],{"class":190,"line":666},12,[188,668,669],{"class":194},"    Fuji\n",[188,671,673],{"class":190,"line":672},13,[188,674,646],{"class":194},[188,676,678,680,682],{"class":190,"line":677},14,[188,679,214],{"class":194},[188,681,199],{"class":198},[188,683,202],{"class":194},[224,685,687],{"id":686},"nested-parent-checkbox","Nested parent checkbox",[139,689,690,691,693],{},"Nest another group when a parent owns its own children. Sync the two ",[143,692,589],{},"s in the parent so ticking “Manage Users” selects every nested box.",[148,695],{"variant":696},"nested",[224,698,700],{"id":699},"disabled","Disabled",[139,702,703,705,706,709],{},[143,704,699],{}," on the group ignores presses and sets ",[143,707,708],{},"data-disabled"," on the group and every checkbox.",[148,711],{"variant":699},[179,713,715],{"className":181,"code":714,"language":183,"meta":184,"style":184},"\u003CUiCheckboxGroup disabled :default-value=\"['fuji-apple']\">\n  \u003CUiCheckboxRoot value=\"fuji-apple\" \u002F>\n\u003C\u002FUiCheckboxGroup>\n",[143,716,717,748,753],{"__ignoreMap":184},[188,718,719,721,723,726,728,731,733,735,738,741,744,746],{"class":190,"line":191},[188,720,195],{"class":194},[188,722,199],{"class":198},[188,724,725],{"class":248}," disabled",[188,727,602],{"class":194},[188,729,730],{"class":248},"default-value",[188,732,252],{"class":194},[188,734,594],{"class":255},[188,736,737],{"class":194},"[",[188,739,740],{"class":255},"'fuji-apple'",[188,742,743],{"class":194},"]",[188,745,594],{"class":255},[188,747,202],{"class":194},[188,749,750],{"class":190,"line":205},[188,751,752],{"class":194},"  \u003CUiCheckboxRoot value=\"fuji-apple\" \u002F>\n",[188,754,755,757,759],{"class":190,"line":211},[188,756,214],{"class":194},[188,758,199],{"class":198},[188,760,202],{"class":194},[151,762,764],{"id":763},"api-reference","API reference",[224,766,29],{"id":767},"checkbox-group",[139,769,770,771,774],{},"Provides shared state to a series of checkboxes. Renders a ",[143,772,773],{},"\u003Cdiv role=\"group\">",".",[776,777,778,797],"table",{},[779,780,781],"thead",{},[782,783,784,788,791,794],"tr",{},[785,786,787],"th",{},"Prop",[785,789,790],{},"Type",[785,792,793],{},"Default",[785,795,796],{},"Description",[798,799,800,821,839,856],"tbody",{},[782,801,802,808,813,818],{},[803,804,805],"td",{},[143,806,807],{},"defaultValue",[803,809,810],{},[143,811,812],{},"string[]",[803,814,815],{},[143,816,817],{},"[]",[803,819,820],{},"Uncontrolled initially ticked values.",[782,822,823,827,831,834],{},[803,824,825],{},[143,826,589],{},[803,828,829],{},[143,830,812],{},[803,832,833],{},"—",[803,835,836,837,365],{},"Controlled ticked values (",[143,838,539],{},[782,840,841,845,849,853],{},[803,842,843],{},[143,844,553],{},[803,846,847],{},[143,848,812],{},[803,850,851],{},[143,852,817],{},[803,854,855],{},"Every child value. Required for a parent checkbox.",[782,857,858,862,867,872],{},[803,859,860],{},[143,861,699],{},[803,863,864],{},[143,865,866],{},"boolean",[803,868,869],{},[143,870,871],{},"false",[803,873,874],{},"Ignore interaction in the whole group.",[776,876,877,888],{},[779,878,879],{},[782,880,881,884,886],{},[785,882,883],{},"Event",[785,885,790],{},[785,887,796],{},[798,889,890],{},[782,891,892,896,901],{},[803,893,894],{},[143,895,546],{},[803,897,898],{},[143,899,900],{},"(value: string[]) => void",[803,902,903],{},"Emitted when any checkbox in the group is ticked or unticked.",[776,905,906,915],{},[779,907,908],{},[782,909,910,913],{},[785,911,912],{},"Attribute",[785,914,796],{},[798,916,917],{},[782,918,919,923],{},[803,920,921],{},[143,922,708],{},[803,924,925],{},"Present when the group is disabled.",[139,927,928,929,932,933,935,936,938,939,774],{},"Use ",[930,931,26],"a",{"href":25}," for the Root and Indicator API, including ",[143,934,559],{},", ",[143,937,589],{},", and ",[143,940,566],{},[942,943,944],"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 .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 .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}",{"title":184,"searchDepth":205,"depth":205,"links":946},[947,948,949,957],{"id":153,"depth":205,"text":154},{"id":176,"depth":205,"text":177},{"id":221,"depth":205,"text":222,"children":950},[951,952,953,954,955,956],{"id":226,"depth":211,"text":227},{"id":345,"depth":211,"text":346},{"id":441,"depth":211,"text":442},{"id":526,"depth":211,"text":527},{"id":686,"depth":211,"text":687},{"id":699,"depth":211,"text":700},{"id":763,"depth":205,"text":764,"children":958},[959],{"id":767,"depth":211,"text":29},"A shared state for a series of checkboxes","md",{},true,{"title":29,"description":960},"pkg\u002Fcheckbox-group","ToS2J7cn2pC7K6VDA84_Y_CrifH0gC4X5EKJVj16WC8",1791043754648]