Combobox

'use client';

import { Field } from '@/components/panelui/field';
import { Combobox } from '@/components/panelui/combobox';
import { useState } from 'react';

const FRAMEWORKS = [
  { value: 'expo', label: 'Expo' },
  { value: 'react-native', label: 'React Native' },
  { value: 'next', label: 'Next.js' },
  { value: 'remix', label: 'Remix' },
  { value: 'astro', label: 'Astro' },
  { value: 'sveltekit', label: 'SvelteKit' },
];

export default function ComboboxOverview() {
  const [framework, setFramework] = useState<string | undefined>();

  return (
    <Field className="w-full max-w-xs">
      <Field.Label>Framework</Field.Label>
      <Combobox
        value={framework}
        onValueChange={setFramework}
        placeholder="Search frameworks"
        clearable
      >
        {FRAMEWORKS.map((framework) => (
          <Combobox.Item key={framework.value} value={framework.value} label={framework.label} />
        ))}
      </Combobox>
      <Field.Description>
        {framework ? `Building with ${FRAMEWORKS.find((item) => item.value === framework)?.label}.` : 'Pick one to continue.'}
      </Field.Description>
    </Field>
  );
}

'use client';

import { Combobox } from '@/components/panelui/combobox';

export default function ComboboxGrouped() {
  return (
    <div className="w-full max-w-xs">
      <Combobox placeholder="Search frameworks" openOnFocus>
        <Combobox.Group label="Native">
          <Combobox.Item value="expo" label="Expo" />
          <Combobox.Item value="react-native" label="React Native" />
        </Combobox.Group>
        <Combobox.Group label="Web">
          <Combobox.Item value="next" label="Next.js" />
          <Combobox.Item value="remix" label="Remix" />
          <Combobox.Item value="astro" label="Astro" />
          <Combobox.Item value="sveltekit" label="SvelteKit" />
        </Combobox.Group>
      </Combobox>
    </div>
  );
}

'use client';

import { Field } from '@/components/panelui/field';
import { Combobox } from '@/components/panelui/combobox';
import { useState } from 'react';

const FRAMEWORKS = [
  { value: 'expo', label: 'Expo' },
  { value: 'react-native', label: 'React Native' },
  { value: 'next', label: 'Next.js' },
  { value: 'remix', label: 'Remix' },
  { value: 'astro', label: 'Astro' },
  { value: 'sveltekit', label: 'SvelteKit' },
];

export default function ComboboxMultiple() {
  const [picked, setPicked] = useState<string[]>(['expo']);

  return (
    <Field className="w-full max-w-sm">
      <Field.Label>Frameworks</Field.Label>
      <Combobox
        mode="multiple"
        value={picked}
        onValueChange={setPicked}
        placeholder="Add a framework"
        clearable
      >
        {FRAMEWORKS.map((framework) => (
          <Combobox.Item key={framework.value} value={framework.value} label={framework.label} />
        ))}
      </Combobox>
      <Field.Description>
        {picked.length === 0 ? 'Nothing picked yet.' : `${picked.length} picked. The list stays open between picks.`}
      </Field.Description>
    </Field>
  );
}

'use client';

import { Field } from '@/components/panelui/field';
import { Combobox } from '@/components/panelui/combobox';
import { useState } from 'react';

const SUGGESTIONS = ['design', 'engineering', 'research', 'growth', 'support', 'operations'];

export default function ComboboxCustom() {
  const [tags, setTags] = useState<string[]>(['design', 'engineering']);

  return (
    <Field className="w-full max-w-sm">
      <Field.Label>Tags</Field.Label>
      <Combobox
        mode="multiple"
        value={tags}
        onValueChange={setTags}
        allowCustomValue
        placeholder="Add a tag"
        clearable
      >
        {SUGGESTIONS.map((tag) => (
          <Combobox.Item key={tag} value={tag} label={tag} />
        ))}
      </Combobox>
      <Field.Description>
        Type a tag that is not listed and press Enter to add it.
      </Field.Description>
    </Field>
  );
}

'use client';

import { Field } from '@/components/panelui/field';
import { Combobox } from '@/components/panelui/combobox';
import { useEffect, useState } from 'react';

const CITIES = [
  { value: 'lisbon', label: 'Lisbon' },
  { value: 'berlin', label: 'Berlin' },
  { value: 'helsinki', label: 'Helsinki' },
  { value: 'bogota', label: 'Bogotá' },
  { value: 'toronto', label: 'Toronto' },
  { value: 'vancouver', label: 'Vancouver' },
  { value: 'dubai', label: 'Dubai' },
  { value: 'singapore', label: 'Singapore' },
  { value: 'seoul', label: 'Seoul' },
];

/** Stands in for a search request that takes a moment. */
function useCitySearch(query: string) {
  const [state, setState] = useState({ loading: false, results: CITIES });
  useEffect(() => {
    setState((current) => ({ ...current, loading: true }));
    const timer = setTimeout(() => {
      const needle = query.trim().toLowerCase();
      setState({
        loading: false,
        results: needle ? CITIES.filter((city) => city.label.toLowerCase().includes(needle)) : CITIES,
      });
    }, 400);
    return () => clearTimeout(timer);
  }, [query]);
  return state;
}

export default function ComboboxAsync() {
  const [query, setQuery] = useState('');
  const [city, setCity] = useState<string | undefined>();
  const { loading, results } = useCitySearch(query);

  return (
    <Field className="w-full max-w-xs">
      <Field.Label>City</Field.Label>
      <Combobox
        value={city}
        onValueChange={setCity}
        inputValue={query}
        onInputValueChange={setQuery}
        filter={false}
        loading={loading}
        loadingMessage="Looking up cities"
        emptyMessage="No city by that name"
        placeholder="Search cities"
        clearable
      >
        {results.map((result) => (
          <Combobox.Item key={result.value} value={result.value} label={result.label} />
        ))}
      </Combobox>
      <Field.Description>The server does the matching; the field only shows what came back.</Field.Description>
    </Field>
  );
}

'use client';

import { Combobox } from '@/components/panelui/combobox';

export default function ComboboxInline() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <Combobox presentation="inline" placeholder="Search frameworks">
        <Combobox.Item value="expo" label="Expo" />
        <Combobox.Item value="react-native" label="React Native" />
        <Combobox.Item value="next" label="Next.js" />
        <Combobox.Item value="remix" label="Remix" />
      </Combobox>
      <p className="text-xs text-muted-foreground">The list takes its place in the page instead of covering it.</p>
    </div>
  );
}