Shadcn Autocomplete Groups & Labels

When to use

• Search and filter fields that suggest matching options while the user types
• People and record lookups, grouped by team or fetched from a server as the query changes
• Form fields whose typed or picked text is validated with the rest of the form on submit

When not to use

• People found by a server query rather than a list loaded up front: use the Autocomplete Search Results example
• A selection that stores the chosen option rather than typed text, or several as chips: use the Combobox component
• Options nested in levels that the user drills into one level at a time: use the Cascader component
• A palette of app actions and keyboard shortcuts, often opened in a dialog: use the Command component

Agent notes

• Replace usersData, whose avatar URLs load from randomuser.me, with your own directory
• groupUsers keeps only the teams listed in its order array, so users of any other team silently drop out
• filter is null, so filteredItems alone decides matches over name, team and position; add any new field there
• value and onValueChange carry the input text as a string; picking an item only fills that text and stores no item object
• Both twins are built on @base-ui/react, so installing it in a radix project adds Base UI as a dependency
• A Server Component cannot create the function child of AutocompleteList, so the file that renders it needs a use client directive

Third-party API docs

• Base UI v1: API reference, docs, llms.txt