Sections

Utilities

Forms

Hooks

useIsMobileNew

Combobox

Displays a searchable list of options.

Installation


pnpm dlx shadcn@latest add @shark/combobox

Anatomy


Combobox
  ├── ComboboxInput
  └── ComboboxContent
      ├── ComboboxEmpty
      └── ComboboxList
        └── ComboboxGroup
          ├── ComboboxGroupLabel
          └── ComboboxItem

Usage


import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Combobox,
  ComboboxContent,
  ComboboxGroup,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox";


const { contains } = useFilter({ sensitivity: "base" });
const { collection, filter } = useListCollection({
  initialItems: [
    { label: "Apple", value: "apple" },
    { label: "Banana", value: "banana" },
  ],
  filter: contains,
});
 
<Combobox
  collection={collection}
  onInputValueChange={({ inputValue }) => filter(inputValue)}
>
  <ComboboxInput placeholder="Select an option" />
  <ComboboxContent>
    <ComboboxList>
      {items.map((item) => (
        <ComboboxItem item={item} key={item.value}>
          {item.label}
        </ComboboxItem>
      ))}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

Controlled

Control the selected value with inputValue and onValueChange props.

Selected: banana

Size

Small

Medium

Large

States

Invalid

Disabled

Examples

Auto highlight

Automatically highlight the first matching item as the user types.

Group

With Field

Use Combobox with Field components to style the combobox with the field components.

With scroll

Multiple

Enable multiple selection by setting the multiple prop to Combobox.

With clear button

Pass showClear to ComboboxInput to show a clear button.

With start icon

API Reference

Combobox

Root component.

Prop	Type	Default
`collection`	`ListCollection<T>`	required
`value`	`string \| string[]`	-
`defaultValue`	`string \| string[]`	-
`onValueChange`	`(details: ValueChangeDetails<T>) => void`	-
`onInputValueChange`	`(details: InputValueChangeDetails) => void`	-
`multiple`	`boolean`	`false`
`disabled`	`boolean`	-
`openOnClick`	`boolean`	`true`
`lazyMount`	`boolean`	`true`
`unmountOnExit`	`boolean`	`true`
`className`	`string`	-

ComboboxControl

Optional wrapper for custom layouts.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

ComboboxInput

Input with dropdown trigger and optional clear button. Combines search and selection.

Prop	Type	Default
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`showTrigger`	`boolean`	`true`
`showClear`	`boolean`	`false`
`disabled`	`boolean`	-
`className`	`string`	-

ComboboxTrigger

Opens the dropdown on click.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

ComboboxClear

Button to clear the input value.

Prop	Type	Default
`asChild`	`boolean`	-

ComboboxContent

Holds the dropdown options. Displayed in a portal.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

ComboboxList

Wraps the list of options. Use with collection.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

ComboboxItem

A single selectable option.

Prop	Type	Default
`item`	`T`	required
`className`	`string`	-
`asChild`	`boolean`	-

ComboboxGroup

Groups related options under an optional heading.

Prop	Type	Default
`heading`	`string \| ReactNode`	-
`className`	`string`	-
`asChild`	`boolean`	-

ComboboxGroupLabel

Label for an option group.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

ComboboxEmpty

Shown when no options match the current filter. Use for empty state.

Prop	Type	Default
`className`	`string`	-
`children`	`ReactNode`	`No results found.`

For a complete list of props, see the Ark UI documentation.

Color Picker

Command