ComboBox

Forms 2

About

A filterable select field that lets people search, choose, and enter values from a popover list.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds ComboBox to your project and fits it to your theme.

Code

How ComboBox is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import {ComboBox, Input, Label, ListBox} from "@/components/ui/heroui-combo-box";

export default function FullWidthDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
      <div className="w-[400px] space-y-4">
        <ComboBox fullWidth>
          <Label>Favorite Animal</Label>
          <ComboBox.InputGroup>
            <Input placeholder="Search animals..." />
            <ComboBox.Trigger />
          </ComboBox.InputGroup>
          <ComboBox.Popover>
            <ListBox>
              <ListBox.Item id="aardvark" textValue="Aardvark">Aardvark<ListBox.ItemIndicator /></ListBox.Item>
              <ListBox.Item id="cat" textValue="Cat">Cat<ListBox.ItemIndicator /></ListBox.Item>
              <ListBox.Item id="dog" textValue="Dog">Dog<ListBox.ItemIndicator /></ListBox.Item>
            </ListBox>
          </ComboBox.Popover>
        </ComboBox>
      </div>
    </div>
  );
}

export { FullWidthDemo };