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