[{"data":1,"prerenderedAt":725},["ShallowReactive",2],{"landing-copy":3,"\u002Fdocs\u002Fv1\u002Fforms\u002Fcheckbox":65,"nav:v1":581},{"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":570,"description":571,"extension":572,"from":570,"meta":573,"navigation":574,"path":575,"seo":576,"since":570,"stem":577,"tags":578,"to":570,"__hash__":580},"docs_v1\u002Fdocs\u002Fv1\u002F05.forms\u002F06.checkbox.md","Checkbox",{"type":69,"value":70,"toc":563},"minimark",[71,157,162,200,204,208,307,310,314,317,355,361,364,389,393,433,437,559],[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=\"checkbox\" class=\"pui-checkbox\" \u002F>\n  Accept the terms\n\u003C\u002Flabel>\n","html","",[82,83,84,100,140,147],"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],{"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","checkbox",[85,124,118],{"class":91},[85,126,127],{"class":111}," class",[85,129,115],{"class":91},[85,131,118],{"class":91},[85,133,134],{"class":121},"pui-checkbox",[85,136,118],{"class":91},[85,138,139],{"class":91}," \u002F>\n",[85,141,143],{"class":87,"line":142},3,[85,144,146],{"class":145},"stV6K","  Accept the terms\n",[85,148,150,153,155],{"class":87,"line":149},4,[85,151,152],{"class":91},"\u003C\u002F",[85,154,96],{"class":95},[85,156,99],{"class":91},[158,159,161],"h2",{"id":160},"checked","Checked",[72,163,164],{},[75,165,167],{"className":77,"code":166,"language":79,"meta":80,"style":80},"\u003Cinput type=\"checkbox\" class=\"pui-checkbox\" checked \u002F>\n",[82,168,169],{"__ignoreMap":80},[85,170,171,173,175,177,179,181,183,185,187,189,191,193,195,198],{"class":87,"line":88},[85,172,92],{"class":91},[85,174,108],{"class":95},[85,176,112],{"class":111},[85,178,115],{"class":91},[85,180,118],{"class":91},[85,182,122],{"class":121},[85,184,118],{"class":91},[85,186,127],{"class":111},[85,188,115],{"class":91},[85,190,118],{"class":91},[85,192,134],{"class":121},[85,194,118],{"class":91},[85,196,197],{"class":111}," checked",[85,199,139],{"class":91},[158,201,203],{"id":202},"colors","Colors",[205,206,207],"p",{},"A color class paints the checked state, the same classes used everywhere else:",[72,209,210],{},[75,211,213],{"className":77,"code":212,"language":79,"meta":80,"style":80},"\u003Cinput type=\"checkbox\" class=\"pui-checkbox\" checked \u002F>\n\u003Cinput type=\"checkbox\" class=\"pui-checkbox pui-success\" checked \u002F>\n\u003Cinput type=\"checkbox\" class=\"pui-checkbox pui-error\" checked \u002F>\n",[82,214,215,245,276],{"__ignoreMap":80},[85,216,217,219,221,223,225,227,229,231,233,235,237,239,241,243],{"class":87,"line":88},[85,218,92],{"class":91},[85,220,108],{"class":95},[85,222,112],{"class":111},[85,224,115],{"class":91},[85,226,118],{"class":91},[85,228,122],{"class":121},[85,230,118],{"class":91},[85,232,127],{"class":111},[85,234,115],{"class":91},[85,236,118],{"class":91},[85,238,134],{"class":121},[85,240,118],{"class":91},[85,242,197],{"class":111},[85,244,139],{"class":91},[85,246,247,249,251,253,255,257,259,261,263,265,267,270,272,274],{"class":87,"line":102},[85,248,92],{"class":91},[85,250,108],{"class":95},[85,252,112],{"class":111},[85,254,115],{"class":91},[85,256,118],{"class":91},[85,258,122],{"class":121},[85,260,118],{"class":91},[85,262,127],{"class":111},[85,264,115],{"class":91},[85,266,118],{"class":91},[85,268,269],{"class":121},"pui-checkbox pui-success",[85,271,118],{"class":91},[85,273,197],{"class":111},[85,275,139],{"class":91},[85,277,278,280,282,284,286,288,290,292,294,296,298,301,303,305],{"class":87,"line":142},[85,279,92],{"class":91},[85,281,108],{"class":95},[85,283,112],{"class":111},[85,285,115],{"class":91},[85,287,118],{"class":91},[85,289,122],{"class":121},[85,291,118],{"class":91},[85,293,127],{"class":111},[85,295,115],{"class":91},[85,297,118],{"class":91},[85,299,300],{"class":121},"pui-checkbox pui-error",[85,302,118],{"class":91},[85,304,197],{"class":111},[85,306,139],{"class":91},[205,308,309],{},"Without a color class it uses the theme color.",[158,311,313],{"id":312},"indeterminate","Indeterminate",[205,315,316],{},"The third state — neither checked nor unchecked — is normally a JavaScript property, which makes it impossible to express in markup. Perfect UI accepts it as an attribute:",[72,318,319],{},[75,320,322],{"className":77,"code":321,"language":79,"meta":80,"style":80},"\u003Cinput type=\"checkbox\" class=\"pui-checkbox\" indeterminate \u002F>\n",[82,323,324],{"__ignoreMap":80},[85,325,326,328,330,332,334,336,338,340,342,344,346,348,350,353],{"class":87,"line":88},[85,327,92],{"class":91},[85,329,108],{"class":95},[85,331,112],{"class":111},[85,333,115],{"class":91},[85,335,118],{"class":91},[85,337,122],{"class":121},[85,339,118],{"class":91},[85,341,127],{"class":111},[85,343,115],{"class":91},[85,345,118],{"class":91},[85,347,134],{"class":121},[85,349,118],{"class":91},[85,351,352],{"class":111}," indeterminate",[85,354,139],{"class":91},[356,357,358],"warning",{},[205,359,360],{},"This is the one case that always needs the script, because no browser has this attribute natively. The attribute is removed as soon as the user clicks the checkbox.",[205,362,363],{},"The property keeps working as usual:",[75,365,369],{"className":366,"code":367,"language":368,"meta":80,"style":80},"language-js shiki shiki-themes perfectui-site","input.indeterminate = true;\n","js",[82,370,371],{"__ignoreMap":80},[85,372,373,375,378,381,383,386],{"class":87,"line":88},[85,374,108],{"class":145},[85,376,377],{"class":91},".",[85,379,380],{"class":145},"indeterminate ",[85,382,115],{"class":95},[85,384,385],{"class":145}," true",[85,387,388],{"class":91},";\n",[158,390,392],{"id":391},"disabled","Disabled",[72,394,395],{},[75,396,398],{"className":77,"code":397,"language":79,"meta":80,"style":80},"\u003Cinput type=\"checkbox\" class=\"pui-checkbox\" checked disabled \u002F>\n",[82,399,400],{"__ignoreMap":80},[85,401,402,404,406,408,410,412,414,416,418,420,422,424,426,428,431],{"class":87,"line":88},[85,403,92],{"class":91},[85,405,108],{"class":95},[85,407,112],{"class":111},[85,409,115],{"class":91},[85,411,118],{"class":91},[85,413,122],{"class":121},[85,415,118],{"class":91},[85,417,127],{"class":111},[85,419,115],{"class":91},[85,421,118],{"class":91},[85,423,134],{"class":121},[85,425,118],{"class":91},[85,427,197],{"class":111},[85,429,430],{"class":111}," disabled",[85,432,139],{"class":91},[158,434,436],{"id":435},"with-a-label-and-a-message","With a label and a message",[72,438,439],{},[75,440,442],{"className":77,"code":441,"language":79,"meta":80,"style":80},"\u003Clabel class=\"pui-field-group\">\n  \u003Cspan>Newsletter\u003C\u002Fspan>\n  \u003Cinput type=\"checkbox\" class=\"pui-checkbox\" aria-describedby=\"news-help\" \u002F>\n  \u003Csmall id=\"news-help\">One email a month, no more.\u003C\u002Fsmall>\n\u003C\u002Flabel>\n",[82,443,444,463,481,521,550],{"__ignoreMap":80},[85,445,446,448,450,452,454,456,459,461],{"class":87,"line":88},[85,447,92],{"class":91},[85,449,96],{"class":95},[85,451,127],{"class":111},[85,453,115],{"class":91},[85,455,118],{"class":91},[85,457,458],{"class":121},"pui-field-group",[85,460,118],{"class":91},[85,462,99],{"class":91},[85,464,465,467,469,472,475,477,479],{"class":87,"line":102},[85,466,105],{"class":91},[85,468,85],{"class":95},[85,470,471],{"class":91},">",[85,473,474],{"class":145},"Newsletter",[85,476,152],{"class":91},[85,478,85],{"class":95},[85,480,99],{"class":91},[85,482,483,485,487,489,491,493,495,497,499,501,503,505,507,510,512,514,517,519],{"class":87,"line":142},[85,484,105],{"class":91},[85,486,108],{"class":95},[85,488,112],{"class":111},[85,490,115],{"class":91},[85,492,118],{"class":91},[85,494,122],{"class":121},[85,496,118],{"class":91},[85,498,127],{"class":111},[85,500,115],{"class":91},[85,502,118],{"class":91},[85,504,134],{"class":121},[85,506,118],{"class":91},[85,508,509],{"class":111}," aria-describedby",[85,511,115],{"class":91},[85,513,118],{"class":91},[85,515,516],{"class":121},"news-help",[85,518,118],{"class":91},[85,520,139],{"class":91},[85,522,523,525,528,531,533,535,537,539,541,544,546,548],{"class":87,"line":149},[85,524,105],{"class":91},[85,526,527],{"class":95},"small",[85,529,530],{"class":111}," id",[85,532,115],{"class":91},[85,534,118],{"class":91},[85,536,516],{"class":121},[85,538,118],{"class":91},[85,540,471],{"class":91},[85,542,543],{"class":145},"One email a month, no more.",[85,545,152],{"class":91},[85,547,527],{"class":95},[85,549,99],{"class":91},[85,551,553,555,557],{"class":87,"line":552},5,[85,554,152],{"class":91},[85,556,96],{"class":95},[85,558,99],{"class":91},[560,561,562],"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":564},[565,566,567,568,569],{"id":160,"depth":102,"text":161},{"id":202,"depth":102,"text":203},{"id":312,"depth":102,"text":313},{"id":391,"depth":102,"text":392},{"id":435,"depth":102,"text":436},null,"A native `\u003Cinput type=\"checkbox\">` with the `pui-checkbox` class.","md",{},true,"\u002Fdocs\u002Fv1\u002Fforms\u002Fcheckbox",{"title":67,"description":571},"docs\u002Fv1\u002F05.forms\u002F06.checkbox",[579,122],"form","rx4m58nq8orYYEBaRlRaOq4R7sR_rnsA4Rtd5FolPSw",[582],{"title":583,"path":14,"stem":584,"children":585,"page":615},"Docs","docs",[586],{"title":587,"path":588,"stem":589,"children":590,"page":615},"V1","\u002Fdocs\u002Fv1","docs\u002Fv1",[591,616,629,642,691],{"title":592,"path":593,"stem":594,"children":595,"page":615},"Getting Started","\u002Fdocs\u002Fv1\u002Fgetting-started","docs\u002Fv1\u002F01.getting-started",[596,600,604,608,611],{"title":597,"path":598,"stem":599},"Installation","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Finstallation","docs\u002Fv1\u002F01.getting-started\u002F01.installation",{"title":601,"path":602,"stem":603},"TypeScript","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftypescript","docs\u002Fv1\u002F01.getting-started\u002F02.typescript",{"title":605,"path":606,"stem":607},"Tailwind CSS","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftailwind-css","docs\u002Fv1\u002F01.getting-started\u002F03.tailwind-css",{"title":16,"path":609,"stem":610},"\u002Fdocs\u002Fv1\u002Fgetting-started\u002Fmigrating-from-0-x","docs\u002Fv1\u002F01.getting-started\u002F04.migrating-from-0-x",{"title":612,"path":613,"stem":614},"License","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Flicense","docs\u002Fv1\u002F01.getting-started\u002F05.license",false,{"title":617,"path":618,"stem":619,"children":620,"page":615},"Customization","\u002Fdocs\u002Fv1\u002Fcustomization","docs\u002Fv1\u002F02.customization",[621,625],{"title":622,"path":623,"stem":624},"Dark Mode","\u002Fdocs\u002Fv1\u002Fcustomization\u002Fdark-mode","docs\u002Fv1\u002F02.customization\u002F01.dark-mode",{"title":626,"path":627,"stem":628},"Theme Color","\u002Fdocs\u002Fv1\u002Fcustomization\u002Ftheme-color","docs\u002Fv1\u002F02.customization\u002F02.theme-color",{"title":630,"path":631,"stem":632,"children":633,"page":615},"General","\u002Fdocs\u002Fv1\u002Fgeneral","docs\u002Fv1\u002F03.general",[634,638],{"title":635,"path":636,"stem":637},"Layout Group","\u002Fdocs\u002Fv1\u002Fgeneral\u002Flayout-group","docs\u002Fv1\u002F03.general\u002F01.layout-group",{"title":639,"path":640,"stem":641},"Float","\u002Fdocs\u002Fv1\u002Fgeneral\u002Ffloat","docs\u002Fv1\u002F03.general\u002F02.float",{"title":643,"path":644,"stem":645,"children":646,"page":615},"Components","\u002Fdocs\u002Fv1\u002Fcomponents","docs\u002Fv1\u002F04.components",[647,651,655,659,663,667,671,675,679,683,687],{"title":648,"path":649,"stem":650},"Accordion","\u002Fdocs\u002Fv1\u002Fcomponents\u002Faccordion","docs\u002Fv1\u002F04.components\u002F01.accordion",{"title":652,"path":653,"stem":654},"Badge","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbadge","docs\u002Fv1\u002F04.components\u002F02.badge",{"title":656,"path":657,"stem":658},"Button","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbutton","docs\u002Fv1\u002F04.components\u002F03.button",{"title":660,"path":661,"stem":662},"Card","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fcard","docs\u002Fv1\u002F04.components\u002F04.card",{"title":664,"path":665,"stem":666},"Chip","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fchip","docs\u002Fv1\u002F04.components\u002F05.chip",{"title":668,"path":669,"stem":670},"Dropdown","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fdropdown","docs\u002Fv1\u002F04.components\u002F06.dropdown",{"title":672,"path":673,"stem":674},"List","\u002Fdocs\u002Fv1\u002Fcomponents\u002Flist","docs\u002Fv1\u002F04.components\u002F07.list",{"title":676,"path":677,"stem":678},"Modal","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fmodal","docs\u002Fv1\u002F04.components\u002F08.modal",{"title":680,"path":681,"stem":682},"Table","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftable","docs\u002Fv1\u002F04.components\u002F09.table",{"title":684,"path":685,"stem":686},"Timeline","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftimeline","docs\u002Fv1\u002F04.components\u002F10.timeline",{"title":688,"path":689,"stem":690},"Tooltip","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftooltip","docs\u002Fv1\u002F04.components\u002F11.tooltip",{"title":692,"path":693,"stem":694,"children":695,"page":615},"Forms","\u002Fdocs\u002Fv1\u002Fforms","docs\u002Fv1\u002F05.forms",[696,700,704,708,712,716,717,721],{"title":697,"path":698,"stem":699},"Field Group","\u002Fdocs\u002Fv1\u002Fforms\u002Ffield-group","docs\u002Fv1\u002F05.forms\u002F01.field-group",{"title":701,"path":702,"stem":703},"Input","\u002Fdocs\u002Fv1\u002Fforms\u002Finput","docs\u002Fv1\u002F05.forms\u002F02.input",{"title":705,"path":706,"stem":707},"Input Group","\u002Fdocs\u002Fv1\u002Fforms\u002Finput-group","docs\u002Fv1\u002F05.forms\u002F03.input-group",{"title":709,"path":710,"stem":711},"Textarea","\u002Fdocs\u002Fv1\u002Fforms\u002Ftextarea","docs\u002Fv1\u002F05.forms\u002F04.textarea",{"title":713,"path":714,"stem":715},"Select","\u002Fdocs\u002Fv1\u002Fforms\u002Fselect","docs\u002Fv1\u002F05.forms\u002F05.select",{"title":67,"path":575,"stem":577},{"title":718,"path":719,"stem":720},"Radio","\u002Fdocs\u002Fv1\u002Fforms\u002Fradio","docs\u002Fv1\u002F05.forms\u002F07.radio",{"title":722,"path":723,"stem":724},"Switch","\u002Fdocs\u002Fv1\u002Fforms\u002Fswitch","docs\u002Fv1\u002F05.forms\u002F08.switch",1790376112406]