Searchable single-select

A Combobox that filters a static option list as you type and selects one value. The searchable alternative to Select for longer lists.

Combobox

Preview

Source

apps/docs/app/recipes/combobox-basic/recipe.tsx

'use client';

import { useState } from 'react';
import { Combobox, type ComboboxOption } from '@hey-mike/tungsten';

const TIMEZONES: ComboboxOption[] = [
  { id: 'utc', label: 'UTC' },
  { id: 'la', label: 'America/Los_Angeles' },
  { id: 'ny', label: 'America/New_York' },
  { id: 'london', label: 'Europe/London' },
  { id: 'tokyo', label: 'Asia/Tokyo' },
  { id: 'syd', label: 'Australia/Sydney' },
];

export default function ComboboxBasicRecipe() {
  const [key, setKey] = useState<ComboboxOption['id'] | null>('la');
  return (
    <div className="w-72">
      <Combobox label="Timezone" options={TIMEZONES} selectedKey={key} onSelectionChange={setKey} placeholder="Search…" />
    </div>
  );
}

'use client';

import { useState } from 'react';
import { Combobox, type ComboboxOption } from '@hey-mike/tungsten';

const TIMEZONES: ComboboxOption[] = [
  { id: 'utc', label: 'UTC' },
  { id: 'la', label: 'America/Los_Angeles' },
  { id: 'ny', label: 'America/New_York' },
  { id: 'london', label: 'Europe/London' },
  { id: 'tokyo', label: 'Asia/Tokyo' },
  { id: 'syd', label: 'Australia/Sydney' },
];

export default function ComboboxBasicRecipe() {
  const [key, setKey] = useState<ComboboxOption['id'] | null>('la');
  return (
    <div className="w-72">
      <Combobox label="Timezone" options={TIMEZONES} selectedKey={key} onSelectionChange={setKey} placeholder="Search…" />
    </div>
  );
}