Native Select

1import {2  NativeSelect,3  NativeSelectOption,4} from "@/components/ui/native-select"56function NativeSelectSizes() {7  return (8    <div className="flex flex-col gap-4 max-w-sm">9      <NativeSelect>10        <NativeSelectOption value="default">Default size</NativeSelectOption>11      </NativeSelect>12      <NativeSelect size="sm">13        <NativeSelectOption value="sm">Small size</NativeSelectOption>14      </NativeSelect>15    </div>16  )17}

1import {2  NativeSelect,3  NativeSelectOption,4} from "@/components/ui/native-select"56function NativeSelectDisabled() {7  return (8    <NativeSelect disabled>9      <NativeSelectOption value="disabled">Disabled</NativeSelectOption>10    </NativeSelect>11  )12}

1import {2  NativeSelect,3  NativeSelectOption,4  NativeSelectOptGroup,5} from "@/components/ui/native-select"67function NativeSelectWithOptGroup() {8  return (9    <NativeSelect>10      <NativeSelectOptGroup label="Fruits">11        <NativeSelectOption value="apple">Apple</NativeSelectOption>12        <NativeSelectOption value="banana">Banana</NativeSelectOption>13      </NativeSelectOptGroup>14      <NativeSelectOptGroup label="Vegetables">15        <NativeSelectOption value="carrot">Carrot</NativeSelectOption>16        <NativeSelectOption value="broccoli">Broccoli</NativeSelectOption>17      </NativeSelectOptGroup>18    </NativeSelect>19  )20}

1"use client"23import { createSignal } from "@barefootjs/client"4import {5  NativeSelect,6  NativeSelectOption,7} from "@/components/ui/native-select"89function NativeSelectBinding() {10  const [value, setValue] = createSignal("")1112  return (13    <div className="space-y-2">14      <NativeSelect15        value={value()}16        onChange={(e) => setValue(e.target.value)}17      >18        <NativeSelectOption value="" disabled>19          Select a fruit...20        </NativeSelectOption>21        <NativeSelectOption value="apple">Apple</NativeSelectOption>22        <NativeSelectOption value="banana">Banana</NativeSelectOption>23        <NativeSelectOption value="cherry">Cherry</NativeSelectOption>24      </NativeSelect>25      <p className="text-sm text-muted-foreground">26        Selected: {value() || "none"}27      </p>28    </div>29  )30}

1"use client"23import { createSignal } from "@barefootjs/client"4import {5  NativeSelect,6  NativeSelectOption,7} from "@/components/ui/native-select"89function NativeSelectForm() {10  const [role, setRole] = createSignal("viewer")11  const [theme, setTheme] = createSignal("system")1213  return (14    <div className="space-y-4 max-w-sm">15      <div className="space-y-2">16        <label className="text-sm font-medium">Role</label>17        <NativeSelect18          value={role()}19          onChange={(e) => setRole(e.target.value)}20        >21          <NativeSelectOption value="viewer">Viewer</NativeSelectOption>22          <NativeSelectOption value="editor">Editor</NativeSelectOption>23          <NativeSelectOption value="admin">Admin</NativeSelectOption>24        </NativeSelect>25      </div>26      <div className="space-y-2">27        <label className="text-sm font-medium">Theme</label>28        <NativeSelect29          value={theme()}30          onChange={(e) => setTheme(e.target.value)}31        >32          <NativeSelectOption value="system">System</NativeSelectOption>33          <NativeSelectOption value="light">Light</NativeSelectOption>34          <NativeSelectOption value="dark">Dark</NativeSelectOption>35        </NativeSelect>36      </div>37      <p className="text-sm text-muted-foreground">38        Role: {role()}, Theme: {theme()}39      </p>40    </div>41  )42}