Native Select

1import {
2  Example,
3  ExampleWrapper,
4} from "@/registry/base-vega/components/example"
5import {
6  Field,
7  FieldDescription,
8  FieldLabel,
9} from "@/registry/base-vega/ui/field"
10import {
11  NativeSelect,
12  NativeSelectOptGroup,
13  NativeSelectOption,
14} from "@/registry/base-vega/ui/native-select"
15 
16export default function NativeSelectExample() {
17  return (
18    <ExampleWrapper>
19      <NativeSelectBasic />
20      <NativeSelectWithGroups />
21      <NativeSelectSizes />
22      <NativeSelectWithField />
23      <NativeSelectDisabled />
24      <NativeSelectInvalid />
25    </ExampleWrapper>
26  )
27}
28 
29function NativeSelectBasic() {
30  return (
31    <Example title="Basic">
32      <NativeSelect>
33        <NativeSelectOption value="">Select a fruit</NativeSelectOption>
34        <NativeSelectOption value="apple">Apple</NativeSelectOption>
35        <NativeSelectOption value="banana">Banana</NativeSelectOption>
36        <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
37        <NativeSelectOption value="grapes" disabled>
38          Grapes
39        </NativeSelectOption>
40        <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption>
41      </NativeSelect>
42    </Example>
43  )
44}
45 
46function NativeSelectWithGroups() {
47  return (
48    <Example title="With Groups">
49      <NativeSelect>
50        <NativeSelectOption value="">Select a food</NativeSelectOption>
51        <NativeSelectOptGroup label="Fruits">
52          <NativeSelectOption value="apple">Apple</NativeSelectOption>
53          <NativeSelectOption value="banana">Banana</NativeSelectOption>
54          <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
55        </NativeSelectOptGroup>
56        <NativeSelectOptGroup label="Vegetables">
57          <NativeSelectOption value="carrot">Carrot</NativeSelectOption>
58          <NativeSelectOption value="broccoli">Broccoli</NativeSelectOption>
59          <NativeSelectOption value="spinach">Spinach</NativeSelectOption>
60        </NativeSelectOptGroup>
61      </NativeSelect>
62    </Example>
63  )
64}
65 
66function NativeSelectSizes() {
67  return (
68    <Example title="Sizes">
69      <div className="flex flex-col gap-4">
70        <NativeSelect size="sm">
71          <NativeSelectOption value="">Select a fruit</NativeSelectOption>
72          <NativeSelectOption value="apple">Apple</NativeSelectOption>
73          <NativeSelectOption value="banana">Banana</NativeSelectOption>
74          <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
75        </NativeSelect>
76// … truncated