shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Rich Content
Items with Descriptions Combobox for React
A combobox of integrations with a one-line description under each name.
An integration picker where every row has two lines: GitHub, Slack or Notion in font-medium, then what it does in smaller muted text. The button shows only the name once one is picked. Use it when the names alone don't say enough to choose between options.
Preview
Installation
FAQ
How are the two lines laid out?
A flex flex-col gap-0.5 block inside ComboboxItem: the name in font-medium, the description in text-muted-foreground text-xs. The item gets py-3 for room.
Which integrations are listed?
GitHub (Connect your GitHub repositories), Slack (Send notifications to Slack channels) and Notion (Sync data with Notion databases).
Does the search look at the descriptions?
No, only the names. Typing notifications finds nothing.
Pass a filter to Combobox that checks the description too.
Related
- Items with Metadata ComboboxA combobox of team members with an
- Items with Icons and Descriptions ComboboxA combobox of plans, each row with an
- Items with Avatars ComboboxA combobox of people with an avatar on
- Simple Single Select ComboboxA single-select combobox that opens from
- Multiple Groups with Labels ComboboxA combobox with Frontend and Backend
- Items with Status Indicators ComboboxA combobox of tasks with a status badge