BwSelect| bw-select

Overview

BwSelect is a form control that allows the user to select one or more options from a list. It can be used as a single select or a multi select. Each item within the select should be a bw-option.

Usage

Default Value

123

<div style="padding-bottom: 8px;">
    <bw-select value="1">
        <bw-option value="1">1</bw-option>
        <bw-option value="2">2</bw-option>
        <bw-option value="3">3</bw-option>
    </bw-select>
</div>

Disabled

123

<div style="padding-bottom: 8px;">
    <bw-select disabled="true">
        <bw-option value="1">1</bw-option>
        <bw-option value="2">2</bw-option>
        <bw-option value="3">3</bw-option>
    </bw-select>
</div>

Label

123

<div style="padding-bottom: 8px;">
    <bw-select label="Select a value">
        <bw-option value="1">1</bw-option>
        <bw-option value="2">2</bw-option>
        <bw-option value="3">3</bw-option>
    </bw-select>
</div>

Multi Select

123

<div style="padding-bottom: 8px;">
    <bw-select multiple="true">
        <bw-option value="1">1</bw-option>
        <bw-option value="2">2</bw-option>
        <bw-option value="3">3</bw-option>
    </bw-select>
</div>

No Rows

<div style="padding-bottom: 8px;">
    <bw-select></bw-select>
</div>

Placeholder

123

<div style="padding-bottom: 8px;">
    <bw-select placeholder="value">
        <bw-option value="1">1</bw-option>
        <bw-option value="2">2</bw-option>
        <bw-option value="3">3</bw-option>
    </bw-select>
</div>

Properties

Property	Attribute	Description	Type	Default
disabled	disabled	Makes the input disabled and prevents changes	boolean	false
error	error	Shows an error icon. If a string is passed in, it will render the icon as a tooltip. Has no effect on form validation	any	undefined
interface	interface	The interface the control will be displayed on	"popover" | "sheet"	undefined
label	label	Label that goes above the input	string	undefined
multiple	multiple	Allows selecting multiple options and changes the value type to an array	boolean	false
note	note	Informational text directly below the control	string	undefined
originalValue	original-value	The default value the control will reset to in a form. If not set, will default to the inital value of the "value" property.	string | string[]	undefined
pending	pending	Shows a loading indicator	boolean	false
placeholder	placeholder	Placeholder for the input	string	undefined
readonly	readonly	Makes the input readonly and prevents changes	boolean	false
required	required	Marks it as required in a form and shows an asterisk at the end of the label	boolean	false
size	size	Size of the control	"lg" | "md" | "sm"	'sm'
success	success	Shows a success icon. Has no effect on form validation	boolean	false
value	value	The currently selected value of the controls. Will be a string aray if it's a multiselect	string | string[]	undefined

Events

Event	Description	Type
ready	Emits once when the component has completed it's initial render	CustomEvent<any>
valueChange	Emits the currently selected values whenever they change	CustomEvent<string | string[]>

Methods

checkValidity() => Promise<boolean>

Checks the validity of the select

Returns

Type: Promise<boolean>

true if the select is valid, false otherwise

reportValidity() => Promise<boolean>

Reports the validity of the select

Returns

Type: Promise<boolean>

true if the select is valid, false otherwise

setCustomValidity(message: string | null) => Promise<void>

Sets the custom validity of the select

Parameters

Name	Type	Description
message	string	- The message to set the custom validity to

Returns

Type: Promise<void>

Slots

Slot	Description
"end"	Content placed after selected value/s
"label"	The label of the select
"note"	The note of the select
"start"	Content placed before selected value/s

Shadow Parts

Part	Description
"button"	The button of the select
"main"	The main div container of the select
"popover"	The popover of the select
"sheet"	The bottom sheet of the select

CSS Custom Properties

Name	Description
--height	Height of the select
--input-color	Color of the selected value/s in the main container
--label-color	Color of the label
--padding-inline	Padding inline of the select
--placeholder-color	Placeholder color of the select

Dependencies

Depends on

• bw-badge
• bw-label
• bw-popover
• bw-bottom-sheet
• bw-divider
• bw-option
• bw-note
• bw-loading
• bw-color
• bw-icon
• bw-tooltip
• bw-button

Graph

---

© 2025 United Systems & Software - All Rights Reserved.