[{"data":1,"prerenderedAt":577},["ShallowReactive",2],{"docs-nav-pkg":3,"docs-page-pkg-\u002Fpkg\u002Ffieldset":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":50,"body":135,"description":570,"extension":571,"meta":572,"navigation":573,"path":49,"section":11,"seo":574,"stem":575,"__hash__":576},"pkg\u002Fpkg\u002Ffieldset.md",{"type":136,"value":137,"toc":558},"minimark",[138,147,150,155,182,186,227,299,303,307,316,318,352,356,359,362,428,432,436,443,491,513,519,523,529,549,554],[139,140,141,142,146],"p",{},"A native fieldset element with an easily stylable legend. Use it to group related Field parts under one name. ",[143,144,145],"code",{},"color"," sets the legend ink. The legend is Light.",[148,149],"base-fieldset-demo",{},[151,152,154],"h2",{"id":153},"usage-guidelines","Usage guidelines",[156,157,158,166,172],"ul",{},[159,160,161,165],"li",{},[162,163,164],"strong",{},"Group related controls:"," Put Fields that belong together inside Root, and name the group with Legend.",[159,167,168,171],{},[162,169,170],{},"Accessible name:"," Legend is associated with the fieldset automatically. Prefer it over a separate heading when the controls submit as a group.",[159,173,174,177,178,181],{},[162,175,176],{},"Disabled:"," ",[143,179,180],{},"disabled"," on Root ignores the whole group. Nested Field and Checkbox parts pick that up.",[151,183,185],{"id":184},"anatomy","Anatomy",[187,188,193],"pre",{"className":189,"code":190,"language":191,"meta":192,"style":192},"language-vue shiki shiki-themes github-light github-dark","\u003CUiFieldsetRoot>\n  \u003CUiFieldsetLegend \u002F>\n\u003C\u002FUiFieldsetRoot>\n","vue","",[143,194,195,211,217],{"__ignoreMap":192},[196,197,200,204,208],"span",{"class":198,"line":199},"line",1,[196,201,203],{"class":202},"sVt8B","\u003C",[196,205,207],{"class":206},"s9eBZ","UiFieldsetRoot",[196,209,210],{"class":202},">\n",[196,212,214],{"class":198,"line":213},2,[196,215,216],{"class":202},"  \u003CUiFieldsetLegend \u002F>\n",[196,218,220,223,225],{"class":198,"line":219},3,[196,221,222],{"class":202},"\u003C\u002F",[196,224,207],{"class":206},[196,226,210],{"class":202},[187,228,230],{"className":189,"code":229,"language":191,"meta":192,"style":192},"\u003CUiFieldsetRoot>\n  \u003CUiFieldsetLegend>Billing details\u003C\u002FUiFieldsetLegend>\n  \u003CUiFieldRoot>\n    \u003CUiFieldLabel>Company\u003C\u002FUiFieldLabel>\n    \u003CUiFieldControl placeholder=\"Enter company name\" \u002F>\n  \u003C\u002FUiFieldRoot>\n  \u003CUiFieldRoot>\n    \u003CUiFieldLabel>Tax ID\u003C\u002FUiFieldLabel>\n    \u003CUiFieldControl placeholder=\"Enter fiscal number\" \u002F>\n  \u003C\u002FUiFieldRoot>\n\u003C\u002FUiFieldsetRoot>\n",[143,231,232,240,245,250,256,262,268,273,279,285,290],{"__ignoreMap":192},[196,233,234,236,238],{"class":198,"line":199},[196,235,203],{"class":202},[196,237,207],{"class":206},[196,239,210],{"class":202},[196,241,242],{"class":198,"line":213},[196,243,244],{"class":202},"  \u003CUiFieldsetLegend>Billing details\u003C\u002FUiFieldsetLegend>\n",[196,246,247],{"class":198,"line":219},[196,248,249],{"class":202},"  \u003CUiFieldRoot>\n",[196,251,253],{"class":198,"line":252},4,[196,254,255],{"class":202},"    \u003CUiFieldLabel>Company\u003C\u002FUiFieldLabel>\n",[196,257,259],{"class":198,"line":258},5,[196,260,261],{"class":202},"    \u003CUiFieldControl placeholder=\"Enter company name\" \u002F>\n",[196,263,265],{"class":198,"line":264},6,[196,266,267],{"class":202},"  \u003C\u002FUiFieldRoot>\n",[196,269,271],{"class":198,"line":270},7,[196,272,249],{"class":202},[196,274,276],{"class":198,"line":275},8,[196,277,278],{"class":202},"    \u003CUiFieldLabel>Tax ID\u003C\u002FUiFieldLabel>\n",[196,280,282],{"class":198,"line":281},9,[196,283,284],{"class":202},"    \u003CUiFieldControl placeholder=\"Enter fiscal number\" \u002F>\n",[196,286,288],{"class":198,"line":287},10,[196,289,267],{"class":202},[196,291,293,295,297],{"class":198,"line":292},11,[196,294,222],{"class":202},[196,296,207],{"class":206},[196,298,210],{"class":202},[151,300,302],{"id":301},"examples","Examples",[304,305,306],"h3",{"id":180},"Disabled",[139,308,309,311,312,315],{},[143,310,180],{}," on Root sets ",[143,313,314],{},"data-disabled"," on Root and Legend, and nested Fields ignore interaction.",[148,317],{"variant":180},[187,319,321],{"className":189,"code":320,"language":191,"meta":192,"style":192},"\u003CUiFieldsetRoot disabled>\n  \u003CUiFieldsetLegend>Billing details\u003C\u002FUiFieldsetLegend>\n  …\n\u003C\u002FUiFieldsetRoot>\n",[143,322,323,335,339,344],{"__ignoreMap":192},[196,324,325,327,329,333],{"class":198,"line":199},[196,326,203],{"class":202},[196,328,207],{"class":206},[196,330,332],{"class":331},"sScJk"," disabled",[196,334,210],{"class":202},[196,336,337],{"class":198,"line":213},[196,338,244],{"class":202},[196,340,341],{"class":198,"line":219},[196,342,343],{"class":202},"  …\n",[196,345,346,348,350],{"class":198,"line":252},[196,347,222],{"class":202},[196,349,207],{"class":206},[196,351,210],{"class":202},[304,353,355],{"id":354},"grouping-checkboxes","Grouping checkboxes",[139,357,358],{},"Use Fieldset when a Checkbox Group needs a shared name. Legend labels the group; each checkbox keeps its own label.",[148,360],{"variant":361},"checkbox",[187,363,365],{"className":189,"code":364,"language":191,"meta":192,"style":192},"\u003CUiFieldsetRoot>\n  \u003CUiFieldsetLegend>Allowed network protocols\u003C\u002FUiFieldsetLegend>\n  \u003CUiCheckboxGroup>\n    \u003Clabel>\n      \u003CUiCheckboxRoot name=\"allowedNetworkProtocols\" value=\"https\">\n        \u003CUiCheckboxIndicator \u002F>\n      \u003C\u002FUiCheckboxRoot>\n      HTTPS\n    \u003C\u002Flabel>\n  \u003C\u002FUiCheckboxGroup>\n\u003C\u002FUiFieldsetRoot>\n",[143,366,367,375,380,385,390,395,400,405,410,415,420],{"__ignoreMap":192},[196,368,369,371,373],{"class":198,"line":199},[196,370,203],{"class":202},[196,372,207],{"class":206},[196,374,210],{"class":202},[196,376,377],{"class":198,"line":213},[196,378,379],{"class":202},"  \u003CUiFieldsetLegend>Allowed network protocols\u003C\u002FUiFieldsetLegend>\n",[196,381,382],{"class":198,"line":219},[196,383,384],{"class":202},"  \u003CUiCheckboxGroup>\n",[196,386,387],{"class":198,"line":252},[196,388,389],{"class":202},"    \u003Clabel>\n",[196,391,392],{"class":198,"line":258},[196,393,394],{"class":202},"      \u003CUiCheckboxRoot name=\"allowedNetworkProtocols\" value=\"https\">\n",[196,396,397],{"class":198,"line":264},[196,398,399],{"class":202},"        \u003CUiCheckboxIndicator \u002F>\n",[196,401,402],{"class":198,"line":270},[196,403,404],{"class":202},"      \u003C\u002FUiCheckboxRoot>\n",[196,406,407],{"class":198,"line":275},[196,408,409],{"class":202},"      HTTPS\n",[196,411,412],{"class":198,"line":281},[196,413,414],{"class":202},"    \u003C\u002Flabel>\n",[196,416,417],{"class":198,"line":287},[196,418,419],{"class":202},"  \u003C\u002FUiCheckboxGroup>\n",[196,421,422,424,426],{"class":198,"line":292},[196,423,222],{"class":202},[196,425,207],{"class":206},[196,427,210],{"class":202},[151,429,431],{"id":430},"api-reference","API reference",[304,433,435],{"id":434},"root","Root",[139,437,438,439,442],{},"Groups a shared legend with related controls. Renders a ",[143,440,441],{},"\u003Cfieldset>",".",[444,445,446,465],"table",{},[447,448,449],"thead",{},[450,451,452,456,459,462],"tr",{},[453,454,455],"th",{},"Prop",[453,457,458],{},"Type",[453,460,461],{},"Default",[453,463,464],{},"Description",[466,467,468],"tbody",{},[450,469,470,475,480,485],{},[471,472,473],"td",{},[143,474,180],{},[471,476,477],{},[143,478,479],{},"boolean",[471,481,482],{},[143,483,484],{},"false",[471,486,487,488,490],{},"Ignore interaction. Nested Field ",[143,489,180],{}," is implied.",[444,492,493,502],{},[447,494,495],{},[450,496,497,500],{},[453,498,499],{},"Attribute",[453,501,464],{},[466,503,504],{},[450,505,506,510],{},[471,507,508],{},[143,509,314],{},[471,511,512],{},"Present when the fieldset is disabled.",[139,514,515,516,442],{},"Root state: ",[143,517,518],{},"{ disabled: boolean }",[304,520,522],{"id":521},"legend","Legend",[139,524,525,526,442],{},"An accessible label associated with the fieldset. Renders a ",[143,527,528],{},"\u003Clegend>",[444,530,531,539],{},[447,532,533],{},[450,534,535,537],{},[453,536,499],{},[453,538,464],{},[466,540,541],{},[450,542,543,547],{},[471,544,545],{},[143,546,314],{},[471,548,512],{},[139,550,551,552,442],{},"Legend state: ",[143,553,518],{},[555,556,557],"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}",{"title":192,"searchDepth":213,"depth":213,"links":559},[560,561,562,566],{"id":153,"depth":213,"text":154},{"id":184,"depth":213,"text":185},{"id":301,"depth":213,"text":302,"children":563},[564,565],{"id":180,"depth":219,"text":306},{"id":354,"depth":219,"text":355},{"id":430,"depth":213,"text":431,"children":567},[568,569],{"id":434,"depth":219,"text":435},{"id":521,"depth":219,"text":522},"A native fieldset with a stylable legend","md",{},true,{"title":50,"description":570},"pkg\u002Ffieldset","d3J34Fjobdetc0LGFaV_cVQ2e8huVsjO4-DAys4qQ7E",1791043754659]