Combobox

Installation

Complete project setup first. Your configuration must select react/base and include your Design System ID.

pnpm exec frontfriend download combobox -f react --primitive base

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import {
  Combobox,
  ComboboxInput,
  ComboboxContent,
  ComboboxList,
  ComboboxItem,
} from "@/components/ui/combobox";
import * as React from "react";
export default function ComboboxExample() {
  const [value, setValue] = React.useState("option");
  return (
    <Combobox
      value={value}
      onValueChange={(next) => setValue(next ?? "")}
      disabled={false}
    >
      <ComboboxInput
        placeholder="Search..."
        disabled={false}
        showClear={false}
      />
      <ComboboxContent>
        <ComboboxList>
          <ComboboxItem value="option">Option 1</ComboboxItem>
          <ComboboxItem value="option2">Option 2</ComboboxItem>
          <ComboboxItem value="option3">Option 3</ComboboxItem>
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
}

Examples

Default

import {
  Combobox,
  ComboboxInput,
  ComboboxContent,
  ComboboxList,
  ComboboxItem,
} from "@/components/ui/combobox";
<Combobox defaultValue="option">
  <ComboboxInput
    placeholder="Search..."
    disabled={false}
    showClear={false}
  />
  <ComboboxContent>
    <ComboboxList>
      <ComboboxItem value="option">Option 1</ComboboxItem>
      <ComboboxItem value="option2">Option 2</ComboboxItem>
      <ComboboxItem value="option3">Option 3</ComboboxItem>
    </ComboboxList>
  </ComboboxContent>
</Combobox>;

Clearable

import {
  Combobox,
  ComboboxInput,
  ComboboxContent,
  ComboboxList,
  ComboboxItem,
} from "@/components/ui/combobox";
<Combobox defaultValue="option">
  <ComboboxInput
    placeholder="Search..."
    disabled={false}
    showClear
  />
  <ComboboxContent>
    <ComboboxList>
      <ComboboxItem value="option">Option 1</ComboboxItem>
      <ComboboxItem value="option2">Option 2</ComboboxItem>
      <ComboboxItem value="option3">Option 3</ComboboxItem>
    </ComboboxList>
  </ComboboxContent>
</Combobox>;

Disabled

import {
  Combobox,
  ComboboxInput,
  ComboboxContent,
  ComboboxList,
  ComboboxItem,
} from "@/components/ui/combobox";
<Combobox defaultValue="option">
  <ComboboxInput
    placeholder="Search..."
    disabled
    showClear={false}
  />
  <ComboboxContent>
    <ComboboxList>
      <ComboboxItem value="option">Option 1</ComboboxItem>
      <ComboboxItem value="option2">Option 2</ComboboxItem>
      <ComboboxItem value="option3">Option 3</ComboboxItem>
    </ComboboxList>
  </ComboboxContent>
</Combobox>;

Grouped

import {
  Combobox,
  ComboboxInput,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxList,
  ComboboxGroup,
  ComboboxLabel,
  ComboboxItem,
  ComboboxSeparator,
} from "@/components/ui/combobox";
<Combobox>
  <ComboboxInput placeholder="Search..." />
  <ComboboxContent>
    <ComboboxEmpty>No option found.</ComboboxEmpty>
    <ComboboxList>
      <ComboboxGroup>
        <ComboboxLabel>Group</ComboboxLabel>
        <ComboboxItem value="option">Option 1</ComboboxItem>
        <ComboboxItem value="option2">Option 2</ComboboxItem>
      </ComboboxGroup>
      <ComboboxSeparator />
      <ComboboxGroup>
        <ComboboxLabel>Other</ComboboxLabel>
        <ComboboxItem value="option3">Option 3</ComboboxItem>
      </ComboboxGroup>
    </ComboboxList>
  </ComboboxContent>
</Combobox>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Base UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.