Select

The Select component renders a Bootstrap-styled dropdown control for selecting one or more options.

It supports single and multiple selection, controlled and uncontrolled values, custom sizing, disabled and required states, visible option lists, and all utility props inherited from Prime.

Options are defined using the Select.Option subcomponent.

Import

import { Form } from "@promethey/bsui";

Note

Select inherits all utility props supported by the Prime component, including spacing, typography, colors, borders, sizing, positioning, and other Bootstrap utility APIs.

Basic usage

Use Select.Option to define the available options.

Selected option

Use the selected prop on Select.Option to define the initially selected option.

For controlled selects, use the value prop on Select instead.

Size

Use the size prop to control the visual size of the select.

Supported values are:

• sm — small
• lg — large

Small

Large

Controlled

Use value and onChange to control the selected value with React state.

Uncontrolled

Use defaultValue when the select should manage its own state.

Multiple selection

Use the multiple prop to allow selecting multiple options.

For a multiple select, value and defaultValue can contain an array of strings.

Visible options

Use visibleOptions to render the select as a list box with multiple visible options.

visibleOptions controls the native size attribute of the underlying <select> element.

Disabled

Use disabled to prevent user interaction.

Required

Use required when the user must select a value before submitting a form.

Form example

Select can be combined with Label and other BSUI form components.

Utility props

All utility props provided by Prime are supported.

API

Select

Prop	Type	Default	Description
children	ReactNode	—	Select options rendered inside the control.
size	"sm" | "lg"	null	Controls the visual size of the select.
value	string | string[]	null	Controls the currently selected value or values.
defaultValue	string | string[]	null	Sets the initial selected value or values.
multiple	boolean	false	Allows multiple options to be selected.
disabled	boolean	false	Prevents user interaction.
required	boolean	false	Requires a value before form submission.
autoFocus	boolean	false	Automatically focuses the select when mounted.
name	string	null	Form field name.
visibleOptions	number	0	Number of visible options when rendered as a list box.
onChange	function	null	Called when the selected value changes.
onFocus	function	null	Called when the select receives focus.
onBlur	function	null	Called when the select loses focus.
className	string | object | string[]	null	Additional class names applied to the select.
style	object	null	Inline styles applied to the select.

Select also supports all props provided by Prime.

Select.Option

Select.Option represents an individual selectable option within Select.

Prop	Type	Default	Description
children	ReactNode	—	Content displayed for the option.
value	string | string[]	—	Value submitted when the option is selected.
selected	boolean	false	Marks the option as selected by default.
className	string | object | string[]	null	Additional class names applied to the option.
style	object	null	Inline styles applied to the option.

Select.Option also supports the props provided by Prime.