Select

1import {
2  Select,
3  SelectContent,
4  SelectGroup,
5  SelectItem,
6  SelectLabel,
7  SelectTrigger,
8  SelectValue,
9} from "passport-ui";
10import { Label } from "passport-ui";

1<div className="w-sm">
2  <div className="meta-container">
3    <Label htmlFor="food-select">Select a food</Label>
4    <Select>
5      <SelectTrigger>
6        <SelectValue placeholder="Select a food..." />
7      </SelectTrigger>
8      <SelectContent>
9        <SelectGroup>
10          <SelectLabel>Fruits</SelectLabel>
11          <SelectItem value="apple">Apple</SelectItem>
12          <SelectItem value="banana">Banana</SelectItem>
13          <SelectItem value="blueberry">Blueberry</SelectItem>
14          <SelectItem value="grapes">Grapes</SelectItem>
15        </SelectGroup>
16        <SelectGroup>
17          <SelectLabel>Vegetables</SelectLabel>
18          <SelectItem value="carrot">Carrot</SelectItem>
19          <SelectItem value="broccoli">Broccoli</SelectItem>
20          <SelectItem value="cauliflower">Cauliflower</SelectItem>
21        </SelectGroup>
22      </SelectContent>
23    </Select>
24  </div>
25</div>