[{"data":1,"prerenderedAt":482},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Freact\u002Flistbox":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":42,"body":143,"description":477,"extension":478,"meta":479,"navigation":249,"path":43,"seo":480,"stem":44,"__hash__":481},"docs\u002Freact\u002Flistbox.md",{"type":144,"value":145,"toc":472},"minimark",[146,151,160,185,205,209,224,427,461,465,468],[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,219,220,223],{},"A select menu built on ",[213,214,218],"a",{"href":215,"rel":216},"https:\u002F\u002Fheadlessui.com\u002Freact\u002Flistbox",[217],"nofollow","Headless UI's Listbox",". It behaves like a native ",[156,221,222],{},"\u003Cselect>"," (keyboard, typeahead, form submission) but options can contain anything, such as icons:",[161,225,227],{"className":187,"code":226,"language":189,"meta":166,"style":166},"import { Listbox, ListboxOption } from '@vinui\u002Freact';\n\nconst [person, setPerson] = useState(people[0]);\n\n\u003CListbox aria-label=\"Assignee\" value={person} onChange={setPerson} by=\"id\" placeholder=\"Select…\">\n  {people.map((p) => (\n    \u003CListboxOption key={p.id} value={p}>\n      {p.name}\n    \u003C\u002FListboxOption>\n  ))}\n\u003C\u002FListbox>;\n",[156,228,229,244,251,288,293,345,369,394,400,410,416],{"__ignoreMap":166},[170,230,231,233,236,239,242],{"class":172,"line":173},[170,232,197],{"class":196},[170,234,235],{"class":203}," { Listbox, ListboxOption } ",[170,237,238],{"class":196},"from",[170,240,241],{"class":180}," '@vinui\u002Freact'",[170,243,204],{"class":203},[170,245,247],{"class":172,"line":246},2,[170,248,250],{"emptyLinePlaceholder":249},true,"\n",[170,252,254,257,260,264,267,270,273,276,279,282,285],{"class":172,"line":253},3,[170,255,256],{"class":196},"const",[170,258,259],{"class":203}," [",[170,261,263],{"class":262},"sYu0t","person",[170,265,266],{"class":203},", ",[170,268,269],{"class":262},"setPerson",[170,271,272],{"class":203},"] ",[170,274,275],{"class":196},"=",[170,277,278],{"class":176}," useState",[170,280,281],{"class":203},"(people[",[170,283,284],{"class":262},"0",[170,286,287],{"class":203},"]);\n",[170,289,291],{"class":172,"line":290},4,[170,292,250],{"emptyLinePlaceholder":249},[170,294,296,299,302,305,307,310,313,315,318,321,323,326,329,331,334,337,339,342],{"class":172,"line":295},5,[170,297,298],{"class":203},"\u003C",[170,300,301],{"class":262},"Listbox",[170,303,304],{"class":176}," aria-label",[170,306,275],{"class":196},[170,308,309],{"class":180},"\"Assignee\"",[170,311,312],{"class":176}," value",[170,314,275],{"class":196},[170,316,317],{"class":203},"{person} ",[170,319,320],{"class":176},"onChange",[170,322,275],{"class":196},[170,324,325],{"class":203},"{setPerson} ",[170,327,328],{"class":176},"by",[170,330,275],{"class":196},[170,332,333],{"class":180},"\"id\"",[170,335,336],{"class":176}," placeholder",[170,338,275],{"class":196},[170,340,341],{"class":180},"\"Select…\"",[170,343,344],{"class":203},">\n",[170,346,348,351,354,357,360,363,366],{"class":172,"line":347},6,[170,349,350],{"class":203},"  {people.",[170,352,353],{"class":176},"map",[170,355,356],{"class":203},"((",[170,358,152],{"class":359},"sqxcx",[170,361,362],{"class":203},") ",[170,364,365],{"class":196},"=>",[170,367,368],{"class":203}," (\n",[170,370,372,375,378,381,383,386,389,391],{"class":172,"line":371},7,[170,373,374],{"class":203},"    \u003C",[170,376,377],{"class":262},"ListboxOption",[170,379,380],{"class":176}," key",[170,382,275],{"class":196},[170,384,385],{"class":203},"{p.id} ",[170,387,388],{"class":176},"value",[170,390,275],{"class":196},[170,392,393],{"class":203},"{p}>\n",[170,395,397],{"class":172,"line":396},8,[170,398,399],{"class":203},"      {p.name}\n",[170,401,403,406,408],{"class":172,"line":402},9,[170,404,405],{"class":203},"    \u003C\u002F",[170,407,377],{"class":262},[170,409,344],{"class":203},[170,411,413],{"class":172,"line":412},10,[170,414,415],{"class":203},"  ))}\n",[170,417,419,422,424],{"class":172,"line":418},11,[170,420,421],{"class":203},"\u003C\u002F",[170,423,301],{"class":262},[170,425,426],{"class":203},">;\n",[428,429,430,434,440,447],"ul",{},[431,432,433],"li",{},"The selected option is shown in the button using the same content as in the list.",[431,435,436,437,439],{},"Use ",[156,438,328],{}," (a property name or a function) when values are objects.",[431,441,442,443,446],{},"Pass ",[156,444,445],{},"name"," to submit the value with a form.",[431,448,449,452,453,456,457,460],{},[156,450,451],{},"invalid"," gives a red border, like the other fields; pair it with an ",[156,454,455],{},"ErrorMessage"," in the ",[156,458,459],{},"Field",".",[147,462,464],{"id":463},"more-to-come","More to come",[152,466,467],{},"Detailed examples, keyboard interaction and the full component API are on their way.",[469,470,471],"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 .sqxcx, html code.shiki .sqxcx{--shiki-default:#E36209}",{"title":166,"searchDepth":246,"depth":253,"links":473},[474,475,476],{"id":149,"depth":246,"text":150},{"id":207,"depth":246,"text":208},{"id":463,"depth":246,"text":464},"A custom select menu whose options can contain icons and rich content.","md",{},{"title":42,"description":477},"mBKEzrcIIhsHRWype3pof5pyi8Pvn-27V3oLrSRhBo8",1792929667667]