ComboBox

Forms 3

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 * as React from "react";
import {Button, ComboBox, FieldError, Form, Input, Label, ListBox} from "@/components/ui/heroui-combo-box";

export default function RequiredDemo() {
  const [invalid, setInvalid] = React.useState(false);

  return (
    <div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
      <Form
        className="flex w-[256px] flex-col gap-4"
        onSubmit={(event) => {
          event.preventDefault();
          const data = new FormData(event.currentTarget);
          if (!data.get("animal")) {
            setInvalid(true);
            return;
          }
          setInvalid(false);
          alert("Form submitted successfully!");
        }}
      >
        <ComboBox isRequired isInvalid={invalid} className="w-full" name="animal" onInputChange={() => setInvalid(false)} onSelectionChange={() => setInvalid(false)}>
          <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.Item id="kangaroo" textValue="Kangaroo">Kangaroo<ListBox.ItemIndicator /></ListBox.Item>
              <ListBox.Item id="panda" textValue="Panda">Panda<ListBox.ItemIndicator /></ListBox.Item>
              <ListBox.Item id="snake" textValue="Snake">Snake<ListBox.ItemIndicator /></ListBox.Item>
            </ListBox>
          </ComboBox.Popover>
          <FieldError />
        </ComboBox>
        <Button type="submit">Submit</Button>
      </Form>
    </div>
  );
}

export { RequiredDemo };