Select

1'use client';
2
3import { Select } from '@/components/ui/select';
4
5export function Default() {
6  return (
7    <div className="w-full max-w-xs">
8      <Select defaultValue="" aria-label="Select an option">
9        <option value="" disabled>
10          Select an option
11        </option>
12        <option value="1">Option 1</option>
13        <option value="2">Option 2</option>
14        <option value="3">Option 3</option>
15      </Select>
16    </div>
17  );
18}

1'use client';
2
3import { Select } from '@/components/ui/select';
4
5export function Default() {
6  return (
7    <div className="w-full max-w-xs">
8      <Select defaultValue="" aria-label="Select an option">
9        <option value="" disabled>
10          Select an option
11        </option>
12        <option value="1">Option 1</option>
13        <option value="2">Option 2</option>
14        <option value="3">Option 3</option>
15      </Select>
16    </div>
17  );
18}

1'use client';
2
3import { Select } from '@/components/ui/select';
4
5export function GroupedItems() {
6  return (
7    <div className="w-full max-w-xs">
8      <Select defaultValue="" aria-label="Select a fruit">
9        <option value="" disabled>
10          Select a fruit
11        </option>
12        <optgroup label="Citrus">
13          <option value="orange">Orange</option>
14          <option value="lemon">Lemon</option>
15          <option value="lime">Lime</option>
16        </optgroup>
17        <optgroup label="Berries">
18          <option value="strawberry">Strawberry</option>
19          <option value="blueberry">Blueberry</option>
20          <option value="raspberry">Raspberry</option>
21        </optgroup>
22      </Select>
23    </div>
24  );
25}