Combobox

npm install @libretexts/davis-react

import { Combobox } from '@libretexts/davis-react';
import { useState } from 'react';

const frameworks = ['React', 'Vue', 'Angular', 'Svelte', 'Solid'];

export default function Example() {
  const [value, setValue] = useState<string | null>(null);
  const [query, setQuery] = useState('');

  const filtered = query === ''
    ? frameworks
    : frameworks.filter(f => f.toLowerCase().includes(query.toLowerCase()));

  return (
    <Combobox value={value} onChange={setValue}>
      <Combobox.Label>Framework</Combobox.Label>
      <Combobox.Input
        placeholder="Search frameworks…"
        displayValue={(v) => v ?? ''}
        onChange={(e) => setQuery(e.target.value)}
      />
      <Combobox.Options>
        {filtered.length === 0 ? (
          <Combobox.Empty />
        ) : (
          filtered.map((f) => (
            <Combobox.Option key={f} value={f}>{f}</Combobox.Option>
          ))
        )}
      </Combobox.Options>
    </Combobox>
  );
}

type Framework = { id: string; name: string };

const options: Framework[] = [
  { id: 'react', name: 'React' },
  { id: 'vue', name: 'Vue' },
  { id: 'angular', name: 'Angular' },
];

const [selected, setSelected] = useState<Framework | null>(null);
const [query, setQuery] = useState('');

const filtered = query === ''
  ? options
  : options.filter(f => f.name.toLowerCase().includes(query.toLowerCase()));

<Combobox value={selected} onChange={setSelected} by="id">
  <Combobox.Label>Framework</Combobox.Label>
  <Combobox.Input
    displayValue={(f) => f?.name ?? ''}
    onChange={(e) => setQuery(e.target.value)}
  />
  <Combobox.Options>
    {filtered.map((f) => (
      <Combobox.Option key={f.id} value={f}>{f.name}</Combobox.Option>
    ))}
  </Combobox.Options>
</Combobox>

const [selected, setSelected] = useState<string[]>([]);

<Combobox value={selected} onChange={setSelected} multiple>
  <Combobox.Label>Frameworks</Combobox.Label>
  <Combobox.Input
    displayValue={(v) => (v as string[]).join(', ')}
    onChange={(e) => setQuery(e.target.value)}
  />
  <Combobox.Options>
    {filtered.map((f) => (
      <Combobox.Option key={f} value={f}>{f}</Combobox.Option>
    ))}
  </Combobox.Options>
</Combobox>

<Combobox.Options>
  <Combobox.Option value="react">React</Combobox.Option>
  <Combobox.Option value="angular" disabled>Angular (deprecated)</Combobox.Option>
  <Combobox.Option value="vue">Vue</Combobox.Option>
</Combobox.Options>

<Combobox value={value} onChange={setValue}>
  <Combobox.Label>Small</Combobox.Label>
  <Combobox.Input size="sm" displayValue={(v) => v ?? ''} onChange={handleChange} />
  <Combobox.Options>{/* ... */}</Combobox.Options>
</Combobox>

<Combobox value={value} onChange={setValue}>
  <Combobox.Label>Medium (default)</Combobox.Label>
  <Combobox.Input size="md" displayValue={(v) => v ?? ''} onChange={handleChange} />
  <Combobox.Options>{/* ... */}</Combobox.Options>
</Combobox>

<Combobox value={value} onChange={setValue}>
  <Combobox.Label>Large</Combobox.Label>
  <Combobox.Input size="lg" displayValue={(v) => v ?? ''} onChange={handleChange} />
  <Combobox.Options>{/* ... */}</Combobox.Options>
</Combobox>

<Combobox.Options>
  {filtered.length === 0 ? (
    <Combobox.Empty>No frameworks found.</Combobox.Empty>
  ) : (
    filtered.map((f) => <Combobox.Option key={f} value={f}>{f}</Combobox.Option>)
  )}
</Combobox.Options>