Select

import { Select } from 'tuimorphic';

<Select
  placeholder="Select a country"
  options={[
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' },
    { value: 'ca', label: 'Canada' },
  ]}
/>

interface SelectOption {
  value: string;
  label: string;
  disabled?: boolean;
}

<Select
  label="Country"
  placeholder="Select a country"
  options={countries}
/>

<Select
  label="Country (Disabled)"
  placeholder="Select a country"
  options={countries}
  disabled
/>

<Select
  label="Select Plan"
  placeholder="Choose a plan"
  options={[
    { value: 'free', label: 'Free Plan' },
    { value: 'basic', label: 'Basic Plan' },
    { value: 'pro', label: 'Pro Plan', disabled: true },
    { value: 'enterprise', label: 'Enterprise Plan', disabled: true },
  ]}
/>

const [value, setValue] = useState('');
 
<Select
  label="Country"
  placeholder="Select a country"
  options={countries}
  value={value}
  onValueChange={setValue}
/>