[{"data":1,"prerenderedAt":457},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Freact\u002Fselect":141},[4,82],{"title":5,"path":6,"stem":7,"children":8,"page":81},"React","\u002Freact","react",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69,73,77],{"title":10,"path":11,"stem":12},"Button","\u002Freact\u002Fbutton","react\u002Fbutton",{"title":14,"path":15,"stem":16},"Checkbox","\u002Freact\u002Fcheckbox","react\u002Fcheckbox",{"title":18,"path":19,"stem":20},"Combobox (Autocomplete)","\u002Freact\u002Fcombobox","react\u002Fcombobox",{"title":22,"path":23,"stem":24},"Dialog (Modal)","\u002Freact\u002Fdialog","react\u002Fdialog",{"title":26,"path":27,"stem":28},"Disclosure","\u002Freact\u002Fdisclosure","react\u002Fdisclosure",{"title":30,"path":31,"stem":32},"Fieldset","\u002Freact\u002Ffieldset","react\u002Ffieldset",{"title":34,"path":35,"stem":36},"Icon","\u002Freact\u002Ficon","react\u002Ficon",{"title":38,"path":39,"stem":40},"Input","\u002Freact\u002Finput","react\u002Finput",{"title":42,"path":43,"stem":44},"Listbox (Select)","\u002Freact\u002Flistbox","react\u002Flistbox",{"title":46,"path":47,"stem":48},"Menu (Dropdown)","\u002Freact\u002Fmenu","react\u002Fmenu",{"title":50,"path":51,"stem":52},"Pattern","\u002Freact\u002Fpattern","react\u002Fpattern",{"title":54,"path":55,"stem":56},"Popover","\u002Freact\u002Fpopover","react\u002Fpopover",{"title":58,"path":59,"stem":60},"Radio Group","\u002Freact\u002Fradio-group","react\u002Fradio-group",{"title":62,"path":63,"stem":64},"Select","\u002Freact\u002Fselect","react\u002Fselect",{"title":66,"path":67,"stem":68},"Switch (Toggle)","\u002Freact\u002Fswitch","react\u002Fswitch",{"title":70,"path":71,"stem":72},"Tabs","\u002Freact\u002Ftabs","react\u002Ftabs",{"title":74,"path":75,"stem":76},"Textarea","\u002Freact\u002Ftextarea","react\u002Ftextarea",{"title":78,"path":79,"stem":80},"Transition","\u002Freact\u002Ftransition","react\u002Ftransition",false,{"title":83,"path":84,"stem":85,"children":86,"page":81},"Vue","\u002Fvue","vue",[87,90,93,96,99,102,105,108,111,114,117,120,123,126,129,132,135,138],{"title":10,"path":88,"stem":89},"\u002Fvue\u002Fbutton","vue\u002Fbutton",{"title":14,"path":91,"stem":92},"\u002Fvue\u002Fcheckbox","vue\u002Fcheckbox",{"title":18,"path":94,"stem":95},"\u002Fvue\u002Fcombobox","vue\u002Fcombobox",{"title":22,"path":97,"stem":98},"\u002Fvue\u002Fdialog","vue\u002Fdialog",{"title":26,"path":100,"stem":101},"\u002Fvue\u002Fdisclosure","vue\u002Fdisclosure",{"title":30,"path":103,"stem":104},"\u002Fvue\u002Ffieldset","vue\u002Ffieldset",{"title":34,"path":106,"stem":107},"\u002Fvue\u002Ficon","vue\u002Ficon",{"title":38,"path":109,"stem":110},"\u002Fvue\u002Finput","vue\u002Finput",{"title":42,"path":112,"stem":113},"\u002Fvue\u002Flistbox","vue\u002Flistbox",{"title":46,"path":115,"stem":116},"\u002Fvue\u002Fmenu","vue\u002Fmenu",{"title":50,"path":118,"stem":119},"\u002Fvue\u002Fpattern","vue\u002Fpattern",{"title":54,"path":121,"stem":122},"\u002Fvue\u002Fpopover","vue\u002Fpopover",{"title":58,"path":124,"stem":125},"\u002Fvue\u002Fradio-group","vue\u002Fradio-group",{"title":62,"path":127,"stem":128},"\u002Fvue\u002Fselect","vue\u002Fselect",{"title":66,"path":130,"stem":131},"\u002Fvue\u002Fswitch","vue\u002Fswitch",{"title":70,"path":133,"stem":134},"\u002Fvue\u002Ftabs","vue\u002Ftabs",{"title":74,"path":136,"stem":137},"\u002Fvue\u002Ftextarea","vue\u002Ftextarea",{"title":78,"path":139,"stem":140},"\u002Fvue\u002Ftransition","vue\u002Ftransition",{"id":142,"title":62,"body":143,"description":452,"extension":453,"meta":454,"navigation":253,"path":63,"seo":455,"stem":64,"__hash__":456},"docs\u002Freact\u002Fselect.md",{"type":144,"value":145,"toc":447},"minimark",[146,151,160,185,205,209,228,411,436,440,443],[147,148,150],"h2",{"id":149},"installation","Installation",[152,153,154,155,159],"p",{},"Install ",[156,157,158],"code",{},"@vinui\u002Freact"," from GitHub with pnpm, then import its stylesheet once, in your root layout or entry file:",[161,162,167],"pre",{"className":163,"code":164,"language":165,"meta":166,"style":166},"language-bash shiki shiki-themes github-light","pnpm add github:vindotski\u002Fvinui#path:packages\u002Freact\n","bash","",[156,168,169],{"__ignoreMap":166},[170,171,174,178,182],"span",{"class":172,"line":173},"line",1,[170,175,177],{"class":176},"s7eDp","pnpm",[170,179,181],{"class":180},"sYBdl"," add",[170,183,184],{"class":180}," github:vindotski\u002Fvinui#path:packages\u002Freact\n",[161,186,190],{"className":187,"code":188,"language":189,"meta":166,"style":166},"language-tsx shiki shiki-themes github-light","import '@vinui\u002Freact\u002Fstyles.css';\n","tsx",[156,191,192],{"__ignoreMap":166},[170,193,194,198,201],{"class":172,"line":173},[170,195,197],{"class":196},"sD7c4","import",[170,199,200],{"class":180}," '@vinui\u002Freact\u002Fstyles.css'",[170,202,204],{"class":203},"sgsFI",";\n",[147,206,208],{"id":207},"usage","Usage",[152,210,211,212,215,216,223,224,227],{},"A native ",[156,213,214],{},"\u003Cselect>",", styled to match the other fields, built on ",[217,218,222],"a",{"href":219,"rel":220},"https:\u002F\u002Fheadlessui.com\u002Freact\u002Fselect",[221],"nofollow","Headless UI's Select",". It uses the platform's own picker, which suits plain forms and mobile; use ",[156,225,226],{},"Listbox"," when options need icons or rich content:",[161,229,231],{"className":187,"code":230,"language":189,"meta":166,"style":166},"import { Field, Label, Select } from '@vinui\u002Freact';\n\n\u003CField>\n  \u003CLabel>Country\u003C\u002FLabel>\n  \u003CSelect name=\"country\" defaultValue=\"\">\n    \u003Coption value=\"\" disabled>\n      Select a country…\n    \u003C\u002Foption>\n    \u003Coption value=\"hr\">Croatia\u003C\u002Foption>\n    \u003Coption value=\"de\">Germany\u003C\u002Foption>\n  \u003C\u002FSelect>\n\u003C\u002FField>;\n",[156,232,233,248,255,268,284,310,332,338,348,369,390,400],{"__ignoreMap":166},[170,234,235,237,240,243,246],{"class":172,"line":173},[170,236,197],{"class":196},[170,238,239],{"class":203}," { Field, Label, Select } ",[170,241,242],{"class":196},"from",[170,244,245],{"class":180}," '@vinui\u002Freact'",[170,247,204],{"class":203},[170,249,251],{"class":172,"line":250},2,[170,252,254],{"emptyLinePlaceholder":253},true,"\n",[170,256,258,261,265],{"class":172,"line":257},3,[170,259,260],{"class":203},"\u003C",[170,262,264],{"class":263},"sYu0t","Field",[170,266,267],{"class":203},">\n",[170,269,271,274,277,280,282],{"class":172,"line":270},4,[170,272,273],{"class":203},"  \u003C",[170,275,276],{"class":263},"Label",[170,278,279],{"class":203},">Country\u003C\u002F",[170,281,276],{"class":263},[170,283,267],{"class":203},[170,285,287,289,291,294,297,300,303,305,308],{"class":172,"line":286},5,[170,288,273],{"class":203},[170,290,62],{"class":263},[170,292,293],{"class":176}," name",[170,295,296],{"class":196},"=",[170,298,299],{"class":180},"\"country\"",[170,301,302],{"class":176}," defaultValue",[170,304,296],{"class":196},[170,306,307],{"class":180},"\"\"",[170,309,267],{"class":203},[170,311,313,316,320,323,325,327,330],{"class":172,"line":312},6,[170,314,315],{"class":203},"    \u003C",[170,317,319],{"class":318},"shJU0","option",[170,321,322],{"class":176}," value",[170,324,296],{"class":196},[170,326,307],{"class":180},[170,328,329],{"class":176}," disabled",[170,331,267],{"class":203},[170,333,335],{"class":172,"line":334},7,[170,336,337],{"class":203},"      Select a country…\n",[170,339,341,344,346],{"class":172,"line":340},8,[170,342,343],{"class":203},"    \u003C\u002F",[170,345,319],{"class":318},[170,347,267],{"class":203},[170,349,351,353,355,357,359,362,365,367],{"class":172,"line":350},9,[170,352,315],{"class":203},[170,354,319],{"class":318},[170,356,322],{"class":176},[170,358,296],{"class":196},[170,360,361],{"class":180},"\"hr\"",[170,363,364],{"class":203},">Croatia\u003C\u002F",[170,366,319],{"class":318},[170,368,267],{"class":203},[170,370,372,374,376,378,380,383,386,388],{"class":172,"line":371},10,[170,373,315],{"class":203},[170,375,319],{"class":318},[170,377,322],{"class":176},[170,379,296],{"class":196},[170,381,382],{"class":180},"\"de\"",[170,384,385],{"class":203},">Germany\u003C\u002F",[170,387,319],{"class":318},[170,389,267],{"class":203},[170,391,393,396,398],{"class":172,"line":392},11,[170,394,395],{"class":203},"  \u003C\u002F",[170,397,62],{"class":263},[170,399,267],{"class":203},[170,401,403,406,408],{"class":172,"line":402},12,[170,404,405],{"class":203},"\u003C\u002F",[170,407,264],{"class":263},[170,409,410],{"class":203},">;\n",[412,413,414,418],"ul",{},[415,416,417],"li",{},"A disabled, empty first option acts as a placeholder and is shown muted while selected.",[415,419,420,423,424,427,428,431,432,435],{},[156,421,422],{},"invalid"," gives a red border and sets ",[156,425,426],{},"aria-invalid",". ",[156,429,430],{},"\u003Coptgroup>"," and ",[156,433,434],{},"multiple"," work as usual.",[147,437,439],{"id":438},"more-to-come","More to come",[152,441,442],{},"Detailed examples, keyboard interaction and the full component API are on their way.",[444,445,446],"style",{},"html pre.shiki code .s7eDp, html code.shiki .s7eDp{--shiki-default:#6F42C1}html pre.shiki code .sYBdl, html code.shiki .sYBdl{--shiki-default:#032F62}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);}html pre.shiki code .sD7c4, html code.shiki .sD7c4{--shiki-default:#D73A49}html pre.shiki code .sgsFI, html code.shiki .sgsFI{--shiki-default:#24292E}html pre.shiki code .sYu0t, html code.shiki .sYu0t{--shiki-default:#005CC5}html pre.shiki code .shJU0, html code.shiki .shJU0{--shiki-default:#22863A}",{"title":166,"searchDepth":250,"depth":257,"links":448},[449,450,451],{"id":149,"depth":250,"text":150},{"id":207,"depth":250,"text":208},{"id":438,"depth":250,"text":439},"A styled native select, ideal for plain forms and mobile.","md",{},{"title":62,"description":452},"ICrcVTp3HqCGQKO_pRg22NeYsUOVOyqfRgtkc2sw0YI",1792929667848]