shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Rich Content
Items with Action Buttons Combobox for React
A combobox of repositories where each row also has a button that opens the repository.
A repository picker with a second action on every row. Picking a row selects the repository, and the small external-link button at the end opens it in a new tab without selecting it. Use it where people may want to check an option before choosing it.
Preview
Installation
FAQ
How is each row laid out?
ComboboxItem gets items-start gap-2 py-3. The name in font-medium and the description in muted text-xs fill the row, and the button sits at the end.
What is the button?
A ghost icon-xs Button with an ExternalLinkIcon and an aria-label such as Open awesome-project. The URL is on its data-url attribute.
Why doesn't the button select the row?
Its click handler calls stopPropagation, so the click never reaches the item.
Then it opens the URL in a new tab.
Can the button be reached from the keyboard?
Not with the arrow keys, which move between rows. Enter on a row selects it. If the second action matters to keyboard users, offer it somewhere else too, such as after the pick.
Related
- Items with Descriptions ComboboxA combobox of integrations with a
- With Footer Actions ComboboxA workspace combobox with a Manage
- Items with Status Indicators ComboboxA combobox of tasks with a status badge
- Items with Icons and Descriptions ComboboxA combobox of plans, each row with an
- Button with Text (Standard)The one filled action
- Simple Single Select ComboboxA single-select combobox that opens from