The select input component allows users to select an option from a dropdown list of options. The options are displayed when the user clicks on the select input.
Example
Provides a dropdown menu for selecting one or more options from a list.
code
<script type="module">
import '@blueprintui/components/include/select.js';
</script>
<bp-field>
<label>select</label>
<bp-select>
<bp-option value="1">Option One</bp-option>
<bp-option value="2" selected>Option Two</bp-option>
<bp-option value="3">Option Three</bp-option>
</bp-select>
<bp-field-message>message text</bp-field-message>
</bp-field>Vertical
Demonstrates the select in vertical form layout.
code
<bp-form-group layout="vertical">
<bp-field layout="vertical">
<label>label</label>
<bp-select>
<bp-option>option one</bp-option>
<bp-option>option two</bp-option>
<bp-option>option three</bp-option>
</bp-select>
<bp-field-message>message text</bp-field-message>
</bp-field>
<bp-field layout="vertical">
<label>disabled</label>
<bp-select disabled>
<bp-option>option one</bp-option>
<bp-option>option two</bp-option>
<bp-option>option three</bp-option>
</bp-select>
<bp-field-message>disabled message</bp-field-message>
</bp-field>
<bp-field layout="vertical" status="error">
<label>error</label>
<bp-select>
<bp-option>option one</bp-option>
<bp-option>option two</bp-option>
<bp-option>option three</bp-option>
</bp-select>
<bp-field-message status="error">error message</bp-field-message>
</bp-field>
<bp-field layout="vertical" status="success">
<label>success</label>
<bp-select>
<bp-option>option one</bp-option>
<bp-option>option two</bp-option>
<bp-option>option three</bp-option>
</bp-select>
<bp-field-message status="success">success message</bp-field-message>
</bp-field>
</bp-form-group>Horizontal
Demonstrates the select in horizontal form layout.
code
<bp-form-group layout="horizontal">
<bp-field layout="horizontal">
<label>label</label>
<bp-select>
<bp-option>option one</bp-option>
<bp-option>option two</bp-option>
<bp-option>option three</bp-option>
</bp-select>
<bp-field-message>message text</bp-field-message>
</bp-field>
<bp-field layout="horizontal">
<label>disabled</label>
<bp-select disabled>
<bp-option>option one</bp-option>
<bp-option>option two</bp-option>
<bp-option>option three</bp-option>
</bp-select>
<bp-field-message>disabled message</bp-field-message>
</bp-field>
<bp-field layout="horizontal" status="error">
<label>error</label>
<bp-select>
<bp-option>option one</bp-option>
<bp-option>option two</bp-option>
<bp-option>option three</bp-option>
</bp-select>
<bp-field-message status="error">error message</bp-field-message>
</bp-field>
<bp-field layout="horizontal" status="success">
<label>success</label>
<bp-select>
<bp-option>option one</bp-option>
<bp-option>option two</bp-option>
<bp-option>option three</bp-option>
</bp-select>
<bp-field-message status="success">success message</bp-field-message>
</bp-field>
</bp-form-group>Compact
Demonstrates the select in compact form layout.
code
<bp-form-group layout="compact">
<bp-field layout="compact">
<label>label</label>
<bp-select>
<bp-option>option one</bp-option>
<bp-option>option two</bp-option>
<bp-option>option three</bp-option>
</bp-select>
<bp-field-message>message text</bp-field-message>
</bp-field>
<bp-field layout="compact">
<label>disabled</label>
<bp-select disabled>
<bp-option>option one</bp-option>
<bp-option>option two</bp-option>
<bp-option>option three</bp-option>
</bp-select>
<bp-field-message>disabled message</bp-field-message>
</bp-field>
<bp-field layout="compact" status="error">
<label>error</label>
<bp-select>
<bp-option>option one</bp-option>
<bp-option>option two</bp-option>
<bp-option>option three</bp-option>
</bp-select>
<bp-field-message status="error">error message</bp-field-message>
</bp-field>
<bp-field layout="compact" status="success">
<label>success</label>
<bp-select>
<bp-option>option one</bp-option>
<bp-option>option two</bp-option>
<bp-option>option three</bp-option>
</bp-select>
<bp-field-message status="success">success message</bp-field-message>
</bp-field>
</bp-form-group>Install
NPM
// npm package
import '@blueprintui/components/include/select.js';CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/select.js/+esm';
</script>Select Input Component
Usage
The Select Input component provides a dropdown list to select a value from a set of predefined options.
Accessibility
- The currently focused option should be highlighted as the user navigates the options with the keyboard.
- The Select Input component should have a descriptive label or
aria-labelattribute if no visible label is present.
bp-select
Events
| Name | Types | Description |
|---|---|---|
input | InputEvent | occurs when the value changes |
change | InputEvent | occurs when the value changes |
Properties
| Name | Types | Description |
|---|---|---|
value | string | number | FormData | File | control value |
disabled | boolean | determines if element is mutable or focusable |
required | boolean | indicates that the user must specify a value for the input before the owning form can be submitted |
readonly | boolean | makes the element not mutable, meaning the user can not edit the control |
multiple | boolean | determines he form control accepts one or more values |
autocomplete | string | provide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field |
type | string | string specifying the type of control to render |
formNoValidate | boolean | determines if the form control is novalidate |
name | string | represents the name of the current |
pattern | string | regular expression the form control's value should match |
placeholder | string | defines a short hint to help the user with data entry when a form control has no value |
minLength | number | defines minimum number of characters |
maxLength | number | defines maximum number of characters |
min | number | defines the most negative value in the range of permitted values |
max | number | defines the greatest value in the range of permitted values |
size | number | determines number of characters |
formAssociated | boolean | |
valueAsNumber | ||
composedLabel | ||
focus | ||
reset |
Attributes
| Name | Types | Description |
|---|---|---|
value | string | number | FormData | File | control value |
disabled | boolean | determines if element is mutable or focusable |
required | boolean | indicates that the user must specify a value for the input before the owning form can be submitted |
readonly | boolean | makes the element not mutable, meaning the user can not edit the control |
multiple | boolean | determines he form control accepts one or more values |
autocomplete | string | provide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field |
type | string | string specifying the type of control to render |
formNoValidate | boolean | determines if the form control is novalidate |
pattern | string | regular expression the form control's value should match |
placeholder | string | defines a short hint to help the user with data entry when a form control has no value |
minLength | number | defines minimum number of characters |
maxLength | number | defines maximum number of characters |
min | number | defines the most negative value in the range of permitted values |
max | number | defines the greatest value in the range of permitted values |
size | number | determines number of characters |
CSS Properties
| Name | Types | Description |
|---|---|---|
--background | ||
--color | ||
--border | ||
--border-radius | ||
--outline | ||
--outline-offset | ||
--padding | ||
--font-size | ||
--line-height | ||
--height | ||
--min-width | ||
--cursor | ||
--width |
Slots
| Name | Types | Description |
|---|---|---|
default | For projecting select and label |