ComboBox

import { ComboBox } from 'tuimorphic';

<ComboBox
  placeholder="Search countries..."
  options={[
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' },
    { value: 'ca', label: 'Canada' },
  ]}
/>

interface ComboBoxOption {
  value: string;
  label: string;
  description?: string;
}

<ComboBox
  label="Country"
  placeholder="Search countries..."
  options={countries}
/>

<ComboBox
  label="Country"
  placeholder="Search by name or region..."
  options={[
    { value: 'us', label: 'United States', description: 'North America' },
    { value: 'uk', label: 'United Kingdom', description: 'Europe' },
    { value: 'jp', label: 'Japan', description: 'Asia' },
  ]}
/>

<ComboBox label="Enabled" placeholder="Search..." options={options} />
<ComboBox label="Disabled" placeholder="Search..." options={options} disabled />

<ComboBox
  label="Framework"
  defaultValue="React"
  options={frameworks}
/>

const [value, setValue] = useState('');
 
<ComboBox
  label="Framework"
  placeholder="Search frameworks..."
  options={frameworks}
  value={value}
  onValueChange={setValue}
/>

const [country, setCountry] = useState('');
const [framework, setFramework] = useState('');
 
<ComboBox
  label="Country"
  placeholder="Search countries..."
  options={countries}
  value={country}
  onValueChange={setCountry}
/>
<ComboBox
  label="Favorite Framework"
  placeholder="Search frameworks..."
  options={frameworks}
  value={framework}
  onValueChange={setFramework}
/>

<ComboBox
  label="Country"
  placeholder="Type to filter 40+ countries..."
  options={allCountries}
/>