[{"data":1,"prerenderedAt":645},["ShallowReactive",2],{"landing-copy":3,"\u002Fdocs\u002Fv1\u002Fforms\u002Fselect":65,"nav:v1":501},{"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":490,"description":491,"extension":492,"from":490,"meta":493,"navigation":494,"path":495,"seo":496,"since":490,"stem":497,"tags":498,"to":490,"__hash__":500},"docs_v1\u002Fdocs\u002Fv1\u002F05.forms\u002F05.select.md","Select",{"type":69,"value":70,"toc":485},"minimark",[71,184,188,193,327,331,470,474,481],[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","\u003Cselect class=\"pui-input\">\n  \u003Coption>Owner\u003C\u002Foption>\n  \u003Coption>Editor\u003C\u002Foption>\n  \u003Coption>Viewer\u003C\u002Foption>\n\u003C\u002Fselect>\n","html","",[82,83,84,116,139,157,175],"code",{"__ignoreMap":80},[85,86,89,93,97,101,104,107,111,113],"span",{"class":87,"line":88},"line",1,[85,90,92],{"class":91},"s8qk9","\u003C",[85,94,96],{"class":95},"sz5At","select",[85,98,100],{"class":99},"sz6eq"," class",[85,102,103],{"class":91},"=",[85,105,106],{"class":91},"\"",[85,108,110],{"class":109},"s8AH5","pui-input",[85,112,106],{"class":91},[85,114,115],{"class":91},">\n",[85,117,119,122,125,128,132,135,137],{"class":87,"line":118},2,[85,120,121],{"class":91},"  \u003C",[85,123,124],{"class":95},"option",[85,126,127],{"class":91},">",[85,129,131],{"class":130},"stV6K","Owner",[85,133,134],{"class":91},"\u003C\u002F",[85,136,124],{"class":95},[85,138,115],{"class":91},[85,140,142,144,146,148,151,153,155],{"class":87,"line":141},3,[85,143,121],{"class":91},[85,145,124],{"class":95},[85,147,127],{"class":91},[85,149,150],{"class":130},"Editor",[85,152,134],{"class":91},[85,154,124],{"class":95},[85,156,115],{"class":91},[85,158,160,162,164,166,169,171,173],{"class":87,"line":159},4,[85,161,121],{"class":91},[85,163,124],{"class":95},[85,165,127],{"class":91},[85,167,168],{"class":130},"Viewer",[85,170,134],{"class":91},[85,172,124],{"class":95},[85,174,115],{"class":91},[85,176,178,180,182],{"class":87,"line":177},5,[85,179,134],{"class":91},[85,181,96],{"class":95},[85,183,115],{"class":91},[185,186,187],"p",{},"The arrow is drawn in CSS from the current text color, so it follows your theme and the color mode without shipping an image.",[189,190,192],"h2",{"id":191},"with-a-label","With a label",[72,194,195],{},[75,196,198],{"className":77,"code":197,"language":79,"meta":80,"style":80},"\u003Clabel class=\"pui-field-group\">\n  \u003Cspan>Role\u003C\u002Fspan>\n  \u003Cselect class=\"pui-input\">\n    \u003Coption value=\"\">Choose one\u003C\u002Foption>\n    \u003Coption value=\"owner\">Owner\u003C\u002Foption>\n  \u003C\u002Fselect>\n\u003C\u002Flabel>\n",[82,199,200,220,237,255,281,308,318],{"__ignoreMap":80},[85,201,202,204,207,209,211,213,216,218],{"class":87,"line":88},[85,203,92],{"class":91},[85,205,206],{"class":95},"label",[85,208,100],{"class":99},[85,210,103],{"class":91},[85,212,106],{"class":91},[85,214,215],{"class":109},"pui-field-group",[85,217,106],{"class":91},[85,219,115],{"class":91},[85,221,222,224,226,228,231,233,235],{"class":87,"line":118},[85,223,121],{"class":91},[85,225,85],{"class":95},[85,227,127],{"class":91},[85,229,230],{"class":130},"Role",[85,232,134],{"class":91},[85,234,85],{"class":95},[85,236,115],{"class":91},[85,238,239,241,243,245,247,249,251,253],{"class":87,"line":141},[85,240,121],{"class":91},[85,242,96],{"class":95},[85,244,100],{"class":99},[85,246,103],{"class":91},[85,248,106],{"class":91},[85,250,110],{"class":109},[85,252,106],{"class":91},[85,254,115],{"class":91},[85,256,257,260,262,265,267,270,272,275,277,279],{"class":87,"line":159},[85,258,259],{"class":91},"    \u003C",[85,261,124],{"class":95},[85,263,264],{"class":99}," value",[85,266,103],{"class":91},[85,268,269],{"class":91},"\"\"",[85,271,127],{"class":91},[85,273,274],{"class":130},"Choose one",[85,276,134],{"class":91},[85,278,124],{"class":95},[85,280,115],{"class":91},[85,282,283,285,287,289,291,293,296,298,300,302,304,306],{"class":87,"line":177},[85,284,259],{"class":91},[85,286,124],{"class":95},[85,288,264],{"class":99},[85,290,103],{"class":91},[85,292,106],{"class":91},[85,294,295],{"class":109},"owner",[85,297,106],{"class":91},[85,299,127],{"class":91},[85,301,131],{"class":130},[85,303,134],{"class":91},[85,305,124],{"class":95},[85,307,115],{"class":91},[85,309,311,314,316],{"class":87,"line":310},6,[85,312,313],{"class":91},"  \u003C\u002F",[85,315,96],{"class":95},[85,317,115],{"class":91},[85,319,321,323,325],{"class":87,"line":320},7,[85,322,134],{"class":91},[85,324,206],{"class":95},[85,326,115],{"class":91},[189,328,330],{"id":329},"multiple-and-grouped","Multiple and grouped",[72,332,333],{},[75,334,336],{"className":77,"code":335,"language":79,"meta":80,"style":80},"\u003Cselect class=\"pui-input\" multiple size=\"4\">\n  \u003Coptgroup label=\"Admins\">\n    \u003Coption>Mark\u003C\u002Foption>\n  \u003C\u002Foptgroup>\n  \u003Coptgroup label=\"Members\">\n    \u003Coption>Jacob\u003C\u002Foption>\n  \u003C\u002Foptgroup>\n\u003C\u002Fselect>\n",[82,337,338,371,392,409,417,436,453,461],{"__ignoreMap":80},[85,339,340,342,344,346,348,350,352,354,357,360,362,364,367,369],{"class":87,"line":88},[85,341,92],{"class":91},[85,343,96],{"class":95},[85,345,100],{"class":99},[85,347,103],{"class":91},[85,349,106],{"class":91},[85,351,110],{"class":109},[85,353,106],{"class":91},[85,355,356],{"class":99}," multiple",[85,358,359],{"class":99}," size",[85,361,103],{"class":91},[85,363,106],{"class":91},[85,365,366],{"class":109},"4",[85,368,106],{"class":91},[85,370,115],{"class":91},[85,372,373,375,378,381,383,385,388,390],{"class":87,"line":118},[85,374,121],{"class":91},[85,376,377],{"class":95},"optgroup",[85,379,380],{"class":99}," label",[85,382,103],{"class":91},[85,384,106],{"class":91},[85,386,387],{"class":109},"Admins",[85,389,106],{"class":91},[85,391,115],{"class":91},[85,393,394,396,398,400,403,405,407],{"class":87,"line":141},[85,395,259],{"class":91},[85,397,124],{"class":95},[85,399,127],{"class":91},[85,401,402],{"class":130},"Mark",[85,404,134],{"class":91},[85,406,124],{"class":95},[85,408,115],{"class":91},[85,410,411,413,415],{"class":87,"line":159},[85,412,313],{"class":91},[85,414,377],{"class":95},[85,416,115],{"class":91},[85,418,419,421,423,425,427,429,432,434],{"class":87,"line":177},[85,420,121],{"class":91},[85,422,377],{"class":95},[85,424,380],{"class":99},[85,426,103],{"class":91},[85,428,106],{"class":91},[85,430,431],{"class":109},"Members",[85,433,106],{"class":91},[85,435,115],{"class":91},[85,437,438,440,442,444,447,449,451],{"class":87,"line":310},[85,439,259],{"class":91},[85,441,124],{"class":95},[85,443,127],{"class":91},[85,445,446],{"class":130},"Jacob",[85,448,134],{"class":91},[85,450,124],{"class":95},[85,452,115],{"class":91},[85,454,455,457,459],{"class":87,"line":320},[85,456,313],{"class":91},[85,458,377],{"class":95},[85,460,115],{"class":91},[85,462,464,466,468],{"class":87,"line":463},8,[85,465,134],{"class":91},[85,467,96],{"class":95},[85,469,115],{"class":91},[189,471,473],{"id":472},"dark-mode","Dark mode",[185,475,476,477,480],{},"The dropdown list and its options are drawn by the operating system. Perfect UI declares ",[82,478,479],{},"color-scheme",", so they follow the page mode on their own.",[482,483,484],"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":118,"depth":118,"links":486},[487,488,489],{"id":191,"depth":118,"text":192},{"id":329,"depth":118,"text":330},{"id":472,"depth":118,"text":473},null,"The same `pui-input` class, on a `\u003Cselect>`.","md",{},true,"\u002Fdocs\u002Fv1\u002Fforms\u002Fselect",{"title":67,"description":491},"docs\u002Fv1\u002F05.forms\u002F05.select",[499,96],"form","8EcKjdnIRO4xcPBcbH5AC0TwHiWAsoOpHPYTXYbYvko",[502],{"title":503,"path":14,"stem":504,"children":505,"page":535},"Docs","docs",[506],{"title":507,"path":508,"stem":509,"children":510,"page":535},"V1","\u002Fdocs\u002Fv1","docs\u002Fv1",[511,536,549,562,611],{"title":512,"path":513,"stem":514,"children":515,"page":535},"Getting Started","\u002Fdocs\u002Fv1\u002Fgetting-started","docs\u002Fv1\u002F01.getting-started",[516,520,524,528,531],{"title":517,"path":518,"stem":519},"Installation","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Finstallation","docs\u002Fv1\u002F01.getting-started\u002F01.installation",{"title":521,"path":522,"stem":523},"TypeScript","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftypescript","docs\u002Fv1\u002F01.getting-started\u002F02.typescript",{"title":525,"path":526,"stem":527},"Tailwind CSS","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftailwind-css","docs\u002Fv1\u002F01.getting-started\u002F03.tailwind-css",{"title":16,"path":529,"stem":530},"\u002Fdocs\u002Fv1\u002Fgetting-started\u002Fmigrating-from-0-x","docs\u002Fv1\u002F01.getting-started\u002F04.migrating-from-0-x",{"title":532,"path":533,"stem":534},"License","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Flicense","docs\u002Fv1\u002F01.getting-started\u002F05.license",false,{"title":537,"path":538,"stem":539,"children":540,"page":535},"Customization","\u002Fdocs\u002Fv1\u002Fcustomization","docs\u002Fv1\u002F02.customization",[541,545],{"title":542,"path":543,"stem":544},"Dark Mode","\u002Fdocs\u002Fv1\u002Fcustomization\u002Fdark-mode","docs\u002Fv1\u002F02.customization\u002F01.dark-mode",{"title":546,"path":547,"stem":548},"Theme Color","\u002Fdocs\u002Fv1\u002Fcustomization\u002Ftheme-color","docs\u002Fv1\u002F02.customization\u002F02.theme-color",{"title":550,"path":551,"stem":552,"children":553,"page":535},"General","\u002Fdocs\u002Fv1\u002Fgeneral","docs\u002Fv1\u002F03.general",[554,558],{"title":555,"path":556,"stem":557},"Layout Group","\u002Fdocs\u002Fv1\u002Fgeneral\u002Flayout-group","docs\u002Fv1\u002F03.general\u002F01.layout-group",{"title":559,"path":560,"stem":561},"Float","\u002Fdocs\u002Fv1\u002Fgeneral\u002Ffloat","docs\u002Fv1\u002F03.general\u002F02.float",{"title":563,"path":564,"stem":565,"children":566,"page":535},"Components","\u002Fdocs\u002Fv1\u002Fcomponents","docs\u002Fv1\u002F04.components",[567,571,575,579,583,587,591,595,599,603,607],{"title":568,"path":569,"stem":570},"Accordion","\u002Fdocs\u002Fv1\u002Fcomponents\u002Faccordion","docs\u002Fv1\u002F04.components\u002F01.accordion",{"title":572,"path":573,"stem":574},"Badge","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbadge","docs\u002Fv1\u002F04.components\u002F02.badge",{"title":576,"path":577,"stem":578},"Button","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbutton","docs\u002Fv1\u002F04.components\u002F03.button",{"title":580,"path":581,"stem":582},"Card","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fcard","docs\u002Fv1\u002F04.components\u002F04.card",{"title":584,"path":585,"stem":586},"Chip","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fchip","docs\u002Fv1\u002F04.components\u002F05.chip",{"title":588,"path":589,"stem":590},"Dropdown","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fdropdown","docs\u002Fv1\u002F04.components\u002F06.dropdown",{"title":592,"path":593,"stem":594},"List","\u002Fdocs\u002Fv1\u002Fcomponents\u002Flist","docs\u002Fv1\u002F04.components\u002F07.list",{"title":596,"path":597,"stem":598},"Modal","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fmodal","docs\u002Fv1\u002F04.components\u002F08.modal",{"title":600,"path":601,"stem":602},"Table","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftable","docs\u002Fv1\u002F04.components\u002F09.table",{"title":604,"path":605,"stem":606},"Timeline","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftimeline","docs\u002Fv1\u002F04.components\u002F10.timeline",{"title":608,"path":609,"stem":610},"Tooltip","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftooltip","docs\u002Fv1\u002F04.components\u002F11.tooltip",{"title":612,"path":613,"stem":614,"children":615,"page":535},"Forms","\u002Fdocs\u002Fv1\u002Fforms","docs\u002Fv1\u002F05.forms",[616,620,624,628,632,633,637,641],{"title":617,"path":618,"stem":619},"Field Group","\u002Fdocs\u002Fv1\u002Fforms\u002Ffield-group","docs\u002Fv1\u002F05.forms\u002F01.field-group",{"title":621,"path":622,"stem":623},"Input","\u002Fdocs\u002Fv1\u002Fforms\u002Finput","docs\u002Fv1\u002F05.forms\u002F02.input",{"title":625,"path":626,"stem":627},"Input Group","\u002Fdocs\u002Fv1\u002Fforms\u002Finput-group","docs\u002Fv1\u002F05.forms\u002F03.input-group",{"title":629,"path":630,"stem":631},"Textarea","\u002Fdocs\u002Fv1\u002Fforms\u002Ftextarea","docs\u002Fv1\u002F05.forms\u002F04.textarea",{"title":67,"path":495,"stem":497},{"title":634,"path":635,"stem":636},"Checkbox","\u002Fdocs\u002Fv1\u002Fforms\u002Fcheckbox","docs\u002Fv1\u002F05.forms\u002F06.checkbox",{"title":638,"path":639,"stem":640},"Radio","\u002Fdocs\u002Fv1\u002Fforms\u002Fradio","docs\u002Fv1\u002F05.forms\u002F07.radio",{"title":642,"path":643,"stem":644},"Switch","\u002Fdocs\u002Fv1\u002Fforms\u002Fswitch","docs\u002Fv1\u002F05.forms\u002F08.switch",1790376112400]