Combobox

A combobox that combines text input with a selectable popup list of options.

#Installation

npx @dinachi/cli@latest add combobox

#Usage

tsx

import {
  Combobox,
  ComboboxInputGroup,
  ComboboxInput,
  ComboboxTrigger,
  ComboboxClear,
  ComboboxLabel,
  ComboboxContent,
  ComboboxList,
  ComboboxItem,
  ComboboxGroup,
  ComboboxGroupLabel,
  ComboboxEmpty,
  ComboboxStatus,
  ComboboxSeparator,
  createComboboxItems,
} from "@/components/ui/combobox"

#Examples

#Selecting by ID

createComboboxItems derives each item's value and label from your objects, so value and onValueChange use IDs while the list still receives the full object. Create the collection at module scope, or memoize it for runtime data:

tsx

const userItems = React.useMemo(
  () => createComboboxItems(users, { getValue: (user) => user.id, getLabel: (user) => user.name }),
  [users]
)

#API Reference

#Combobox (Root)

Prop	Type	Default	Description
items	T[] \| GroupedItems[] \| ItemCollection	—	The items to display. Can be a flat array, an array of groups (objects with value and items properties), or a collection from createComboboxItems. Required for filtering to work.
openOnInputClick	boolean	false	Whether the popup opens when clicking the input.
value	any	—	The controlled selected value.
defaultValue	any	—	The uncontrolled initial selected value.
onValueChange	(value: any, eventDetails) => void	—	Callback fired when the selected value changes.
onInputValueChange	(value: string, eventDetails) => void	—	Callback fired when the input text changes.
onOpenChange	(open: boolean, eventDetails) => void	—	Callback fired when the popup is opened or closed.
multiple	boolean	false	Whether multiple items can be selected.
disabled	boolean	false	Whether the component should ignore user interaction.

#ComboboxItem

Prop	Type	Default	Description
value	any	—	The value of the item. Required.
inset	boolean	false	Adds extra left padding for grouped or nested option content.

#ComboboxGroup

Prop	Type	Default	Description
items	any[]	—	Items to be rendered within this group. Child Collection components will use these items.

#Other Parts

Prop	Type	Default	Description
ComboboxContent.portal	boolean	true	Whether to render in a portal. Set to false inside Dialog or Drawer.
ComboboxTrigger.children	React.ReactNode	—	Optional trigger content. Defaults to a chevron icon.
ComboboxClear.children	React.ReactNode	—	Optional clear action content. Defaults to an X icon.

Getting started

Foundations

Integrations

Form19

Display5

Layout4

Navigation4

Overlay8

Feedback4

Motion19