Combobox

Installation

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

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

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
      selectedKey={value}
      onSelectionChange={(next) => setValue(String(next ?? ""))}
      isDisabled={false}
    >
      <ComboboxInput
        placeholder="Search..."
        disabled={false}
        showClear={false}
      />
      <ComboboxContent>
        <ComboboxList>
          <ComboboxItem id="option">Option 1</ComboboxItem>
          <ComboboxItem id="option2">Option 2</ComboboxItem>
          <ComboboxItem id="option3">Option 3</ComboboxItem>
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
}

Examples

Default

import {
  Combobox,
  ComboboxInput,
  ComboboxContent,
  ComboboxList,
  ComboboxItem,
} from "@/components/ui/combobox";
<Combobox menuTrigger={"input" as const} defaultSelectedKey="option">
  <ComboboxInput placeholder="Search..." />
  <ComboboxContent>
    <ComboboxList>
      <ComboboxItem id="option">Option 1</ComboboxItem>
      <ComboboxItem id="option2">Option 2</ComboboxItem>
      <ComboboxItem id="option3">Option 3</ComboboxItem>
    </ComboboxList>
  </ComboboxContent>
</Combobox>;

Clearable

import {
  Combobox,
  ComboboxInput,
  ComboboxContent,
  ComboboxList,
  ComboboxItem,
} from "@/components/ui/combobox";
<Combobox menuTrigger={"input" as const} defaultSelectedKey="option">
  <ComboboxInput placeholder="Search..." showClear />
  <ComboboxContent>
    <ComboboxList>
      <ComboboxItem id="option">Option 1</ComboboxItem>
      <ComboboxItem id="option2">Option 2</ComboboxItem>
      <ComboboxItem id="option3">Option 3</ComboboxItem>
    </ComboboxList>
  </ComboboxContent>
</Combobox>;

Disabled

import {
  Combobox,
  ComboboxInput,
  ComboboxContent,
  ComboboxList,
  ComboboxItem,
} from "@/components/ui/combobox";
<Combobox menuTrigger={"input" as const} isDisabled defaultSelectedKey="option">
  <ComboboxInput placeholder="Search..." disabled />
  <ComboboxContent>
    <ComboboxList>
      <ComboboxItem id="option">Option 1</ComboboxItem>
      <ComboboxItem id="option2">Option 2</ComboboxItem>
    </ComboboxList>
  </ComboboxContent>
</Combobox>;

Grouped

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

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

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