Select

1"use client"23import { createSignal } from "@barefootjs/dom"4import {5  Select, SelectTrigger, SelectValue, SelectContent, SelectItem,6} from "@/components/ui/select"78function SelectBasicDemo() {9  const [value, setValue] = createSignal("")1011  return (12    <div className="space-y-3">13      <Select value={value()} onValueChange={setValue}>14        <SelectTrigger class="w-[280px]">15          <SelectValue placeholder="Select a fruit..." />16        </SelectTrigger>17        <SelectContent>18          <SelectItem value="apple">Apple</SelectItem>19          <SelectItem value="banana">Banana</SelectItem>20          <SelectItem value="blueberry" disabled>Blueberry</SelectItem>21          <SelectItem value="grape">Grape</SelectItem>22          <SelectItem value="pineapple">Pineapple</SelectItem>23        </SelectContent>24      </Select>25      <p className="text-sm text-muted-foreground">26        Selected: {value() || "None"}27      </p>28    </div>29  )30}

1"use client"23import { createSignal, createMemo } from "@barefootjs/dom"4import {5  Select, SelectTrigger, SelectValue, SelectContent, SelectItem,6} from "@/components/ui/select"78function SelectFormDemo() {9  const [framework, setFramework] = createSignal("")10  const [role, setRole] = createSignal("")11  const [experience, setExperience] = createSignal("")1213  const summary = createMemo(() => {14    const parts: string[] = []15    if (role()) parts.push(role())16    if (framework()) parts.push(`using ${framework()}`)17    if (experience()) parts.push(`with ${experience()} experience`)18    return parts.length > 0 ? parts.join(" ") : "No selections yet"19  })2021  return (22    <div className="space-y-4">23      <h4 className="text-sm font-medium">Developer Profile</h4>24      <div className="grid gap-3">25        <Select value={framework()} onValueChange={setFramework}>26          <SelectTrigger>27            <SelectValue placeholder="Select framework..." />28          </SelectTrigger>29          <SelectContent>30            <SelectItem value="Next.js">Next.js</SelectItem>31            <SelectItem value="Remix">Remix</SelectItem>32            <SelectItem value="Astro">Astro</SelectItem>33            <SelectItem value="Nuxt">Nuxt</SelectItem>34          </SelectContent>35        </Select>36        {/* ... more selects ... */}37      </div>38      <p>Summary: {summary()}</p>39    </div>40  )41}

1"use client"23import { createSignal } from "@barefootjs/dom"4import {5  Select, SelectTrigger, SelectValue, SelectContent,6  SelectItem, SelectGroup, SelectLabel, SelectSeparator,7} from "@/components/ui/select"89function SelectGroupedDemo() {10  const [timezone, setTimezone] = createSignal("")1112  return (13    <Select value={timezone()} onValueChange={setTimezone}>14      <SelectTrigger class="w-[280px]">15        <SelectValue placeholder="Select timezone..." />16      </SelectTrigger>17      <SelectContent>18        <SelectGroup>19          <SelectLabel>North America</SelectLabel>20          <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>21          <SelectItem value="cst">Central Standard Time (CST)</SelectItem>22          <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>23        </SelectGroup>24        <SelectSeparator />25        <SelectGroup>26          <SelectLabel>Europe</SelectLabel>27          <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>28          <SelectItem value="cet">Central European Time (CET)</SelectItem>29        </SelectGroup>30        <SelectSeparator />31        <SelectGroup>32          <SelectLabel>Asia</SelectLabel>33          <SelectItem value="jst">Japan Standard Time (JST)</SelectItem>34          <SelectItem value="cst_china">China Standard Time (CST)</SelectItem>35        </SelectGroup>36      </SelectContent>37    </Select>38  )39}