Kumo

@cloudflare/kumo

Combobox

A searchable select component that allows users to filter and select from a list of options.

<Combobox
  initialItems={[
    { id: "bug", value: "bug" },
    { id: "docs", value: "documentation" },
    { id: "enhancement", value: "enhancement" },
  ]}
  placeholder="Select an issue..."
/>

Installation

import { Combobox } from "~/components/combobox/combobox";

Usage

import { Combobox } from "~/components/combobox/combobox";

export default function Example() {
  return (
    <Combobox
      initialItems={[
        { id: "1", value: "Option 1" },
        { id: "2", value: "Option 2" },
      ]}
      placeholder="Select..."
    />
  );
}

Examples

Basic Combobox

<Combobox
  initialItems={[
    { id: "bug", value: "bug" },
    { id: "docs", value: "documentation" },
    { id: "enhancement", value: "enhancement" },
    { id: "help-wanted", value: "help wanted" },
    { id: "good-first-issue", value: "good first issue" },
  ]}
  placeholder="Select an issue..."
/>

With Create Option

<Combobox
  initialItems={[
    { id: "bug", value: "bug" },
    { id: "docs", value: "documentation" },
  ]}
  onCreate={(v) => console.log(`Created ${v}`)}
  placeholder="Select or create..."
/>

API Reference

PropTypeDefault
initialItemsArray<{ id: string; value: string }>[]
placeholderstringundefined
onCreate(value: string) => voidundefined