Select

Displays a list of options for the user to pick from, triggered by a button.

placeholder

disabled

#Installation

npx @barefootjs/cli add select

#Usage

Selected: None

1"use client"23import { createSignal } from "@barefootjs/client"4import {5  Select, SelectTrigger, SelectValue,6  SelectContent, SelectItem, SelectGroup,7  SelectLabel, SelectSeparator,8} from "@/components/ui/select"910function SelectDemo() {11  const [timezone, setTimezone] = createSignal("")1213  return (14    <Select value={timezone()} onValueChange={setTimezone}>15      <SelectTrigger className="w-[280px]">16        <SelectValue placeholder="Select timezone..." />17      </SelectTrigger>18      <SelectContent>19        <SelectGroup>20          <SelectLabel>North America</SelectLabel>21          <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>22          <SelectItem value="cst">Central Standard Time (CST)</SelectItem>23          <SelectItem value="mst">Mountain Standard Time (MST)</SelectItem>24          <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>25        </SelectGroup>26        <SelectSeparator />27        <SelectGroup>28          <SelectLabel>Europe</SelectLabel>29          <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>30          <SelectItem value="cet">Central European Time (CET)</SelectItem>31        </SelectGroup>32      </SelectContent>33    </Select>34  )35}

#Examples

#Basic

Selected: None

1"use client"23import { createSignal } from "@barefootjs/client"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}

#Form

Developer Profile

Framework

Role

Experience

Summary: No selections yet

1"use client"23import { createSignal, createMemo } from "@barefootjs/client"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}

#Grouped

Selected: None

1"use client"23import { createSignal } from "@barefootjs/client"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}

#API Reference

Select

Prop	Type	Default	Description
value	string	-	The controlled value of the select.
onValueChange	(value: string) => void	-	Callback when the selected value changes.
disabled	boolean	false	Whether the select is disabled.
open	boolean	-	Controlled open state of the dropdown.
onOpenChange	(open: boolean) => void	-	Callback when the open state changes.

SelectItem

Prop	Type	Default	Description
value	string	-	The value for this item (required).
disabled	boolean	false	Whether this item is disabled.
children	Child	-	The display label for this item.