[{"data":1,"prerenderedAt":498},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Freact\u002Ffieldset":141},[4,82],{"title":5,"path":6,"stem":7,"children":8,"page":81},"React","\u002Freact","react",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69,73,77],{"title":10,"path":11,"stem":12},"Button","\u002Freact\u002Fbutton","react\u002Fbutton",{"title":14,"path":15,"stem":16},"Checkbox","\u002Freact\u002Fcheckbox","react\u002Fcheckbox",{"title":18,"path":19,"stem":20},"Combobox (Autocomplete)","\u002Freact\u002Fcombobox","react\u002Fcombobox",{"title":22,"path":23,"stem":24},"Dialog (Modal)","\u002Freact\u002Fdialog","react\u002Fdialog",{"title":26,"path":27,"stem":28},"Disclosure","\u002Freact\u002Fdisclosure","react\u002Fdisclosure",{"title":30,"path":31,"stem":32},"Fieldset","\u002Freact\u002Ffieldset","react\u002Ffieldset",{"title":34,"path":35,"stem":36},"Icon","\u002Freact\u002Ficon","react\u002Ficon",{"title":38,"path":39,"stem":40},"Input","\u002Freact\u002Finput","react\u002Finput",{"title":42,"path":43,"stem":44},"Listbox (Select)","\u002Freact\u002Flistbox","react\u002Flistbox",{"title":46,"path":47,"stem":48},"Menu (Dropdown)","\u002Freact\u002Fmenu","react\u002Fmenu",{"title":50,"path":51,"stem":52},"Pattern","\u002Freact\u002Fpattern","react\u002Fpattern",{"title":54,"path":55,"stem":56},"Popover","\u002Freact\u002Fpopover","react\u002Fpopover",{"title":58,"path":59,"stem":60},"Radio Group","\u002Freact\u002Fradio-group","react\u002Fradio-group",{"title":62,"path":63,"stem":64},"Select","\u002Freact\u002Fselect","react\u002Fselect",{"title":66,"path":67,"stem":68},"Switch (Toggle)","\u002Freact\u002Fswitch","react\u002Fswitch",{"title":70,"path":71,"stem":72},"Tabs","\u002Freact\u002Ftabs","react\u002Ftabs",{"title":74,"path":75,"stem":76},"Textarea","\u002Freact\u002Ftextarea","react\u002Ftextarea",{"title":78,"path":79,"stem":80},"Transition","\u002Freact\u002Ftransition","react\u002Ftransition",false,{"title":83,"path":84,"stem":85,"children":86,"page":81},"Vue","\u002Fvue","vue",[87,90,93,96,99,102,105,108,111,114,117,120,123,126,129,132,135,138],{"title":10,"path":88,"stem":89},"\u002Fvue\u002Fbutton","vue\u002Fbutton",{"title":14,"path":91,"stem":92},"\u002Fvue\u002Fcheckbox","vue\u002Fcheckbox",{"title":18,"path":94,"stem":95},"\u002Fvue\u002Fcombobox","vue\u002Fcombobox",{"title":22,"path":97,"stem":98},"\u002Fvue\u002Fdialog","vue\u002Fdialog",{"title":26,"path":100,"stem":101},"\u002Fvue\u002Fdisclosure","vue\u002Fdisclosure",{"title":30,"path":103,"stem":104},"\u002Fvue\u002Ffieldset","vue\u002Ffieldset",{"title":34,"path":106,"stem":107},"\u002Fvue\u002Ficon","vue\u002Ficon",{"title":38,"path":109,"stem":110},"\u002Fvue\u002Finput","vue\u002Finput",{"title":42,"path":112,"stem":113},"\u002Fvue\u002Flistbox","vue\u002Flistbox",{"title":46,"path":115,"stem":116},"\u002Fvue\u002Fmenu","vue\u002Fmenu",{"title":50,"path":118,"stem":119},"\u002Fvue\u002Fpattern","vue\u002Fpattern",{"title":54,"path":121,"stem":122},"\u002Fvue\u002Fpopover","vue\u002Fpopover",{"title":58,"path":124,"stem":125},"\u002Fvue\u002Fradio-group","vue\u002Fradio-group",{"title":62,"path":127,"stem":128},"\u002Fvue\u002Fselect","vue\u002Fselect",{"title":66,"path":130,"stem":131},"\u002Fvue\u002Fswitch","vue\u002Fswitch",{"title":70,"path":133,"stem":134},"\u002Fvue\u002Ftabs","vue\u002Ftabs",{"title":74,"path":136,"stem":137},"\u002Fvue\u002Ftextarea","vue\u002Ftextarea",{"title":78,"path":139,"stem":140},"\u002Fvue\u002Ftransition","vue\u002Ftransition",{"id":142,"title":30,"body":143,"description":493,"extension":494,"meta":495,"navigation":307,"path":31,"seo":496,"stem":32,"__hash__":497},"docs\u002Freact\u002Ffieldset.md",{"type":144,"value":145,"toc":488},"minimark",[146,151,160,185,205,209,228,442,477,481,484],[147,148,150],"h2",{"id":149},"installation","Installation",[152,153,154,155,159],"p",{},"Install ",[156,157,158],"code",{},"@vinui\u002Freact"," from GitHub with pnpm, then import its stylesheet once, in your root layout or entry file:",[161,162,167],"pre",{"className":163,"code":164,"language":165,"meta":166,"style":166},"language-bash shiki shiki-themes github-light","pnpm add github:vindotski\u002Fvinui#path:packages\u002Freact\n","bash","",[156,168,169],{"__ignoreMap":166},[170,171,174,178,182],"span",{"class":172,"line":173},"line",1,[170,175,177],{"class":176},"s7eDp","pnpm",[170,179,181],{"class":180},"sYBdl"," add",[170,183,184],{"class":180}," github:vindotski\u002Fvinui#path:packages\u002Freact\n",[161,186,190],{"className":187,"code":188,"language":189,"meta":166,"style":166},"language-tsx shiki shiki-themes github-light","import '@vinui\u002Freact\u002Fstyles.css';\n","tsx",[156,191,192],{"__ignoreMap":166},[170,193,194,198,201],{"class":172,"line":173},[170,195,197],{"class":196},"sD7c4","import",[170,199,200],{"class":180}," '@vinui\u002Freact\u002Fstyles.css'",[170,202,204],{"class":203},"sgsFI",";\n",[147,206,208],{"id":207},"usage","Usage",[152,210,211,212,215,216,219,220,223,224,227],{},"Labels, help text and errors for form controls. Inside a ",[156,213,214],{},"Field",", the ",[156,217,218],{},"Label",", ",[156,221,222],{},"Description"," and ",[156,225,226],{},"ErrorMessage"," are connected to the control for screen readers, and clicking the label focuses or toggles it. This works with vinui's Checkbox, Combobox, Input, Listbox, Select, Switch and Textarea:",[161,229,231],{"className":187,"code":230,"language":189,"meta":166,"style":166},"import {\n  Description,\n  ErrorMessage,\n  Field,\n  FieldGroup,\n  Fieldset,\n  Label,\n  Legend,\n  Switch,\n} from '@vinui\u002Freact';\n\n\u003CFieldset>\n  \u003CLegend>Notifications\u003C\u002FLegend>\n  \u003CDescription>Changes apply to your whole team.\u003C\u002FDescription>\n  \u003CFieldGroup>\n    \u003CField>\n      \u003CLabel>Weekly summary\u003C\u002FLabel>\n      \u003CDescription>A digest of activity, every Monday.\u003C\u002FDescription>\n      \u003CSwitch \u002F>\n    \u003C\u002FField>\n  \u003C\u002FFieldGroup>\n\u003C\u002FFieldset>;\n",[156,232,233,240,246,252,258,264,270,276,282,288,302,309,321,337,351,361,371,386,400,411,421,431],{"__ignoreMap":166},[170,234,235,237],{"class":172,"line":173},[170,236,197],{"class":196},[170,238,239],{"class":203}," {\n",[170,241,243],{"class":172,"line":242},2,[170,244,245],{"class":203},"  Description,\n",[170,247,249],{"class":172,"line":248},3,[170,250,251],{"class":203},"  ErrorMessage,\n",[170,253,255],{"class":172,"line":254},4,[170,256,257],{"class":203},"  Field,\n",[170,259,261],{"class":172,"line":260},5,[170,262,263],{"class":203},"  FieldGroup,\n",[170,265,267],{"class":172,"line":266},6,[170,268,269],{"class":203},"  Fieldset,\n",[170,271,273],{"class":172,"line":272},7,[170,274,275],{"class":203},"  Label,\n",[170,277,279],{"class":172,"line":278},8,[170,280,281],{"class":203},"  Legend,\n",[170,283,285],{"class":172,"line":284},9,[170,286,287],{"class":203},"  Switch,\n",[170,289,291,294,297,300],{"class":172,"line":290},10,[170,292,293],{"class":203},"} ",[170,295,296],{"class":196},"from",[170,298,299],{"class":180}," '@vinui\u002Freact'",[170,301,204],{"class":203},[170,303,305],{"class":172,"line":304},11,[170,306,308],{"emptyLinePlaceholder":307},true,"\n",[170,310,312,315,318],{"class":172,"line":311},12,[170,313,314],{"class":203},"\u003C",[170,316,30],{"class":317},"sYu0t",[170,319,320],{"class":203},">\n",[170,322,324,327,330,333,335],{"class":172,"line":323},13,[170,325,326],{"class":203},"  \u003C",[170,328,329],{"class":317},"Legend",[170,331,332],{"class":203},">Notifications\u003C\u002F",[170,334,329],{"class":317},[170,336,320],{"class":203},[170,338,340,342,344,347,349],{"class":172,"line":339},14,[170,341,326],{"class":203},[170,343,222],{"class":317},[170,345,346],{"class":203},">Changes apply to your whole team.\u003C\u002F",[170,348,222],{"class":317},[170,350,320],{"class":203},[170,352,354,356,359],{"class":172,"line":353},15,[170,355,326],{"class":203},[170,357,358],{"class":317},"FieldGroup",[170,360,320],{"class":203},[170,362,364,367,369],{"class":172,"line":363},16,[170,365,366],{"class":203},"    \u003C",[170,368,214],{"class":317},[170,370,320],{"class":203},[170,372,374,377,379,382,384],{"class":172,"line":373},17,[170,375,376],{"class":203},"      \u003C",[170,378,218],{"class":317},[170,380,381],{"class":203},">Weekly summary\u003C\u002F",[170,383,218],{"class":317},[170,385,320],{"class":203},[170,387,389,391,393,396,398],{"class":172,"line":388},18,[170,390,376],{"class":203},[170,392,222],{"class":317},[170,394,395],{"class":203},">A digest of activity, every Monday.\u003C\u002F",[170,397,222],{"class":317},[170,399,320],{"class":203},[170,401,403,405,408],{"class":172,"line":402},19,[170,404,376],{"class":203},[170,406,407],{"class":317},"Switch",[170,409,410],{"class":203}," \u002F>\n",[170,412,414,417,419],{"class":172,"line":413},20,[170,415,416],{"class":203},"    \u003C\u002F",[170,418,214],{"class":317},[170,420,320],{"class":203},[170,422,424,427,429],{"class":172,"line":423},21,[170,425,426],{"class":203},"  \u003C\u002F",[170,428,358],{"class":317},[170,430,320],{"class":203},[170,432,434,437,439],{"class":172,"line":433},22,[170,435,436],{"class":203},"\u003C\u002F",[170,438,30],{"class":317},[170,440,441],{"class":203},">;\n",[443,444,445,458,467],"ul",{},[446,447,448,451,452,454,455,457],"li",{},[156,449,450],{},"disabled"," on a ",[156,453,30],{}," or ",[156,456,214],{}," disables every control inside and dims the labels.",[446,459,460,462,463,466],{},[156,461,226],{}," shows a validation error in ",[156,464,465],{},"--vin-color-danger",".",[446,468,469,223,471,473,474,476],{},[156,470,222],{},[156,472,226],{}," outside a ",[156,475,214],{}," render as plain text.",[147,478,480],{"id":479},"more-to-come","More to come",[152,482,483],{},"Detailed examples, keyboard interaction and the full component API are on their way.",[485,486,487],"style",{},"html pre.shiki code .s7eDp, html code.shiki .s7eDp{--shiki-default:#6F42C1}html pre.shiki code .sYBdl, html code.shiki .sYBdl{--shiki-default:#032F62}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 pre.shiki code .sD7c4, html code.shiki .sD7c4{--shiki-default:#D73A49}html pre.shiki code .sgsFI, html code.shiki .sgsFI{--shiki-default:#24292E}html pre.shiki code .sYu0t, html code.shiki .sYu0t{--shiki-default:#005CC5}",{"title":166,"searchDepth":242,"depth":248,"links":489},[490,491,492],{"id":149,"depth":242,"text":150},{"id":207,"depth":242,"text":208},{"id":479,"depth":242,"text":480},"Group form controls with labels, descriptions and error messages, wired up for screen readers.","md",{},{"title":30,"description":493},"xVvvWAzBvr6GCqyM4xpz9DlrrXODfotKt28mQNnw680",1792929667666]