Wensity

Combobox

A searchable combobox for forms, filters, and async choices.

comboboxautocompletesearchformfieldmulti selectasynccreatabledropdown
Loading preview...

Examples

Practical examples and common states for the same installable component.

Async

Load or filter options from an external source.

examples/combobox-async.tsx
"use client";


import * as React from "react";
import { Combobox } from "@/components/wensity/combobox";


const frameworkOptions = [
  { value: "nextjs", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "sveltekit", label: "SvelteKit" },
];


export function ComboboxAsync() {
  const [query, setQuery] = React.useState("");
  const [loading, setLoading] = React.useState(false);
  const [options, setOptions] = React.useState(frameworkOptions);


  const handleSearchChange = React.useCallback(
    (nextQuery: string) => {
      setQuery(nextQuery);
      if (nextQuery !== query) setLoading(true);
    },
    [query],
  );


  React.useEffect(() => {
    const timeout = window.setTimeout(() => {
      setOptions(
        frameworkOptions.filter((option) =>
          option.label.toLowerCase().includes(query.toLowerCase()),
        ),
      );
      setLoading(false);
    }, 400);
    return () => window.clearTimeout(timeout);
  }, [query]);


  return (
    <Combobox
      label="Framework"
      placeholder="Search frameworks…"
      options={options}
      loading={loading}
      filter={false}
      onSearchChange={handleSearchChange}
    />
  );
}

Creatable

Create a new option when nothing matches the query.

examples/combobox-creatable.tsx
"use client";


import * as React from "react";
import { Combobox } from "@/components/wensity/combobox";


export function ComboboxCreatable() {
  const [options, setOptions] = React.useState([
    { value: "design", label: "Design" },
    { value: "engineering", label: "Engineering" },
  ]);


  return (
    <Combobox
      multiple
      creatable
      label="Teams"
      placeholder="Search or create…"
      options={options}
      onCreateOption={(input) => {
        const created = {
          value: input.toLowerCase().replace(/\s+/g, "-"),
          label: input,
        };
        setOptions((current) => [...current, created]);
        return created;
      }}
    />
  );
}