Select

lunar add select

import {
Select,
SelectTrigger,
SelectValue,
SelectContent,
SelectItem,
SelectGroup,
SelectLabel,
SelectSeparator,
} from '@/components/ui/select';
 
const [value, setValue] = useState('');
 
<Select value={value} onValueChange={setValue}>
<SelectTrigger>
  <SelectValue placeholder="Select an option" />
</SelectTrigger>
<SelectContent>
  <SelectItem value="option1" label="Option 1" />
  <SelectItem value="option2" label="Option 2" />
  <SelectItem value="option3" label="Option 3" />
</SelectContent>
</Select>

<Select value={value} onValueChange={setValue}>
<SelectTrigger>
  <SelectValue placeholder="Select a fruit" />
</SelectTrigger>
<SelectContent>
  <SelectGroup>
    <SelectLabel>Fruits</SelectLabel>
    <SelectItem value="apple" label="Apple" />
    <SelectItem value="banana" label="Banana" />
  </SelectGroup>
  <SelectSeparator />
  <SelectGroup>
    <SelectLabel>Vegetables</SelectLabel>
    <SelectItem value="carrot" label="Carrot" />
    <SelectItem value="broccoli" label="Broccoli" />
  </SelectGroup>
</SelectContent>
</Select>

<Select value={value} onValueChange={setValue} disabled>
{/* ... */}
</Select>