The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!
A dropdown component for selecting a single option from a list.
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>
The Select
component supports grouping options with labels for better
organization.
You selected: tailwind
The Select
comonent can be disable as a whole or individual items can be
disabled.
For more complex use cases, you can customize how the selected value is rendered on
the select trigger element by using renderValue
prop.
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.
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. |
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. |
Prop | Type | Default | Description |
---|---|---|---|
classes | 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. |