[{"data":1,"prerenderedAt":524},["ShallowReactive",2],{"landing-copy":3,"\u002Fdocs\u002Fv1\u002Fforms\u002Fswitch":65,"nav:v1":380},{"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":368,"description":369,"extension":370,"from":368,"meta":371,"navigation":372,"path":373,"seo":374,"since":368,"stem":375,"tags":376,"to":368,"__hash__":379},"docs_v1\u002Fdocs\u002Fv1\u002F05.forms\u002F08.switch.md","Switch",{"type":69,"value":70,"toc":362},"minimark",[71,157,162,200,204,303,307,347,351,355,358],[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-switch\" \u002F>\n  Email notifications\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-switch",[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","  Email notifications\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},"on","On",[72,163,164],{},[75,165,167],{"className":77,"code":166,"language":79,"meta":80,"style":80},"\u003Cinput type=\"checkbox\" class=\"pui-switch\" 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",[72,205,206],{},[75,207,209],{"className":77,"code":208,"language":79,"meta":80,"style":80},"\u003Cinput type=\"checkbox\" class=\"pui-switch\" checked \u002F>\n\u003Cinput type=\"checkbox\" class=\"pui-switch pui-success\" checked \u002F>\n\u003Cinput type=\"checkbox\" class=\"pui-switch pui-error\" checked \u002F>\n",[82,210,211,241,272],{"__ignoreMap":80},[85,212,213,215,217,219,221,223,225,227,229,231,233,235,237,239],{"class":87,"line":88},[85,214,92],{"class":91},[85,216,108],{"class":95},[85,218,112],{"class":111},[85,220,115],{"class":91},[85,222,118],{"class":91},[85,224,122],{"class":121},[85,226,118],{"class":91},[85,228,127],{"class":111},[85,230,115],{"class":91},[85,232,118],{"class":91},[85,234,134],{"class":121},[85,236,118],{"class":91},[85,238,197],{"class":111},[85,240,139],{"class":91},[85,242,243,245,247,249,251,253,255,257,259,261,263,266,268,270],{"class":87,"line":102},[85,244,92],{"class":91},[85,246,108],{"class":95},[85,248,112],{"class":111},[85,250,115],{"class":91},[85,252,118],{"class":91},[85,254,122],{"class":121},[85,256,118],{"class":91},[85,258,127],{"class":111},[85,260,115],{"class":91},[85,262,118],{"class":91},[85,264,265],{"class":121},"pui-switch pui-success",[85,267,118],{"class":91},[85,269,197],{"class":111},[85,271,139],{"class":91},[85,273,274,276,278,280,282,284,286,288,290,292,294,297,299,301],{"class":87,"line":142},[85,275,92],{"class":91},[85,277,108],{"class":95},[85,279,112],{"class":111},[85,281,115],{"class":91},[85,283,118],{"class":91},[85,285,122],{"class":121},[85,287,118],{"class":91},[85,289,127],{"class":111},[85,291,115],{"class":91},[85,293,118],{"class":91},[85,295,296],{"class":121},"pui-switch pui-error",[85,298,118],{"class":91},[85,300,197],{"class":111},[85,302,139],{"class":91},[158,304,306],{"id":305},"disabled","Disabled",[72,308,309],{},[75,310,312],{"className":77,"code":311,"language":79,"meta":80,"style":80},"\u003Cinput type=\"checkbox\" class=\"pui-switch\" checked disabled \u002F>\n",[82,313,314],{"__ignoreMap":80},[85,315,316,318,320,322,324,326,328,330,332,334,336,338,340,342,345],{"class":87,"line":88},[85,317,92],{"class":91},[85,319,108],{"class":95},[85,321,112],{"class":111},[85,323,115],{"class":91},[85,325,118],{"class":91},[85,327,122],{"class":121},[85,329,118],{"class":91},[85,331,127],{"class":111},[85,333,115],{"class":91},[85,335,118],{"class":91},[85,337,134],{"class":121},[85,339,118],{"class":91},[85,341,197],{"class":111},[85,343,344],{"class":111}," disabled",[85,346,139],{"class":91},[158,348,350],{"id":349},"checkbox-or-switch","Checkbox or switch?",[352,353,354],"p",{},"Both submit the same value. Use a checkbox when the choice is part of a form that gets submitted, and a switch when the change takes effect immediately.",[352,356,357],{},"The knob slides between the two states, and stays still for anyone who asked their system to reduce motion.",[359,360,361],"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":363},[364,365,366,367],{"id":160,"depth":102,"text":161},{"id":202,"depth":102,"text":203},{"id":305,"depth":102,"text":306},{"id":349,"depth":102,"text":350},null,"A switch is a checkbox that reads as on or off. It is the same native element, with the `pui-switch` class.","md",{},true,"\u002Fdocs\u002Fv1\u002Fforms\u002Fswitch",{"title":67,"description":369},"docs\u002Fv1\u002F05.forms\u002F08.switch",[377,378],"form","switch","LRGHUvByGuTzUMo4VF1zwr5ubxfWpOEjYoFuWub6a54",[381],{"title":382,"path":14,"stem":383,"children":384,"page":414},"Docs","docs",[385],{"title":386,"path":387,"stem":388,"children":389,"page":414},"V1","\u002Fdocs\u002Fv1","docs\u002Fv1",[390,415,428,441,490],{"title":391,"path":392,"stem":393,"children":394,"page":414},"Getting Started","\u002Fdocs\u002Fv1\u002Fgetting-started","docs\u002Fv1\u002F01.getting-started",[395,399,403,407,410],{"title":396,"path":397,"stem":398},"Installation","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Finstallation","docs\u002Fv1\u002F01.getting-started\u002F01.installation",{"title":400,"path":401,"stem":402},"TypeScript","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftypescript","docs\u002Fv1\u002F01.getting-started\u002F02.typescript",{"title":404,"path":405,"stem":406},"Tailwind CSS","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftailwind-css","docs\u002Fv1\u002F01.getting-started\u002F03.tailwind-css",{"title":16,"path":408,"stem":409},"\u002Fdocs\u002Fv1\u002Fgetting-started\u002Fmigrating-from-0-x","docs\u002Fv1\u002F01.getting-started\u002F04.migrating-from-0-x",{"title":411,"path":412,"stem":413},"License","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Flicense","docs\u002Fv1\u002F01.getting-started\u002F05.license",false,{"title":416,"path":417,"stem":418,"children":419,"page":414},"Customization","\u002Fdocs\u002Fv1\u002Fcustomization","docs\u002Fv1\u002F02.customization",[420,424],{"title":421,"path":422,"stem":423},"Dark Mode","\u002Fdocs\u002Fv1\u002Fcustomization\u002Fdark-mode","docs\u002Fv1\u002F02.customization\u002F01.dark-mode",{"title":425,"path":426,"stem":427},"Theme Color","\u002Fdocs\u002Fv1\u002Fcustomization\u002Ftheme-color","docs\u002Fv1\u002F02.customization\u002F02.theme-color",{"title":429,"path":430,"stem":431,"children":432,"page":414},"General","\u002Fdocs\u002Fv1\u002Fgeneral","docs\u002Fv1\u002F03.general",[433,437],{"title":434,"path":435,"stem":436},"Layout Group","\u002Fdocs\u002Fv1\u002Fgeneral\u002Flayout-group","docs\u002Fv1\u002F03.general\u002F01.layout-group",{"title":438,"path":439,"stem":440},"Float","\u002Fdocs\u002Fv1\u002Fgeneral\u002Ffloat","docs\u002Fv1\u002F03.general\u002F02.float",{"title":442,"path":443,"stem":444,"children":445,"page":414},"Components","\u002Fdocs\u002Fv1\u002Fcomponents","docs\u002Fv1\u002F04.components",[446,450,454,458,462,466,470,474,478,482,486],{"title":447,"path":448,"stem":449},"Accordion","\u002Fdocs\u002Fv1\u002Fcomponents\u002Faccordion","docs\u002Fv1\u002F04.components\u002F01.accordion",{"title":451,"path":452,"stem":453},"Badge","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbadge","docs\u002Fv1\u002F04.components\u002F02.badge",{"title":455,"path":456,"stem":457},"Button","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbutton","docs\u002Fv1\u002F04.components\u002F03.button",{"title":459,"path":460,"stem":461},"Card","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fcard","docs\u002Fv1\u002F04.components\u002F04.card",{"title":463,"path":464,"stem":465},"Chip","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fchip","docs\u002Fv1\u002F04.components\u002F05.chip",{"title":467,"path":468,"stem":469},"Dropdown","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fdropdown","docs\u002Fv1\u002F04.components\u002F06.dropdown",{"title":471,"path":472,"stem":473},"List","\u002Fdocs\u002Fv1\u002Fcomponents\u002Flist","docs\u002Fv1\u002F04.components\u002F07.list",{"title":475,"path":476,"stem":477},"Modal","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fmodal","docs\u002Fv1\u002F04.components\u002F08.modal",{"title":479,"path":480,"stem":481},"Table","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftable","docs\u002Fv1\u002F04.components\u002F09.table",{"title":483,"path":484,"stem":485},"Timeline","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftimeline","docs\u002Fv1\u002F04.components\u002F10.timeline",{"title":487,"path":488,"stem":489},"Tooltip","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftooltip","docs\u002Fv1\u002F04.components\u002F11.tooltip",{"title":491,"path":492,"stem":493,"children":494,"page":414},"Forms","\u002Fdocs\u002Fv1\u002Fforms","docs\u002Fv1\u002F05.forms",[495,499,503,507,511,515,519,523],{"title":496,"path":497,"stem":498},"Field Group","\u002Fdocs\u002Fv1\u002Fforms\u002Ffield-group","docs\u002Fv1\u002F05.forms\u002F01.field-group",{"title":500,"path":501,"stem":502},"Input","\u002Fdocs\u002Fv1\u002Fforms\u002Finput","docs\u002Fv1\u002F05.forms\u002F02.input",{"title":504,"path":505,"stem":506},"Input Group","\u002Fdocs\u002Fv1\u002Fforms\u002Finput-group","docs\u002Fv1\u002F05.forms\u002F03.input-group",{"title":508,"path":509,"stem":510},"Textarea","\u002Fdocs\u002Fv1\u002Fforms\u002Ftextarea","docs\u002Fv1\u002F05.forms\u002F04.textarea",{"title":512,"path":513,"stem":514},"Select","\u002Fdocs\u002Fv1\u002Fforms\u002Fselect","docs\u002Fv1\u002F05.forms\u002F05.select",{"title":516,"path":517,"stem":518},"Checkbox","\u002Fdocs\u002Fv1\u002Fforms\u002Fcheckbox","docs\u002Fv1\u002F05.forms\u002F06.checkbox",{"title":520,"path":521,"stem":522},"Radio","\u002Fdocs\u002Fv1\u002Fforms\u002Fradio","docs\u002Fv1\u002F05.forms\u002F07.radio",{"title":67,"path":373,"stem":375},1790376112419]