Select
The Select element extends the capabilities of the standard HTML select element. Supports one or more selections by adding the multiple attribute.
In addition, it offers features such as deletable selections and custom placeholder text. Visually, the component can display the selected options as chips and includes an input field and a drop-down list of options.
Basic Usage
By default, the selection allows the user to select only one option. Including the Icon element will also display the selected icon next to the option.
Selecting multiple items
Adding the multiple attribute allows the user to select multiple options.
Clearable
Adding the clearable attribute allows the user to remove all selected options by clicking on the icon.
Disabled
Adding the disabled attribute prevents the user from interacting with Select.
Dynamic list of options
Using the Options component, a dynamically generated list of options is also supported, which is asynchronously retrieved from the specified URL.
Standard
Adding the standard attribute will display the Select in the style of a standard HTML Select.
Attributes and Properties
No properties available for this component.
Events
No events available for this component.
Methods
undefined
CSS Shadow Parts
| Name | Description |
|---|---|
native | Refers to div inside an element. |
arrow | The content is placed in the wj-icon element |
CSS Custom Properties
| Name | Description |
|---|---|
--wj-select-background-color | Background colour of the element |
--wj-select-border-color | Colour of element edges |
--wj-select-border-radius | Rounding of the edges of the element |
--wj-select-border-style | Rounding style of the element |
--wj-select-border-width | Width of the edges of the element |
--wj-select-color | Element colour |
--wj-select-line-height | Element row height |
--wj-select-options-border-color | The colour of the drop-down window edges |
--wj-select-options-border-style | The style of the drop-down window borders |
--wj-select-options-border-width | Width of the drop-down window edges |
Slots
No slots available for this component.