Sections

Utilities

Combobox

Searchable select for filtering and choosing options.

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/combobox.json

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", group: "Fruits" },
    { label: "Banana", value: "banana", group: "Fruits" },
  ],
  filter: contains,
  groupBy: (item) => item.group, // optional
});
 
<Combobox
  collection={collection}
  onInputValueChange={({ inputValue }) => filter(inputValue)}
>
  <ComboboxInput placeholder="Select an option" />
  <ComboboxContent>
    <ComboboxList>
      {collection.group().map(([group, items]) => (
        <ComboboxGroup heading={group} key={group}>
          {items.map((item) => (
            <ComboboxItem item={item} key={item.value}>
              {item.label}
            </ComboboxItem>
          ))}
        </ComboboxGroup>
      ))}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

Controlled

Control the selected value with inputValue and onValueChange props.

Selected: banana

Size

Small

Medium

Large

State

Invalid

Disabled

Examples

Auto highlight

Automatically highlight the first matching item as the user types by setting inputBehavior="autohighlight".

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. Use with useListCollection and useFilter for filtering.

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. Use ComboboxInput for the standard input-with-trigger layout.

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.