Responsive Combobox Components

Basic Examples

Single Select

Multi-Select

Responsive Design

Toggle between desktop (Popover) and mobile (Drawer) views to see the responsive behavior.

Single Select - Mobile Drawer

Multi-Select - Mobile Drawer

Loading State

Single Select with Loading

Multi-Select with Loading

Readonly State

Readonly Single Select

This combobox is disabled and shows a pre-selected value

Readonly Multi-Select

This multi-select is disabled and shows pre-selected values

API Documentation

Combobox API

Props

Prop	Type	Default	Description
items	ComboboxItem[]	-	Array of items to display in the combobox
onChange	(value: string) => void	-	Callback when selection changes
noItemsLabel	string	-	Text to show when no items are available
placeholder	string	-	Placeholder text for the input
initialValue	string	-	Initial selected value
readonly	boolean	false	Whether the combobox is readonly
shouldFilter	boolean	true	Whether to filter items based on search
onSearch	(search: string) => void	-	Callback when search input changes
loading	boolean	false	Whether to show loading state
className	string	-	Additional CSS classes

ComboboxItem Type

type ComboboxItem = {
  label: string;      // Display text
  value: string;      // Unique value
  suffix?: string;    // Optional suffix text
};

Example Usage

import Combobox from "@/components/combobox";

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
];

function MyComponent() {
  const [value, setValue] = useState("");

  return (
    <Combobox
      items={items}
      onChange={setValue}
      placeholder="Select a fruit"
      noItemsLabel="No fruits found"
      onSearch={(search) => console.log("Searching:", search)}
    />
  );
}

ComboboxMultiSelect API

Props

Prop	Type	Default	Description
items	ComboboxItem[]	-	Array of items to display in the combobox
onChange	(value: string[]) => void	-	Callback when selection changes
noItemsLabel	string	-	Text to show when no items are available
placeholder	string	-	Placeholder text for the input
initialValue	string[]	-	Initial selected values
readonly	boolean	-	Whether the combobox is readonly
shouldFilter	boolean	-	Whether to filter items based on search
onSearch	(search: string) => void	-	Callback when search input changes
searchPlaceholder	string	Search options	Placeholder for search input
initialSearch	string	-	Initial search value
isLoading	boolean	-	Whether to show loading state
className	string	-	Additional CSS classes

Example Usage

import { ComboboxMultiSelect } from "@/components/combobox-multiselect";

const items = [
  { label: "React", value: "react" },
  { label: "Vue", value: "vue" },
  { label: "Angular", value: "angular" },
  { label: "Svelte", value: "svelte" },
];

function MyComponent() {
  const [values, setValues] = useState<string[]>([]);

  return (
    <ComboboxMultiSelect
      items={items}
      onChange={setValues}
      placeholder="Select frameworks"
      noItemsLabel="No frameworks found"
      searchPlaceholder="Search frameworks..."
      onSearch={(search) => console.log("Searching:", search)}
    />
  );
}