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

Bun UI

Select

Source

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

Choose a programming language

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.

Technology Stack

Controlled

CSS Framework

You selected: tailwind

Disabled

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

Disabled Select

Subscription Plan

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.

Country

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.

Custom Styled Select

Props

Select

Prop	Type	Default	Description
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

Prop	Type	Default	Description
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

Prop	Type	Default	Description
classes	`SelectItemClasses`	-

SelectItemClasses

Prop	Type	Default	Description
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.

Radio Group Skeleton