Barefoot.js
Barefoot.js
View on GitHub
Introduction
Accordion
Badge
Button
Card
Checkbox
Counter
Dialog
Dropdown
Input
Select
Switch
Tabs
Toast
Tooltip
Controlled Input
Field Arrays
Submit
Validation

Select

Displays a select dropdown for choosing from a list of options.

1<Select options={options} selectPlaceholder="Select an option..." />

#Installation

1bunx barefoot add select

#Usage

1import { Select } from '@/components/ui/select'23const options = [4  { value: 'apple', label: 'Apple' },5  { value: 'banana', label: 'Banana' },6]78export default function Page() {9  return <Select options={options} selectPlaceholder="Select a fruit..." />10}

#Examples

#Basic Select

1<Select options={options} selectPlaceholder="Select an option..." />

#Disabled

1<Select selectDisabled options={options} selectPlaceholder="Disabled select" />23// With disabled option4const options = [5  { value: 'available', label: 'Available' },6  { value: 'unavailable', label: 'Unavailable', disabled: true },7]

#Value Binding

Selected: None

1import { createSignal } from '@barefootjs/dom'23const [value, setValue] = createSignal('')45<Select6  options={options}7  selectValue={value()}8  selectPlaceholder="Select a fruit..."9  onChange={(e) => setValue(e.target.value)}10/>11<p>Selected: {value()}</p>

#Focus State

Status: Not focused

1<Select onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} />

#API Reference

PropTypeDefaultDescription
optionsSelectOption[]-Array of options to display. Each option has value, label, and optional disabled.
selectValuestring-The controlled value of the select.
selectPlaceholderstring-Placeholder text shown when no option is selected.
selectDisabledbooleanfalseWhether the select is disabled.
onChange(e: Event) => void-Event handler called when selection changes.
onFocus(e: Event) => void-Event handler called when select gains focus.
onBlur(e: Event) => void-Event handler called when select loses focus.