Select

An accessible dropdown for choosing a single value from a list. Animated open/close, keyboard-navigable, and fully styled to the bloom palette.

Installation

npm install @bloomkit/react

Usage

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  SelectSeparator,
} from "@bloomkit/react";
 
<Select>
  <SelectTrigger>
    <SelectValue placeholder="Pick a mood" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="calm">Calm</SelectItem>
    <SelectItem value="focused">Focused</SelectItem>
    <SelectSeparator />
    <SelectItem value="energized">Energized</SelectItem>
  </SelectContent>
</Select>

Controlled

const [value, setValue] = useState("calm");
 
<Select value={value} onValueChange={setValue}>
  <SelectTrigger>
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="calm">Calm</SelectItem>
    <SelectItem value="focused">Focused</SelectItem>
  </SelectContent>
</Select>

Default value

<Select defaultValue="focused">
  <SelectTrigger>
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="calm">Calm</SelectItem>
    <SelectItem value="focused">Focused</SelectItem>
  </SelectContent>
</Select>

Disabled

<Select disabled>
  <SelectTrigger>
    <SelectValue placeholder="Unavailable" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="a">Option A</SelectItem>
  </SelectContent>
</Select>

Props

Select

Prop	Type	Default	Description
value	string	—	Controlled selected value
defaultValue	string	—	Initial selected value (uncontrolled)
onValueChange	(value: string) => void	—	Called when the selected value changes
disabled	boolean	false	Disables the entire select

SelectTrigger

Prop	Type	Default	Description
className	string	""	Additional Tailwind classes for the trigger button
children	ReactNode	—	Typically a SelectValue

SelectValue

Prop	Type	Default	Description
placeholder	string	—	Text shown when no value is selected

SelectContent

Prop	Type	Default	Description
className	string	""	Additional Tailwind classes for the dropdown panel
children	ReactNode	—	SelectItem and SelectSeparator elements

SelectItem

Prop	Type	Default	Description
value	string	—	The value this item represents
disabled	boolean	false	Disables this specific option
children	ReactNode	—	The option label

SelectSeparator

Prop	Type	Default	Description
className	string	""	Additional Tailwind classes for the divider