[{"data":1,"prerenderedAt":805},["ShallowReactive",2],{"landing-copy":3,"\u002Fdocs\u002Fv1\u002Fforms\u002Fradio":65,"nav:v1":661},{"id":4,"extension":5,"meta":6,"sections":7,"stem":62,"tagline":63,"__hash__":64},"landing\u002Flanding.yml","yml",{},[8,18,22,29,33,40,47,51,57],{"id":9,"headline":10,"body":11,"cta":12,"secondary":15},"hero","The bare minimum for elegant interfaces.","Three classes, no framework, {css.kB}. A CSS and JavaScript library with no reset, no font, no runtime dependencies and no rule outside a `pui-` class; the browser does the work.",{"label":13,"to":14},"Get started","\u002Fdocs",{"label":16,"to":17},"Migrating from 0.x","\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-0-x",{"id":19,"headline":20,"body":21},"size","{css.kB}. Measured, not promised.","`perfectui.css` is {css.bytes} bytes gzip; the optional JavaScript loader is {js.bytes}. The bars below are the same measurement run on the published builds of the alternatives.",{"id":23,"headline":24,"body":25,"cta":26},"classes","A shape, a style, a colour.","Every element is up to three classes you can combine freely: what it is, how the colour is applied, which colour. Seven colours and four styles give 28 looks per shape, and adding a colour never multiplies your classes.",{"label":27,"to":28},"See the components","\u002Fdocs\u002Fcomponents\u002Fbutton",{"id":30,"headline":31,"body":32},"overlays","Overlays without a plugin.","Modals are `\u003Cdialog>`, menus are `popover`, tooltips are `interestfor`, accordions are `\u003Cdetails>`. The optional loader downloads a fallback only when a browser is missing one of them.",{"id":34,"headline":35,"body":36,"cta":37},"mode-theme","One attribute for dark mode. One variable for your colour.","With no attribute, perfectui follows the operating system. Set `data-pui-mode` to choose, and `--pui-theme` to make every component yours.",{"label":38,"to":39},"Dark mode docs","\u002Fdocs\u002Fcustomization\u002Fdark-mode",{"id":41,"headline":42,"body":43,"cta":44},"tailwind","Your utilities always win.","One `@layer` line keeps Tailwind's reset below perfectui and every utility above it.",{"label":45,"to":46},"Tailwind guide","\u002Fdocs\u002Fgetting-started\u002Ftailwind-css",{"id":48,"headline":49,"body":50},"nothing-to-undo","Nothing you have to undo.","No reset to override, no font to remove, no `!important` to beat, no initialiser to call after rendering, no guard for server rendering. ESM only, nothing on `window`.",{"id":52,"headline":53,"body":54,"cta":55},"migration","Coming from 0.x?","1.0 is a rewrite: every class is prefixed, styles and colours are separate classes, and the browser replaced the JavaScript. The guide lists every change.",{"label":56,"to":17},"Read the migration guide",{"id":58,"headline":59,"body":60,"cta":61},"install","Install it your way.","A package for npm, yarn, pnpm or bun, or two tags from a CDN. Import everything or only the components you use.",{"label":13,"to":14},"landing","Components the browser already knows how to run.","QsxvMnCQ8bgawTVgX6YLkvZoqMKaQbFt0j1urNnrKQw",{"id":66,"title":67,"body":68,"changed":650,"description":651,"extension":652,"from":650,"meta":653,"navigation":654,"path":655,"seo":656,"since":650,"stem":657,"tags":658,"to":650,"__hash__":660},"docs_v1\u002Fdocs\u002Fv1\u002F05.forms\u002F07.radio.md","Radio",{"type":69,"value":70,"toc":645},"minimark",[71,235,240,370,374,424,428,626,641],[72,73,74],"example",{},[75,76,81],"pre",{"className":77,"code":78,"language":79,"meta":80,"style":80},"language-html shiki shiki-themes perfectui-site","\u003Clabel>\n  \u003Cinput type=\"radio\" name=\"plan\" class=\"pui-radio\" checked \u002F>\n  Free\n\u003C\u002Flabel>\n\u003Clabel>\n  \u003Cinput type=\"radio\" name=\"plan\" class=\"pui-radio\" \u002F>\n  Pro\n\u003C\u002Flabel>\n","html","",[82,83,84,100,155,162,172,181,220,226],"code",{"__ignoreMap":80},[85,86,89,93,97],"span",{"class":87,"line":88},"line",1,[85,90,92],{"class":91},"s8qk9","\u003C",[85,94,96],{"class":95},"sz5At","label",[85,98,99],{"class":91},">\n",[85,101,103,106,109,113,116,119,123,125,128,130,132,135,137,140,142,144,147,149,152],{"class":87,"line":102},2,[85,104,105],{"class":91},"  \u003C",[85,107,108],{"class":95},"input",[85,110,112],{"class":111},"sz6eq"," type",[85,114,115],{"class":91},"=",[85,117,118],{"class":91},"\"",[85,120,122],{"class":121},"s8AH5","radio",[85,124,118],{"class":91},[85,126,127],{"class":111}," name",[85,129,115],{"class":91},[85,131,118],{"class":91},[85,133,134],{"class":121},"plan",[85,136,118],{"class":91},[85,138,139],{"class":111}," class",[85,141,115],{"class":91},[85,143,118],{"class":91},[85,145,146],{"class":121},"pui-radio",[85,148,118],{"class":91},[85,150,151],{"class":111}," checked",[85,153,154],{"class":91}," \u002F>\n",[85,156,158],{"class":87,"line":157},3,[85,159,161],{"class":160},"stV6K","  Free\n",[85,163,165,168,170],{"class":87,"line":164},4,[85,166,167],{"class":91},"\u003C\u002F",[85,169,96],{"class":95},[85,171,99],{"class":91},[85,173,175,177,179],{"class":87,"line":174},5,[85,176,92],{"class":91},[85,178,96],{"class":95},[85,180,99],{"class":91},[85,182,184,186,188,190,192,194,196,198,200,202,204,206,208,210,212,214,216,218],{"class":87,"line":183},6,[85,185,105],{"class":91},[85,187,108],{"class":95},[85,189,112],{"class":111},[85,191,115],{"class":91},[85,193,118],{"class":91},[85,195,122],{"class":121},[85,197,118],{"class":91},[85,199,127],{"class":111},[85,201,115],{"class":91},[85,203,118],{"class":91},[85,205,134],{"class":121},[85,207,118],{"class":91},[85,209,139],{"class":111},[85,211,115],{"class":91},[85,213,118],{"class":91},[85,215,146],{"class":121},[85,217,118],{"class":91},[85,219,154],{"class":91},[85,221,223],{"class":87,"line":222},7,[85,224,225],{"class":160},"  Pro\n",[85,227,229,231,233],{"class":87,"line":228},8,[85,230,167],{"class":91},[85,232,96],{"class":95},[85,234,99],{"class":91},[236,237,239],"h2",{"id":238},"colors","Colors",[72,241,242],{},[75,243,245],{"className":77,"code":244,"language":79,"meta":80,"style":80},"\u003Cinput type=\"radio\" name=\"color\" class=\"pui-radio\" checked \u002F>\n\u003Cinput type=\"radio\" name=\"color\" class=\"pui-radio pui-success\" checked \u002F>\n\u003Cinput type=\"radio\" name=\"color\" class=\"pui-radio pui-warn\" checked \u002F>\n",[82,246,247,288,329],{"__ignoreMap":80},[85,248,249,251,253,255,257,259,261,263,265,267,269,272,274,276,278,280,282,284,286],{"class":87,"line":88},[85,250,92],{"class":91},[85,252,108],{"class":95},[85,254,112],{"class":111},[85,256,115],{"class":91},[85,258,118],{"class":91},[85,260,122],{"class":121},[85,262,118],{"class":91},[85,264,127],{"class":111},[85,266,115],{"class":91},[85,268,118],{"class":91},[85,270,271],{"class":121},"color",[85,273,118],{"class":91},[85,275,139],{"class":111},[85,277,115],{"class":91},[85,279,118],{"class":91},[85,281,146],{"class":121},[85,283,118],{"class":91},[85,285,151],{"class":111},[85,287,154],{"class":91},[85,289,290,292,294,296,298,300,302,304,306,308,310,312,314,316,318,320,323,325,327],{"class":87,"line":102},[85,291,92],{"class":91},[85,293,108],{"class":95},[85,295,112],{"class":111},[85,297,115],{"class":91},[85,299,118],{"class":91},[85,301,122],{"class":121},[85,303,118],{"class":91},[85,305,127],{"class":111},[85,307,115],{"class":91},[85,309,118],{"class":91},[85,311,271],{"class":121},[85,313,118],{"class":91},[85,315,139],{"class":111},[85,317,115],{"class":91},[85,319,118],{"class":91},[85,321,322],{"class":121},"pui-radio pui-success",[85,324,118],{"class":91},[85,326,151],{"class":111},[85,328,154],{"class":91},[85,330,331,333,335,337,339,341,343,345,347,349,351,353,355,357,359,361,364,366,368],{"class":87,"line":157},[85,332,92],{"class":91},[85,334,108],{"class":95},[85,336,112],{"class":111},[85,338,115],{"class":91},[85,340,118],{"class":91},[85,342,122],{"class":121},[85,344,118],{"class":91},[85,346,127],{"class":111},[85,348,115],{"class":91},[85,350,118],{"class":91},[85,352,271],{"class":121},[85,354,118],{"class":91},[85,356,139],{"class":111},[85,358,115],{"class":91},[85,360,118],{"class":91},[85,362,363],{"class":121},"pui-radio pui-warn",[85,365,118],{"class":91},[85,367,151],{"class":111},[85,369,154],{"class":91},[236,371,373],{"id":372},"disabled","Disabled",[72,375,376],{},[75,377,379],{"className":77,"code":378,"language":79,"meta":80,"style":80},"\u003Cinput type=\"radio\" name=\"plan\" class=\"pui-radio\" checked disabled \u002F>\n",[82,380,381],{"__ignoreMap":80},[85,382,383,385,387,389,391,393,395,397,399,401,403,405,407,409,411,413,415,417,419,422],{"class":87,"line":88},[85,384,92],{"class":91},[85,386,108],{"class":95},[85,388,112],{"class":111},[85,390,115],{"class":91},[85,392,118],{"class":91},[85,394,122],{"class":121},[85,396,118],{"class":91},[85,398,127],{"class":111},[85,400,115],{"class":91},[85,402,118],{"class":91},[85,404,134],{"class":121},[85,406,118],{"class":91},[85,408,139],{"class":111},[85,410,115],{"class":91},[85,412,118],{"class":91},[85,414,146],{"class":121},[85,416,118],{"class":91},[85,418,151],{"class":111},[85,420,421],{"class":111}," disabled",[85,423,154],{"class":91},[236,425,427],{"id":426},"a-group-of-options","A group of options",[72,429,430],{},[75,431,433],{"className":77,"code":432,"language":79,"meta":80,"style":80},"\u003Cfieldset>\n  \u003Clegend>Plan\u003C\u002Flegend>\n  \u003Clabel>\u003Cinput type=\"radio\" name=\"plan\" class=\"pui-radio\" \u002F> Free\u003C\u002Flabel>\n  \u003Clabel>\u003Cinput type=\"radio\" name=\"plan\" class=\"pui-radio\" \u002F> Pro\u003C\u002Flabel>\n  \u003Clabel>\u003Cinput type=\"radio\" name=\"plan\" class=\"pui-radio\" \u002F> Team\u003C\u002Flabel>\n\u003C\u002Ffieldset>\n",[82,434,435,444,463,516,567,618],{"__ignoreMap":80},[85,436,437,439,442],{"class":87,"line":88},[85,438,92],{"class":91},[85,440,441],{"class":95},"fieldset",[85,443,99],{"class":91},[85,445,446,448,451,454,457,459,461],{"class":87,"line":102},[85,447,105],{"class":91},[85,449,450],{"class":95},"legend",[85,452,453],{"class":91},">",[85,455,456],{"class":160},"Plan",[85,458,167],{"class":91},[85,460,450],{"class":95},[85,462,99],{"class":91},[85,464,465,467,469,472,474,476,478,480,482,484,486,488,490,492,494,496,498,500,502,504,507,510,512,514],{"class":87,"line":157},[85,466,105],{"class":91},[85,468,96],{"class":95},[85,470,471],{"class":91},">\u003C",[85,473,108],{"class":95},[85,475,112],{"class":111},[85,477,115],{"class":91},[85,479,118],{"class":91},[85,481,122],{"class":121},[85,483,118],{"class":91},[85,485,127],{"class":111},[85,487,115],{"class":91},[85,489,118],{"class":91},[85,491,134],{"class":121},[85,493,118],{"class":91},[85,495,139],{"class":111},[85,497,115],{"class":91},[85,499,118],{"class":91},[85,501,146],{"class":121},[85,503,118],{"class":91},[85,505,506],{"class":91}," \u002F>",[85,508,509],{"class":160}," Free",[85,511,167],{"class":91},[85,513,96],{"class":95},[85,515,99],{"class":91},[85,517,518,520,522,524,526,528,530,532,534,536,538,540,542,544,546,548,550,552,554,556,558,561,563,565],{"class":87,"line":164},[85,519,105],{"class":91},[85,521,96],{"class":95},[85,523,471],{"class":91},[85,525,108],{"class":95},[85,527,112],{"class":111},[85,529,115],{"class":91},[85,531,118],{"class":91},[85,533,122],{"class":121},[85,535,118],{"class":91},[85,537,127],{"class":111},[85,539,115],{"class":91},[85,541,118],{"class":91},[85,543,134],{"class":121},[85,545,118],{"class":91},[85,547,139],{"class":111},[85,549,115],{"class":91},[85,551,118],{"class":91},[85,553,146],{"class":121},[85,555,118],{"class":91},[85,557,506],{"class":91},[85,559,560],{"class":160}," Pro",[85,562,167],{"class":91},[85,564,96],{"class":95},[85,566,99],{"class":91},[85,568,569,571,573,575,577,579,581,583,585,587,589,591,593,595,597,599,601,603,605,607,609,612,614,616],{"class":87,"line":174},[85,570,105],{"class":91},[85,572,96],{"class":95},[85,574,471],{"class":91},[85,576,108],{"class":95},[85,578,112],{"class":111},[85,580,115],{"class":91},[85,582,118],{"class":91},[85,584,122],{"class":121},[85,586,118],{"class":91},[85,588,127],{"class":111},[85,590,115],{"class":91},[85,592,118],{"class":91},[85,594,134],{"class":121},[85,596,118],{"class":91},[85,598,139],{"class":111},[85,600,115],{"class":91},[85,602,118],{"class":91},[85,604,146],{"class":121},[85,606,118],{"class":91},[85,608,506],{"class":91},[85,610,611],{"class":160}," Team",[85,613,167],{"class":91},[85,615,96],{"class":95},[85,617,99],{"class":91},[85,619,620,622,624],{"class":87,"line":183},[85,621,167],{"class":91},[85,623,441],{"class":95},[85,625,99],{"class":91},[627,628,629],"warning",{},[630,631,632,633,636,637,640],"p",{},"A ",[82,634,635],{},"\u003Cfieldset>"," with a ",[82,638,639],{},"\u003Clegend>"," is what tells a screen reader that the options belong together. Perfect UI does not style either element, so they look like your page.",[642,643,644],"style",{},"html pre.shiki code .s8qk9, html code.shiki .s8qk9{--shiki-default:var(--site-code-punct)}html pre.shiki code .sz5At, html code.shiki .sz5At{--shiki-default:var(--site-code-tag)}html pre.shiki code .sz6eq, html code.shiki .sz6eq{--shiki-default:var(--site-code-attr)}html pre.shiki code .s8AH5, html code.shiki .s8AH5{--shiki-default:var(--site-code-value)}html pre.shiki code .stV6K, html code.shiki .stV6K{--shiki-default:var(--site-code-text)}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);}",{"title":80,"searchDepth":102,"depth":102,"links":646},[647,648,649],{"id":238,"depth":102,"text":239},{"id":372,"depth":102,"text":373},{"id":426,"depth":102,"text":427},null,"A native `\u003Cinput type=\"radio\">` with the `pui-radio` class. Grouping, arrow-key navigation and the one-of-many behavior all come from the `name` attribute.","md",{},true,"\u002Fdocs\u002Fv1\u002Fforms\u002Fradio",{"title":67,"description":651},"docs\u002Fv1\u002F05.forms\u002F07.radio",[659,122],"form","WDyZX0cIMqS7Xxtjtz1oGcMB9EodK8rJNFexmEls1ag",[662],{"title":663,"path":14,"stem":664,"children":665,"page":695},"Docs","docs",[666],{"title":667,"path":668,"stem":669,"children":670,"page":695},"V1","\u002Fdocs\u002Fv1","docs\u002Fv1",[671,696,709,722,771],{"title":672,"path":673,"stem":674,"children":675,"page":695},"Getting Started","\u002Fdocs\u002Fv1\u002Fgetting-started","docs\u002Fv1\u002F01.getting-started",[676,680,684,688,691],{"title":677,"path":678,"stem":679},"Installation","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Finstallation","docs\u002Fv1\u002F01.getting-started\u002F01.installation",{"title":681,"path":682,"stem":683},"TypeScript","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftypescript","docs\u002Fv1\u002F01.getting-started\u002F02.typescript",{"title":685,"path":686,"stem":687},"Tailwind CSS","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftailwind-css","docs\u002Fv1\u002F01.getting-started\u002F03.tailwind-css",{"title":16,"path":689,"stem":690},"\u002Fdocs\u002Fv1\u002Fgetting-started\u002Fmigrating-from-0-x","docs\u002Fv1\u002F01.getting-started\u002F04.migrating-from-0-x",{"title":692,"path":693,"stem":694},"License","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Flicense","docs\u002Fv1\u002F01.getting-started\u002F05.license",false,{"title":697,"path":698,"stem":699,"children":700,"page":695},"Customization","\u002Fdocs\u002Fv1\u002Fcustomization","docs\u002Fv1\u002F02.customization",[701,705],{"title":702,"path":703,"stem":704},"Dark Mode","\u002Fdocs\u002Fv1\u002Fcustomization\u002Fdark-mode","docs\u002Fv1\u002F02.customization\u002F01.dark-mode",{"title":706,"path":707,"stem":708},"Theme Color","\u002Fdocs\u002Fv1\u002Fcustomization\u002Ftheme-color","docs\u002Fv1\u002F02.customization\u002F02.theme-color",{"title":710,"path":711,"stem":712,"children":713,"page":695},"General","\u002Fdocs\u002Fv1\u002Fgeneral","docs\u002Fv1\u002F03.general",[714,718],{"title":715,"path":716,"stem":717},"Layout Group","\u002Fdocs\u002Fv1\u002Fgeneral\u002Flayout-group","docs\u002Fv1\u002F03.general\u002F01.layout-group",{"title":719,"path":720,"stem":721},"Float","\u002Fdocs\u002Fv1\u002Fgeneral\u002Ffloat","docs\u002Fv1\u002F03.general\u002F02.float",{"title":723,"path":724,"stem":725,"children":726,"page":695},"Components","\u002Fdocs\u002Fv1\u002Fcomponents","docs\u002Fv1\u002F04.components",[727,731,735,739,743,747,751,755,759,763,767],{"title":728,"path":729,"stem":730},"Accordion","\u002Fdocs\u002Fv1\u002Fcomponents\u002Faccordion","docs\u002Fv1\u002F04.components\u002F01.accordion",{"title":732,"path":733,"stem":734},"Badge","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbadge","docs\u002Fv1\u002F04.components\u002F02.badge",{"title":736,"path":737,"stem":738},"Button","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbutton","docs\u002Fv1\u002F04.components\u002F03.button",{"title":740,"path":741,"stem":742},"Card","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fcard","docs\u002Fv1\u002F04.components\u002F04.card",{"title":744,"path":745,"stem":746},"Chip","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fchip","docs\u002Fv1\u002F04.components\u002F05.chip",{"title":748,"path":749,"stem":750},"Dropdown","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fdropdown","docs\u002Fv1\u002F04.components\u002F06.dropdown",{"title":752,"path":753,"stem":754},"List","\u002Fdocs\u002Fv1\u002Fcomponents\u002Flist","docs\u002Fv1\u002F04.components\u002F07.list",{"title":756,"path":757,"stem":758},"Modal","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fmodal","docs\u002Fv1\u002F04.components\u002F08.modal",{"title":760,"path":761,"stem":762},"Table","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftable","docs\u002Fv1\u002F04.components\u002F09.table",{"title":764,"path":765,"stem":766},"Timeline","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftimeline","docs\u002Fv1\u002F04.components\u002F10.timeline",{"title":768,"path":769,"stem":770},"Tooltip","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftooltip","docs\u002Fv1\u002F04.components\u002F11.tooltip",{"title":772,"path":773,"stem":774,"children":775,"page":695},"Forms","\u002Fdocs\u002Fv1\u002Fforms","docs\u002Fv1\u002F05.forms",[776,780,784,788,792,796,800,801],{"title":777,"path":778,"stem":779},"Field Group","\u002Fdocs\u002Fv1\u002Fforms\u002Ffield-group","docs\u002Fv1\u002F05.forms\u002F01.field-group",{"title":781,"path":782,"stem":783},"Input","\u002Fdocs\u002Fv1\u002Fforms\u002Finput","docs\u002Fv1\u002F05.forms\u002F02.input",{"title":785,"path":786,"stem":787},"Input Group","\u002Fdocs\u002Fv1\u002Fforms\u002Finput-group","docs\u002Fv1\u002F05.forms\u002F03.input-group",{"title":789,"path":790,"stem":791},"Textarea","\u002Fdocs\u002Fv1\u002Fforms\u002Ftextarea","docs\u002Fv1\u002F05.forms\u002F04.textarea",{"title":793,"path":794,"stem":795},"Select","\u002Fdocs\u002Fv1\u002Fforms\u002Fselect","docs\u002Fv1\u002F05.forms\u002F05.select",{"title":797,"path":798,"stem":799},"Checkbox","\u002Fdocs\u002Fv1\u002Fforms\u002Fcheckbox","docs\u002Fv1\u002F05.forms\u002F06.checkbox",{"title":67,"path":655,"stem":657},{"title":802,"path":803,"stem":804},"Switch","\u002Fdocs\u002Fv1\u002Fforms\u002Fswitch","docs\u002Fv1\u002F05.forms\u002F08.switch",1790376112414]