The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!

v0.2.49Beta

Search

Select

Source

A dropdown component for selecting a single option from a list.

Usage

Import the Select component and its related subcomponents from @bun-ui/react and use them in your project:

import { Select, SelectItem } from "@bun-ui/react"
<Select placeholder="Select an option">
  <SelectItem value="option1">Option 1</SelectItem>
  <SelectItem value="option2">Option 2</SelectItem>
  <SelectItem value="option3">Option 3</SelectItem>
</Select>

Examples

Groups and Labels

The Select component supports grouping options with labels for better organization.

Controlled

You selected: tailwind

Disabled

The Select comonent can be disable as a whole or individual items can be disabled.

Render Value

For more complex use cases, you can customize how the selected value is rendered on the select trigger element by using renderValue prop.

Customization

The Select component and its subcomponents can be customized using the classes prop. This allows you to style each part of the select component independently.

Props

Select

PropTypeDefaultDescription
classes
SelectClasses-

Custom classes for styling different parts of the select component.

className
string-

Additional CSS class name for the select trigger.

defaultValue
string-

The default value of the select input.

label
ReactNode-

The label for the select input.

menuPosition
"item-aligned" | "popper""popper"

The position of the menu relative to the trigger.

onValueChange
(value: string) => void-

Callback fired when the value changes.

placeholder
ReactNode-

The placeholder text to show when no value is selected.

renderValue
(value?: string) => ReactNode-

Custom render function for the selected value. Useful for complex value displays or when you need to show additional information.

value
string-

The value of the select input.

SelectClasses

PropTypeDefaultDescription
container
string-

Extends or overrides the styles of the wrapper element wrapping Select and label when label prop is defined.

content
string-

Extends or overrides the styles of the dropdown content container.

label
string-

Extends or overrides the styles of the label element.

trigger
string-

Extends or overrides the styles of the select trigger button.

value
string-

Extends or overrides the styles of the selected value text.

viewport
string-

Extends or overrides the styles of the scrollable viewport that contains the select items.

SelectItem

PropTypeDefaultDescription
classes
SelectItemClasses-

SelectItemClasses

PropTypeDefaultDescription
icon
string-

styles applied to the checkmark icon when item is selected.

indicator
string-

styles applied to the checkmark indicator container.

root
string-

Styles applied to the item container.

text
string-

Styles applied to the item text.