snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/registry/bases/base/examples/native-select-example.tsx

@@ -0,0 +1,129 @@
+import {
+  Example,
+  ExampleWrapper,
+} from "@/registry/bases/base/components/example"
+import {
+  Field,
+  FieldDescription,
+  FieldLabel,
+} from "@/registry/bases/base/ui/field"
+import {
+  NativeSelect,
+  NativeSelectOptGroup,
+  NativeSelectOption,
+} from "@/registry/bases/base/ui/native-select"
+
+export default function NativeSelectExample() {
+  return (
+    <ExampleWrapper>
+      <NativeSelectBasic />
+      <NativeSelectWithGroups />
+      <NativeSelectSizes />
+      <NativeSelectWithField />
+      <NativeSelectDisabled />
+      <NativeSelectInvalid />
+    </ExampleWrapper>
+  )
+}
+
+function NativeSelectBasic() {
+  return (
+    <Example title="Basic">
+      <NativeSelect>
+        <NativeSelectOption value="">Select a fruit</NativeSelectOption>
+        <NativeSelectOption value="apple">Apple</NativeSelectOption>
+        <NativeSelectOption value="banana">Banana</NativeSelectOption>
+        <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
+        <NativeSelectOption value="grapes" disabled>
+          Grapes
+        </NativeSelectOption>
+        <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption>
+      </NativeSelect>
+    </Example>
+  )
+}
+
+function NativeSelectWithGroups() {
+  return (
+    <Example title="With Groups">
+      <NativeSelect>
+        <NativeSelectOption value="">Select a food</NativeSelectOption>
+        <NativeSelectOptGroup label="Fruits">
+          <NativeSelectOption value="apple">Apple</NativeSelectOption>
+          <NativeSelectOption value="banana">Banana</NativeSelectOption>
+          <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
+        </NativeSelectOptGroup>
+        <NativeSelectOptGroup label="Vegetables">
+          <NativeSelectOption value="carrot">Carrot</NativeSelectOption>
+          <NativeSelectOption value="broccoli">Broccoli</NativeSelectOption>
+          <NativeSelectOption value="spinach">Spinach</NativeSelectOption>
+        </NativeSelectOptGroup>
+      </NativeSelect>
+    </Example>
+  )
+}
+
+function NativeSelectSizes() {
+  return (
+    <Example title="Sizes">
+      <div className="flex flex-col gap-4">
+        <NativeSelect size="sm">
+          <NativeSelectOption value="">Select a fruit</NativeSelectOption>
+          <NativeSelectOption value="apple">Apple</NativeSelectOption>
+          <NativeSelectOption value="banana">Banana</NativeSelectOption>
+          <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
+        </NativeSelect>
+        <NativeSelect size="default">
+          <NativeSelectOption value="">Select a fruit</NativeSelectOption>
+          <NativeSelectOption value="apple">Apple</NativeSelectOption>
+          <NativeSelectOption value="banana">Banana</NativeSelectOption>
+          <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
+        </NativeSelect>
+      </div>
+    </Example>
+  )
+}
+
+function NativeSelectWithField() {
+  return (
+    <Example title="With Field">
+      <Field>
+        <FieldLabel htmlFor="native-select-country">Country</FieldLabel>
+        <NativeSelect id="native-select-country">
+          <NativeSelectOption value="">Select a country</NativeSelectOption>
+          <NativeSelectOption value="us">United States</NativeSelectOption>
+          <NativeSelectOption value="uk">United Kingdom</NativeSelectOption>
+          <NativeSelectOption value="ca">Canada</NativeSelectOption>
+          <NativeSelectOption value="au">Australia</NativeSelectOption>
+        </NativeSelect>
+        <FieldDescription>Select your country of residence.</FieldDescription>
+      </Field>
+    </Example>
+  )
+}
+
+function NativeSelectDisabled() {
+  return (
+    <Example title="Disabled">
+      <NativeSelect disabled>
+        <NativeSelectOption value="">Disabled</NativeSelectOption>
+        <NativeSelectOption value="apple">Apple</NativeSelectOption>
+        <NativeSelectOption value="banana">Banana</NativeSelectOption>
+        <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
+      </NativeSelect>
+    </Example>
+  )
+}
+
+function NativeSelectInvalid() {
+  return (
+    <Example title="Invalid">
+      <NativeSelect aria-invalid="true">
+        <NativeSelectOption value="">Error state</NativeSelectOption>
+        <NativeSelectOption value="apple">Apple</NativeSelectOption>
+        <NativeSelectOption value="banana">Banana</NativeSelectOption>
+        <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
+      </NativeSelect>
+    </Example>
+  )
+}