Meta tags:
description=A high-quality, unstyled React combobox component that renders an input combined with a list of predefined items to select.;
keywords=React Combobox,Combobox Component,Combo Box,Filterable Select,Searchable Dropdown,Editable Select,Typeahead Select,Autocomplete Dropdown,Tags Input,Chip Input,Token Input,Multi-Value Input,Multiple Select Combobox,Async Combobox,Accessible Combobox,Base UI;

Headings (most frequently used words):

combobox, propshide, statehide, root, value, input, popup, label, icon, inputgroup, clear, trigger, chips, chip, chipremove, list, portal, backdrop, positioner, arrow, status, empty, collection, row, item, itemindicator, group, grouplabel, separator, multiple, async, search, return, usage, guidelines, anatomy, typescript, examples, api, reference, usefilter, usefiltereditems, typed, wrapper, component, select, inside, grouped, single, creatable, virtualized, actionshide, changeeventreasonhide, changeeventdetailshide, highlighteventreasonhide, highlighteventdetailshide, parameters,

Text of the page (most frequently used words):
the (711), #combobox (463), value (386), label (312), when (256), state (227), component (225), type (219), undefined (202), function (201), react (197), code (197), name (193), data (188), continent (188), element (172), classname (171), props (163), popup (160), description (159), present (155), style (149), item (144), string (138), styles (133), boolean (125), root (100), reactelement (92), const (89), that (86), items (84), whether (83), return (80), render (80), list (79), input (78), with (77), default (77), side (76), returns (75), field (74), div (73), open (72), cssproperties (70), null (70), empty (65), user (61), css (59), hide (57), svg (57), false (56), anchor (55), africa (52), group (50), positioner (50), asia (49), based (48), wrapped (48), index (47), from (47), trigger (47), applied (46), class (46), span (46), disabled (44), europe (44), prop (43), has (40), and (40), height (39), width (38), export (35), corresponding (35), itemindicator (34), event (34), title (33), object (32), number (32), example (32), portal (32), america (31), renders (30), import (30), username (30), email (30), relative (29), query (28), table (28), button (28), none (28), clear (28), inputgroup (28), html (27), different (27), its (27), indicates (27), status (27), display (27), use (26), for (26), align (26), chip (26), accepts (25), allows (25), focused (25), start (25), you (24), replace (24), touched (24), valid (24), which (24), selected (24), aria (24), reason (24), com (24), htmlprops (23), tag (23), compose (23), another (23), chips (23), north (23), current (22), attribute (22), inline (22), should (21), true (21), end (21), dialog (21), filter (20), placeholder (20), readonly (20), any (19), positioned (19), closed (19), chipremove (19), componentprops (19), viewbox (19), fill (19), currentcolor (19), block (19), path (19), multiple (18), this (18), reactnode (18), key (18), south (18), interaction (17), focus (17), top (17), bottom (17), changed (16), invalid (16), pressed (16), animating (16), children (16), arrow (16), checkicon (16), length (16), module (16), stackblitz (16), modules (16), directoryuser (16), error (16), ignore (15), stroke (15), new (15), select (15), rendered (14), hidden (14), left (14), search (14), base (14), press (14), form (14), virtualizer (14), searchresults (14), fruits (14), fruit (14), grouplabel (13), been (13), not (13), highlighted (13), right (13), visible (13), selectedvalue (13), usestate (13), oceania (13), filled (12), dirty (12), out (12), are (12), icon (12), xicon (12), fragment (12), prev (12), country (12), doesn (11), specified (11), void (11), keyboard (11), row (11), alignment (11), sideoffset (11), backdrop (11), creatable (11), labels (11), vegetables (11), separator (10), instead (10), how (10), aligned (10), ref (10), available (10), required (10), keyboardevent (10), can (10), interface (10), existing (10), users (10), michael (10), seterror (10), result (9), have (9), collection (9), center (9), refobject (9), axis (9), show (9), itemtext (9), useref (9), labelitem (9), setsearchresults (9), produce (9), language (9), matches (8), properties (8), locale (8), against (8), using (8), groups (8), transitionstatus (8), ending (8), starting (8), dom (8), nativebutton (8), mouseevent (8), changes (8), move (8), union (8), first (8), container (8), viewport (8), virtualitem (8), client (8), tsx (8), trim (8), leslie (8), kathryn (8), courtney (8), lindsay (8), tom (8), whitney (8), jacob (8), arlene (8), marvin (8), eleanor (8), jerome (8), ispending (8), async (8), trimmedsearchvalue (8), nextsearchvalue (8), veg (8), guinea (8), called (7), inside (7), used (7), automatically (7), keep (7), pointer (7), rendering (7), shift (7), try (7), while (7), remove (7), pointerevent (7), array (7), filtereditems (7), controlled (7), virtualizerref (7), map (7), strokelinejoin (7), round (7), strokelinecap (7), square (7), create (7), bell (7), united (7), contains (6), orientation (6), will (6), keepmounted (6), native (6), set (6), grid (6), htmlelement (6), between (6), dimensions (6), virtualized (6), without (6), found (6), setopendialog (6), useid (6), setquery (6), tolocalelowercase (6), some (6), htmlfor (6), alexander (6), murphy (6), henry (6), foster (6), walton (6), cook (6), engineer (6), francis (6), jones (6), mccoy (6), mckinney (6), pena (6), starttransition (6), emptymessage (6), setsearchvalue (6), abortcontrollerref (6), controller (6), caretdownicon (6), apple (6), republic (6), property (5), intl (5), selection (5), filtering (5), usefilter (5), screen (5), readers (5), handler (5), must (5), avoid (5), uncentered (5), animations (5), behavior (5), determines (5), edge (5), absolute (5), collisionavoidance (5), before (5), controls (5), navigation (5), actions (5), htmlinputelement (5), highlight (5), itemvalue (5), itemtostringlabel (5), onopenchange (5), inputvalue (5), oninputvaluechange (5), onvaluechange (5), setselected (5), normalized (5), trimmed (5), selectedvalues (5), setblockstartstatus (5), mango (5), banana (5), orange (5), typescript (5), itemtostring (4), localesargument (4), comparison (4), defaults (4), externally (4), horizontal (4), accessible (4), transition (4), indicator (4), replacing (4), via (4), htmldivelement (4), own (4), remain (4), mounted (4), currently (4), instant (4), mouse (4), touch (4), pen (4), boundary (4), fallback (4), perpendicular (4), allow (4), overflow (4), requested (4), along (4), change (4), initial (4), wrapper (4), outside (4), close (4), changeeventdetails (4), choose (4), onopenchangecomplete (4), eventdetails (4), onitemhighlighted (4), values (4), objects (4), needing (4), autocomplete (4), defaultvalue (4), virtualizeditem (4), createinputref (4), pendingqueryref (4), currenttrimmed (4), find (4), baseid (4), uniqueid (4), newitem (4), creatableselection (4), promise (4), simulate (4), network (4), await (4), resolve (4), math (4), random (4), people (4), allusers (4), product (4), manager (4), assign (4), searchusers (4), searchvalue (4), abortcontroller (4), selectedvaluesref (4), getstatus (4), getemptymessage (4), nextselectedvalues (4), load (4), pattern (4), producegroup (4), kiwi (4), grape (4), strawberry (4), watermelon (4), islands (4), korea (4), sudan (4), programminglanguage (4), filtered (3), usefiltereditems (3), parameter (3), matching (3), separatorstate (3), associated (3), provided (3), components (3), clicking (3), pressing (3), identifies (3), individual (3), displays (3), single (3), across (3), itself (3), prefer (3), useful (3), placed (3), there (3), opened (3), initialfocus (3), transform (3), position (3), maintain (3), after (3), view (3), clipping (3), flip (3), correct (3), distance (3), following (3), also (3), elements (3), alignoffset (3), listempty (3), popupside (3), opens (3), text (3), modal (3), reached (3), again (3), specify (3), control (3), match (3), initially (3), usevirtualizer (3), isend (3), scrollelementref (3), totalsize (3), 100 (3), bug (3), docs (3), comboboxinputref (3), highlighteditemref (3), existingids (3), lowered (3), next (3), blockstartstatus (3), merged (3), source (3), m12 (3), 6h4l4 (3), actionbuttons (3), carrot (3), spinach (3), kingdom (3), countries (3), hiddencount (3), visiblevalue (3), languages (3), typed (3), anatomy (3), menu (3), internally (2), endswith (2), startswith (2), comboboxfilter (2), runtime (2), parameters (2), hook (2), pass (2), vertical (2), parent (2), within (2), child (2), these (2), related (2), enter (2), onclick (2), listbox (2), into (2), flat (2), only (2), politely (2), announce (2), consistently (2), hiding (2), removing (2), conditional (2), updating (2), conditionally (2), whose (2), cannot (2), anchorhidden (2), nothing (2), finalfocus (2), coordinates (2), anchored (2), transitions (2), origin (2), variable (2), fixed (2), positionmethod (2), sticky (2), padding (2), additional (2), collisionpadding (2), ancestors (2), area (2), collisionboundary (2), fallbackaxisside (2), logical (2), ltr (2), preferred (2), fit (2), then (2), but (2), handle (2), collisions (2), positioning (2), virtualelement (2), arrowpadding (2), takes (2), pixels (2), read (2), offsetfunction (2), offset (2), layout (2), disableanchortracking (2), displayed (2), shadowroot (2), multiselectable (2), edits (2), highlighteventdetails (2), allowed (2), propagate (2), where (2), cancel (2), touchevent (2), escape (2), focusevent (2), inputevent (2), unmount (2), inputref (2), being (2), openoninputclick (2), due (2), document (2), limited (2), scroll (2), loop (2), keys (2), arrowdown (2), last (2), arrowup (2), does (2), presses (2), loopfocus (2), limit (2), converts (2), representation (2), shape (2), itemtostringvalue (2), logic (2), isitemequaltovalue (2), composition (2), rows (2), animation (2), actionsref (2), over (2), them (2), highlightitemonhover (2), autohighlight (2), defaultopen (2), uncontrolled (2), defaultinputvalue (2), api (2), reference (2), getitemlabel (2), virtualizeditems (2), indexlabel (2), isstart (2), options (2), count (2), shouldscroll (2), 000 (2), virtualizedlist (2), handlescrollelementref (2), role (2), presentation (2), size (2), tanstack (2), virtual (2), large (2), initiallabels (2), enhancement (2), help (2), wanted (2), good (2), issue (2), handleinputkeydown (2), plusicon (2), opendialog (2), add (2), handlecreatesubmit (2), setlabels (2), handlecreate (2), let (2), exactexists (2), itemsforview (2), clean (2), opening (2), delay (2), settimeout (2), 500 (2), occasional (2), errors (2), chance (2), will_error (2), failed (2), fetch (2), please (2), marketing (2), lead (2), design (2), systems (2), engineering (2), designer (2), frontend (2), customer (2), success (2), security (2), analyst (2), specialist (2), operations (2), devops (2), reviewers (2), busy (2), itemtitle (2), itememail (2), itemsubtitle (2), setselectedvalues (2), usetransition (2), usememo (2), foreach (2), push (2), spinner (2), searching (2), typing (2), term (2), abort (2), signal (2), aborted (2), remote (2), fetching (2), selections (2), stream (2), avoids (2), upfront (2), setselectedvalue (2), nextselectedvalue (2), reviewer (2), cauliflower (2), cucumber (2), kale (2), pepper (2), zucchini (2), groupproduce (2), order (2), groupedproduce (2), producedata (2), broccoli (2), producegroupitem (2), grouped (2), provide (2), solomon (2), somalia (2), spain (2), sri (2), lanka (2), suriname (2), sweden (2), switzerland (2), syria (2), taiwan (2), tajikistan (2), tanzania (2), thailand (2), timor (2), leste (2), togo (2), tonga (2), trinidad (2), tobago (2), tunisia (2), turkey (2), turkmenistan (2), tuvalu (2), uganda (2), ukraine (2), arab (2), emirates (2), states (2), uruguay (2), uzbekistan (2), vanuatu (2), vatican (2), city (2), venezuela (2), vietnam (2), yemen (2), zambia (2), zimbabwe (2), china (2), colombia (2), comoros (2), congo (2), costa (2), rica (2), croatia (2), cuba (2), cyprus (2), czech (2), denmark (2), djibouti (2), dominica (2), dominican (2), ecuador (2), egypt (2), salvador (2), equatorial (2), eritrea (2), estonia (2), ethiopia (2), fiji (2), finland (2), france (2), gabon (2), gambia (2), georgia (2), germany (2), ghana (2), greece (2), grenada (2), guatemala (2), bissau (2), guyana (2), haiti (2), honduras (2), hungary (2), iceland (2), india (2), indonesia (2), iran (2), iraq (2), ireland (2), israel (2), italy (2), jamaica (2), japan (2), jordan (2), kazakhstan (2), kenya (2), kuwait (2), kyrgyzstan (2), laos (2), latvia (2), lebanon (2), lesotho (2), liberia (2), libya (2), liechtenstein (2), lithuania (2), luxembourg (2), madagascar (2), malawi (2), malaysia (2), maldives (2), mali (2), malta (2), marshall (2), mauritania (2), mauritius (2), mexico (2), micronesia (2), moldova (2), monaco (2), mongolia (2), montenegro (2), morocco (2), mozambique (2), myanmar (2), namibia (2), nauru (2), nepal (2), netherlands (2), zealand (2), nicaragua (2), niger (2), nigeria (2), macedonia (2), norway (2), oman (2), pakistan (2), palau (2), palestine (2), panama (2), papua (2), paraguay (2), peru (2), philippines (2), poland (2), portugal (2), qatar (2), romania (2), russia (2), rwanda (2), samoa (2), san (2), marino (2), saudi (2), arabia (2), senegal (2), serbia (2), seychelles (2), sierra (2), leone (2), singapore (2), slovakia (2), slovenia (2), caretupdownicon (2), afghanistan (2), albania (2), algeria (2), andorra (2), angola (2), argentina (2), armenia (2), australia (2), austria (2), azerbaijan (2), bahamas (2), bahrain (2), bangladesh (2), barbados (2), belarus (2), belgium (2), belize (2), benin (2), bhutan (2), bolivia (2), bosnia (2), herzegovina (2), botswana (2), brazil (2), brunei (2), bulgaria (2), burkina (2), faso (2), burundi (2), cambodia (2), cameroon (2), canada (2), cape (2), verde (2), central (2), african (2), chad (2), chile (2), chip_limit (2), langs (2), programming (2), java (2), php (2), ruby (2), rust (2), swift (2), examples (2), passed (2), forms (2), accessibility (2), widgets (2), predefined (2), filterable (2), usage (2), guidelines (2), passionfruit (2), pineapple (2), blueberry (2), raspberry (2), blackberry (2), cherry (2), peach (2), pear (2), plum (2), cantaloupe (2), honeydew (2), papaya (2), guava (2), lychee (2), pomegranate (2), apricot (2), grapefruit (2), provider (2), toggle (2), checkbox (2), ends, starts, anywhere, mode, comboboxfilteroptions, robust, collator, comboboxseparatorstate, comboboxseparatorprops, comboboxgrouplabelstate, comboboxgrouplabelprops, comboboxgroupstate, comboboxgroupprops, comboboxitemindicatorstate, comboboxitemindicatorprops, comboboxitemstate, comboboxitemprops, improves, performance, avoiding, need, calculate, baseuievent, optional, click, fires, well, unique, comboboxrowstate, comboboxrowprops, enable, turn, comboboxcollectionstate, comboboxcollectionprops, implicitly, wraps, comboboxemptystate, comboboxemptyprops, requires, announces, comboboxstatusstate, comboboxstatusprops, message, content, announced, conveying, asynchronously, loaded, centered, comboboxarrowstate, comboboxarrowprops, comboboxpopupstate, comboboxpopupprops, closetype, previously, opentype, tabbable, comboboxpositionerstate, comboboxpositionerprops, was, scrolled, space, collision, rectangle, delimits, confined, explicitly, setting, supports, omitted, nudge, swap, overflows, never, stays, fits, otherwise, opposite, placement, prevent, hanging, rounded, corners, minimum, edges, may, disable, tracking, positions, comboboxbackdropstate, comboboxbackdropprops, overlay, beneath, comboboxportalstate, comboboxportalprops, moves, part, appended, body, comboboxliststate, comboboxlistprops, comboboxchipremovestate, comboboxchipremoveprops, comboboxchipstate, comboboxchipprops, represents, comboboxchipsstate, comboboxchipsprops, comboboxtriggerstate, comboboxtriggerprops, comboboxclearstate, comboboxclearprops, clears, clicked, comboboxinputgroupstate, comboboxinputgroupprops, comboboxinputstate, comboboxinputprops, comboboxiconstate, comboboxiconprops, comboboxvaluestate, comboboxvalueprops, overridden, comboboxlabelstate, comboboxlabelprops, comboboxroothighlighteventdetails, comboboxroothighlighteventreason, highlighteventreason, triggered, applicable, ispropagationallowed, iscanceled, canceled, allowpropagation, cases, stop, propagation, cancels, handling, comboboxrootchangeeventdetails, comboboxrootchangeeventreason, changeeventreason, comboboxrootactions, comboboxrootstate, comboboxrootprops, submitting, unable, option, complete, highlightedvalue, programmatically, hovering, callback, fired, unhighlighted, receives, details, describing, why, rest, page, locked, interactions, enters, back, always, included, per, authoring, practices, maximum, either, submission, custom, determine, referentially, bind, resets, transient, closes, unconditionally, conjunction, considered, presented, enabled, navigate, columns, inferred, owns, internal, want, provides, hint, browser, autofill, manually, unmounts, call, closing, finishes, imperative, moving, disabling, differentiated, hover, submitted, all, parts, 10000, padstart, returntype, typeof, examplevirtualizedcombobox, queuemicrotask, scrolltoindex, getscrollelement, estimatesize, overscan, paddingstart, paddingend, scrollpaddingend, scrollpaddingstart, useimperativehandle, usecallback, measure, gettotalsize, scroller, total, virtualizedplaceholder, getvirtualitems, measureelement, setsize, posinset, translatey, efficiently, datasets, virtualization, library, like, 8h13m8, documentation, onkeydown, dialogpopup, onsubmit, textfield, submit, examplecreatablecombobox, ensure, don, collide, formevent, htmlformelement, preventdefault, alongside, exact, creation, else, exampleasyncmultiplecombobox, supporting, exampleasyncsinglecombobox, remains, results, record, examplegroupedcombobox, lettuce, represented, each, extra, such, heading, organize, section, headings, focuses, favorite, triggericon, m11, 10h5l3, 5zm0, 4h5l3, examplepopovercombobox, searchable, more, slice, limiting, slicing, javascript, python, cpp, examplemultiplecombobox, adding, removed, jsx, extends, mycombobox, specifying, generic, shows, around, inference, safety, infers, held, place, together, intended, see, guide, includes, features, specific, free, consider, simple, restricted, selectable, similar, sufficiently, warrant, examplecombobox, markdown, combined, npm, github, userender, mergeprops, direction, csp, utils, tooltip, toolbar, toast, tabs, switch, slider, radio, progress, preview, card, popover, otp, meter, menubar, fieldset, drawer, context, collapsible, avatar, alert, accordion, llms, txt, customization, styling, handbook, about, community, releases, quick, overview, skip, contents,

Text of the page (random words):
an combobox item combobox collection combobox group combobox list combobox popup combobox positioner combobox portal combobox root function checkicon props react componentprops svg return svg width 16 height 16 viewbox 0 0 16 16 fill none stroke currentcolor props style display block props style path d m2 5 8 5 4 4 7 9 svg function xicon props react componentprops svg return svg width 16 height 16 viewbox 0 0 16 16 fill none stroke currentcolor strokelinecap square strokelinejoin round props style display block props style path d m4 5 4 5 7 7m 7 0 7 7 svg function caretdownicon props react componentprops svg return svg width 16 height 16 viewbox 0 0 16 16 fill currentcolor props style display block props style path d m12 6h4l4 4 5z svg interface produce id string label string group fruits vegetables interface producegroup value string items produce const producedata produce id fruit apple label apple group fruits id fruit banana label banana group fruits id fruit mango label mango group fruits id fruit kiwi label kiwi group fruits id fruit grape label grape group fruits id fruit orange label orange group fruits id fruit strawberry label strawberry group fruits id fruit watermelon label watermelon group fruits id veg broccoli label broccoli group vegetables id veg carrot label carrot group vegetables id veg cauliflower label cauliflower group vegetables id veg cucumber label cucumber group vegetables id veg kale label kale group vegetables id veg pepper label bell pepper group vegetables id veg spinach label spinach group vegetables id veg zucchini label zucchini group vegetables function groupproduce items produce producegroup const groups record string produce items foreach item groups item group push item const order fruits vegetables return order map value value items groups value const groupedproduce producegroup groupproduce producedata show code async search single load items from a remote source by fetching on input changes keep the selected item in the items list so it remains available while new results stream in this pattern avoids needing to load items upfront assign reviewer index tsx index module css css modules stackblitz css modules stackblitz use client import as react from react import combobox from base ui react combobox import styles from index module css export default function exampleasyncsinglecombobox const id react useid const searchresults setsearchresults react usestate directoryuser const selectedvalue setselectedvalue react usestate directoryuser null null const searchvalue setsearchvalue react usestate const error seterror react usestate string null null const ispending starttransition react usetransition const contains combobox usefilter const abortcontrollerref react useref abortcontroller null null const trimmedsearchvalue searchvalue trim const items react usememo if selectedvalue searchresults some user user id selectedvalue id return searchresults return searchresults selectedvalue searchresults selectedvalue function getstatus if ispending return react fragment span classname styles spinner aria hidden searching react fragment if error return error if trimmedsearchvalue return selectedvalue null start typing to search people if searchresults length 0 return no matches for trimmedsearchvalue return null function getemptymessage if trimmedsearchvalue ispending searchresults length 0 error return null return try a different search term const status getstatus const emptymessage getemptymessage return combobox root items items itemtostringlabel user directoryuser user name filter null onopenchangecomplete open if open selectedvalue setsearchresults selectedvalue onvaluechange nextselectedvalue setselectedvalue nextselectedvalue setsearchvalue seterror null oninputvaluechange nextsearchvalue reason setsearchvalue nextsearchvalue const controller new abortcontroller abortcontrollerref current abort abortcontrollerref current controller if nextsearchvalue setsearchresults seterror null return if reason item press return starttransition async seterror null const result await searchusers nextsearchvalue contains if controller signal aborted return starttransition setsearchresults result users seterror result error div classname styles label label htmlfor id assign reviewer label combobox inputgroup classname styles inputgroup combobox input id id placeholder e g michael classname styles input div classname styles actionbuttons combobox clear classname styles clear aria label clear selection xicon combobox clear combobox trigger classname styles trigger aria label open popup caretdownicon combobox trigger div combobox inputgroup div combobox portal combobox positioner classname styles positioner sideoffset 4 combobox popup classname styles popup aria busy ispending undefined div classname styles viewport combobox status status div classname styles status status div null combobox status combobox empty emptymessage div classname styles empty emptymessage div null combobox empty combobox list user directoryuser combobox item key user id classname styles item value user combobox itemindicator classname styles itemindicator checkicon combobox itemindicator span classname styles itemtext span classname styles itemtitle user name span span classname styles itememail user email span span classname styles itemsubtitle span user username span span user title span span span combobox item combobox list div combobox popup combobox positioner combobox portal combobox root function checkicon props react componentprops svg return svg width 16 height 16 viewbox 0 0 16 16 fill none stroke currentcolor props style display block props style path d m2 5 8 5 4 4 7 9 svg function xicon props react componentprops svg return svg width 16 height 16 viewbox 0 0 16 16 fill none stroke currentcolor strokelinecap square strokelinejoin round props style display block props style path d m4 5 4 5 7 7m 7 0 7 7 svg function caretdownicon props react componentprops svg return svg width 16 height 16 viewbox 0 0 16 16 fill currentcolor props style display block props style path d m12 6h4l4 4 5z svg interface directoryuser id string name string username string email string title string async function searchusers query string filter item string query string boolean promise users directoryuser error string null simulate network delay await new promise resolve settimeout resolve math random 500 100 simulate occasional network errors 1 chance if math random 0 01 query will_error return users error failed to fetch people please try again const users allusers filter user return filter user name query filter user username query filter user email query filter user title query return users error null const allusers directoryuser id leslie alexander name leslie alexander username leslie email leslie alexander example com title product manager id kathryn murphy name kathryn murphy username kathryn email kathryn murphy example com title marketing lead id courtney henry name courtney henry username courtney email courtney henry example com title design systems id michael foster name michael foster username michael email michael foster example com title engineering manager id lindsay walton name lindsay walton username lindsay email lindsay walton example com title product designer id tom cook name tom cook username tom email tom cook example com title frontend engineer id whitney francis name whitney francis username whitney email whitney francis example com title customer success id jacob jones name jacob jones username jacob email jacob jones example com title security engineer id arlene mccoy name arlene mccoy username arlene email arlene mccoy example com title data analyst id marvin mckinney name marvin mckinney username marvin email marvin mckinney example com title qa specialist id eleanor pena name eleanor pena username eleanor email eleanor pena example com title operations id jerome bell name jerome bell username jerome email jerome bell example com title devops engineer show code async search multiple load items from a remote source by fetching on input changes while supporting multiple selections selected items remain available in the list while new matches stream in this pattern avoids needing to load items upfront assign reviewers index tsx index module css css modules stackblitz css modules stackblitz use client import as react from react import combobox from base ui react combobox import styles from index module css export default function exampleasyncmultiplecombobox const id react useid const searchresults setsearchresults react usestate directoryuser const selectedvalues setselectedvalues react usestate directoryuser const searchvalue setsearchvalue react usestate const error seterror react usestate string null null const blockstartstatus setblockstartstatus react usestate false const ispending starttransition react usetransition const contains combobox usefilter const abortcontrollerref react useref abortcontroller null null const selectedvaluesref react useref directoryuser const trimmedsearchvalue searchvalue trim const items react usememo if selectedvalues length 0 return searchresults const merged searchresults selectedvalues foreach user if searchresults some result result id user id merged push user return merged searchresults selectedvalues function getstatus if ispending return react fragment span classname styles spinner aria hidden searching react fragment if error return error if trimmedsearchvalue blockstartstatus return selectedvalues length 0 null start typing to search people if searchresults length 0 blockstartstatus return no matches for trimmedsearchvalue return null function getemptymessage if trimmedsearchvalue ispending searchresults length 0 error return null return try a different search term const status getstatus const emptymessage getemptymessage return combobox root items items itemtostringlabel user directoryuser user name multiple filter null onopenchangecomplete open if open setsearchresults selectedvaluesref current setblockstartstatus false onvaluechange nextselectedvalues selectedvaluesref current nextselectedvalues setselectedvalues nextselectedvalues setsearchvalue seterror null if nextselectedvalues length 0 setsearchresults setblockstartstatus false else setblockstartstatus true oninputvaluechange nextsearchvalue reason setsearchvalue nextsearchvalue const controller new abortcontroller abortcontrollerref current abort abortcontrollerref current controller if nextsearchvalue setsearchresults selectedvaluesref current seterror null setblockstartstatus false return if reason item press return starttransition async seterror null const result await searchusers nextsearchvalue contains if controller signal aborted return starttransition setsearchresults result users seterror result error div classname styles container label classname styles label htmlfor id assign reviewers label combobox inputgroup classname styles inputgroup combobox chips classname styles chips combobox value value directoryuser react fragment value map user combobox chip key user id classname styles chip aria label user name user name combobox chipremove classname styles chipremove aria label remove user name xicon combobox chipremove combobox chip combobox input id id placeholder value length 0 e g michael classname styles input react fragment combobox value combobox chips combobox inputgroup div combobox portal combobox positioner classname styles positioner sideoffset 4 combobox popup classname styles popup aria busy ispending undefined div classname styles viewport combobox status status div classname styles status status div null combobox status combobox empty emptymessage div classname styles empty emptymessage div null combobox empty combobox list user directoryuser combobox item key user id classname styles item value user combobox itemindicator classname styles itemindicator checkicon combobox itemindicator span classname styles itemtext span classname styles itemtitle user name span span classname styles itememail user email span span classname styles itemsubtitle span user username span span user title span span span combobox item combobox list div combobox popup combobox positioner combobox portal combobox root function checkicon props react componentprops svg return svg width 16 height 16 viewbox 0 0 16 16 fill none stroke currentcolor props style display block props style path d m2 5 8 5 4 4 7 9 svg function xicon props react componentprops svg return svg width 16 height 16 viewbox 0 0 16 16 fill none stroke currentcolor strokelinecap square strokelinejoin round props style display block props style path d m4 5 4 5 7 7m 7 0 7 7 svg interface directoryuser id string name string username string email string title string async function searchusers query string filter item string query string boolean promise users directoryuser error string null simulate network delay await new promise resolve settimeout resolve math random 500 100 simulate occasional network errors 1 chance if math random 0 01 query will_error return users error failed to fetch people please try again const users allusers filter user return filter user name query filter user username query filter user email query filter user title query return users error null const allusers directoryuser id leslie alexander name leslie alexander username leslie email leslie alexander example com title product manager id kathryn murphy name kathryn murphy username kathryn email kathryn murphy example com title marketing lead id courtney henry name courtney henry username courtney email courtney henry example com title design systems id michael foster name michael foster username michael email michael foster example com title engineering manager id lindsay walton name lindsay walton username lindsay email lindsay walton example com title product designer id tom cook name tom cook username tom email tom cook example com title frontend engineer id whitney francis name whitney francis username whitney email whitney francis example com title customer success id jacob jones name jacob jones username jacob email jacob jones example com title security engineer id arlene mccoy name arlene mccoy username arlene email arlene mccoy example com title data analyst id marvin mckinney name marvin mckinney username marvin email marvin mckinney example com title qa specialist id eleanor pena name eleanor pena username eleanor email eleanor pena example com title operations id jerome bell name jerome bell username jerome email jerome bell example com title devops engineer show code creatable create a new item when the filter matches no items opening a creation dialog labels index tsx index module css css modules stackblitz css modules stackblitz use client import as react from react import combobox from base ui react combobox import dialog from base ui react dialog import styles from index module css export default function examplecreatablecombobox const id react useid cons...