Combobox

import { useState } from 'react';
import { Combobox } from '@components-kit/react';

const setFruit = (value: string | undefined) => {
  console.log('Selected fruit:', value);
};

// Simple string options
<Combobox
  options={['apple', 'banana', 'cherry']}
  placeholder="Search fruits..."
  onValueChange={setFruit}
/>

// Labeled options with disabled items
<Combobox
  options={[
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana', disabled: true },
    { value: 'cherry', label: 'Cherry' },
  ]}
  variantName="default"
/>

// Grouped options with separator
<Combobox
  options={[
    { type: 'group', label: 'Fruits', options: ['apple', 'banana'] },
    { type: 'separator' },
    { type: 'group', label: 'Vegetables', options: ['carrot', 'celery'] },
  ]}
/>

// Controlled value
function ControlledValueExample() {
  const [selectedFruit, setSelectedFruit] = useState<string | undefined>();

  return (
    <Combobox
      options={['apple', 'banana', 'cherry']}
      value={selectedFruit}
      onValueChange={setSelectedFruit}
    />
  );
}

// Controlled input value
function ControlledInputExample() {
  const [query, setQuery] = useState('');

  return (
    <Combobox
      options={['apple', 'banana', 'cherry']}
      inputValue={query}
      onInputValueChange={setQuery}
      onValueChange={setFruit}
    />
  );
}

// Custom filter function
<Combobox
  options={['apple', 'banana', 'cherry']}
  filterFn={(option, input) =>
    option.label.toLowerCase().startsWith(input.toLowerCase())
  }
/>

import { Combobox } from "@components-kit/react";
import { useCallback, useState } from "react";

function AsyncSearch() {
  const [options, setOptions] = useState<string[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);

  const handleSearch = useCallback(async (query: string) => {
    if (!query) {
      setOptions([]);
      return;
    }
    setLoading(true);
    setError(false);
    try {
      const res = await fetch(`/api/search?q=${query}`);
      setOptions(await res.json());
    } catch {
      setError(true);
    } finally {
      setLoading(false);
    }
  }, []);

  return (
    <Combobox
      options={options}
      loading={loading}
      error={error}
      onInputValueChange={handleSearch}
      placeholder="Search..."
    />
  );
}

// String option
'apple'

// Labeled option
{ value: 'apple', label: 'Apple', disabled?: boolean }

// Group
{ type: 'group', label: 'Fruits', options: [...] }

// Separator
{ type: 'separator' }

<Combobox
  aria-label="Search for a city"
  options={cities}
  placeholder="Type to search..."
  variantName="default"
/>

<label htmlFor="city-combobox">City</label>
<Combobox
  id="city-combobox"
  options={cities}
  placeholder="Type to search..."
  variantName="default"
/>

import { useState } from "react";
import { Combobox } from "@components-kit/react";

interface User {
  id: number;
  name: string;
  email: string;
}

const users: User[] = [
  { id: 1, name: "Alice Johnson", email: "alice@example.com" },
  { id: 2, name: "Bob Smith", email: "bob@example.com" },
  { id: 3, name: "Carol Williams", email: "carol@example.com" },
];

function UserPicker() {
  const [selectedUser, setSelectedUser] = useState<User | undefined>();

  return (
    <Combobox
      options={users.map((user) => ({
        value: user,
        label: `${user.name} (${user.email})`,
      }))}
      value={selectedUser}
      onValueChange={setSelectedUser}
      getOptionValue={(user) => user.id}
      placeholder="Search users..."
      filterFn={(option, inputValue) => {
        const user = option.value;
        return (
          user.name.toLowerCase().includes(inputValue.toLowerCase()) ||
          user.email.toLowerCase().includes(inputValue.toLowerCase())
        );
      }}
    />
  );
}

<Combobox
  options={["apple", "banana", "cherry"]}
  defaultValue="banana"
  readOnly
/>

<Combobox
  options={["apple", "banana", "cherry"]}
  placement="top-start"
  placeholder="Opens upward..."
/>

<Combobox
  options={["apple", "banana", "cherry"]}
  name="fruit"
  required
  placeholder="Select a fruit..."
/>

<Combobox
  clearable
  options={["apple", "banana", "cherry"]}
  placeholder="Search fruits..."
  variantName="default"
/>

import { Combobox } from "@components-kit/react";
import { Controller, useForm } from "react-hook-form";

interface FormValues {
  city: string;
}

function CityPicker() {
  const { control, handleSubmit } = useForm<FormValues>();

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <Controller
        control={control}
        name="city"
        rules={{ required: "Please select a city" }}
        render={({ field, fieldState }) => (
          <Combobox
            options={["New York", "Los Angeles", "Chicago"]}
            value={field.value}
            onValueChange={field.onChange}
            error={!!fieldState.error}
            placeholder="Search cities..."
          />
        )}
      />
      <button type="submit">Submit</button>
    </form>
  );
}