ComboBox

Forms 13

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, Header, Input, Label, ListBox, Separator} from "@/components/ui/heroui-combo-box";

export default function WithSectionsDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
      <ComboBox className="w-[256px]">
        <Label>Country</Label>
        <ComboBox.InputGroup>
          <Input placeholder="Search countries..." />
          <ComboBox.Trigger />
        </ComboBox.InputGroup>
        <ComboBox.Popover>
          <ListBox>
            <ListBox.Section>
              <Header>North America</Header>
              <ListBox.Item id="usa" textValue="United States">United States<ListBox.ItemIndicator /></ListBox.Item>
              <ListBox.Item id="canada" textValue="Canada">Canada<ListBox.ItemIndicator /></ListBox.Item>
              <ListBox.Item id="mexico" textValue="Mexico">Mexico<ListBox.ItemIndicator /></ListBox.Item>
            </ListBox.Section>
            <Separator />
            <ListBox.Section>
              <Header>Europe</Header>
              <ListBox.Item id="uk" textValue="United Kingdom">United Kingdom<ListBox.ItemIndicator /></ListBox.Item>
              <ListBox.Item id="france" textValue="France">France<ListBox.ItemIndicator /></ListBox.Item>
              <ListBox.Item id="germany" textValue="Germany">Germany<ListBox.ItemIndicator /></ListBox.Item>
              <ListBox.Item id="spain" textValue="Spain">Spain<ListBox.ItemIndicator /></ListBox.Item>
              <ListBox.Item id="italy" textValue="Italy">Italy<ListBox.ItemIndicator /></ListBox.Item>
            </ListBox.Section>
            <Separator />
            <ListBox.Section>
              <Header>Asia</Header>
              <ListBox.Item id="japan" textValue="Japan">Japan<ListBox.ItemIndicator /></ListBox.Item>
              <ListBox.Item id="china" textValue="China">China<ListBox.ItemIndicator /></ListBox.Item>
              <ListBox.Item id="india" textValue="India">India<ListBox.ItemIndicator /></ListBox.Item>
              <ListBox.Item id="south-korea" textValue="South Korea">South Korea<ListBox.ItemIndicator /></ListBox.Item>
            </ListBox.Section>
          </ListBox>
        </ComboBox.Popover>
      </ComboBox>
    </div>
  );
}

export { WithSectionsDemo };