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,
  ComboboxInput,
  ComboboxTrigger,
  ComboboxClear,
  ComboboxContent,
  ComboboxList,
  ComboboxItem,
  ComboboxGroup,
  ComboboxGroupLabel,
  ComboboxEmpty,
  ComboboxStatus,
  ComboboxSeparator,
} from "@/components/ui/combobox"

#Examples

Default Combobox

A searchable combobox for selecting from a list

Combobox with Groups

Combobox with labeled option groups

Combobox with Clear

Combobox with a clear button to reset selection

#API Reference

#Combobox (Root)

Prop	Type	Default	Description
items	T[] \| GroupedItems[]	—	The items to display. Can be a flat array or an array of groups (objects with value and items properties). 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.