Select

shadow

The Select element extends the capabilities of the standard HTML select element to provide an enhanced user experience. It supports both single and multiple option selection using the multiple attribute. It offers advanced features such as clearable content with the clearable attribute, searching through options with find, and lazy loading to optimize performance with the lazy attribute. When multiple options are selected, the selected items are displayed as chips with a configurable maximum number of items displayed. The component also supports dynamic loading of options from external sources via the Options element.

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.

Lazy loading

Adding the lazy attribute will load options only when needed. This can be useful for large amounts of options or when loading from external sources.

Find

Adding the find attribute displays an input field that allows the user to search for options in the list. The user can enter text and the list is automatically filtered according to the text entered.

Lazy search

By combining the lazy and find attributes, options are only loaded when the user starts typing in the input field. This can be useful for large amounts of options or when loading from external sources.

Attributes and Properties

value

Description	The value or array of values of the selected options.
Attribute	value
Type	string ｜ array
Default	undefined

label

Description	Text label for the select component.
Attribute	label
Type	string
Default	undefined

placeholder

Description	The placeholder text displayed in the component when no option is selected.
Attribute	placeholder
Type	string
Default	undefined

multiple

Description	If set, it allows you to select multiple options at once.
Attribute	multiple
Type	boolean
Default	false

disabled

Description	If set, the select component is disabled and cannot be interacted with.
Attribute	disabled
Type	boolean
Default	false

clearable

Description	If set, adds a button to clear the selection.
Attribute	clearable
Type	boolean
Default	false

maxOptions

Description	The maximum number of options that can be displayed in case of multiple selection.
Attribute	max-options
Type	number
Default	1

maxHeight

Description	The maximum height of the drop-down list of options.
Attribute	max-height
Type	string
Default	undefined

find

Description	If set, adds a search box to filter the options.
Attribute	find
Type	boolean
Default	false

lazy

Description	If set, the options are only loaded when you click select.
Attribute	lazy
Type	boolean
Default	false

Option

Description	Variant of the appearance of the component. The options are 'default' or 'standard'.
Attribute	Option
Type	string
Default	default

trigger

Description	The type of trigger to display the drop-down list. Default 'click'.
Attribute	trigger
Type	string
Default	click

placement

Description	The location of the drop-down list relative to the select component.
Attribute	placement
Type	string
Default	bottom-start

Events

Name	Description
wje-select:change	It is emitted when the selection is changed.

Methods

addOption

Description	Adds an option to the select element.
Signature	(optionData: any, silent?: boolean, map?: { value: string; text: string; }) => void

addOptions

Description	Adds options to the select element.
Signature	(optionsData: Array ｜ object, silent?: boolean, map?: { value: string; text: string; }) => void

selectOption

Description	Selects the option with the specified value.
Signature	(value: string, silent?: boolean) => void

selectOptions

Description	Selects one or more options in the select element.
Signature	(values: Array｜any, silent?: boolean) => void

getSelected

Description	Returns the selected options.
Signature	() => Array

getAllOptions

Description	Returns all options as HTML.
Signature	() => NodeList

getSelectedOptions

Description	Returns the selected options as HTML.
Signature	() => NodeList

CSS Shadow Parts

Name	Description
native	Native Selector Wrapper.
input	Input field.
clear	Delete button.
label	Marking element.
input-wrapper	Input field wrapper.
options-wrapper	A wrapper of possibilities.
find	Search input field.
popup	Popup element.

CSS Custom Properties

Name	Description
--wje-select-border-width	Specifies the width of the border around the select component. Accepts any valid CSS length unit (e.g. px, rem, em).
--wje-select-border-style	Defines the border style for the select component. It accepts standard CSS border styles such as solid, dashed or dotted.
--wje-select-border-color	Sets the border color for the select component. Accepts any valid CSS color value, including variable colors, named colors, and hexadecimal values.
--wje-select-options-border-width	Specifies the border width for the select drop-down list of options. Accepts any valid CSS length unit.
--wje-select-options-border-style	Defines the border style for the select drop-down list of options. Inherits from a defined CSS variable for consistency.
--wje-select-options-border-color	Sets the border color for the drop-down list of select options. Accepts any valid CSS color value.
--wje-select-background	Specifies the background color of the select component. Accepts any valid CSS color value.
--wje-select-line-height	Defines the line height for the text in the select component. Accepts any valid CSS length value, ensuring consistent vertical alignment.
--wje-select-color	Sets the text color for the select component. Accepts any valid CSS color value.
--wje-select-border-radius	Specifies the edge radius for the select component. Specifies corner rounding and accepts any valid CSS length unit or variable.
--wje-select-margin-bottom	Sets the bottom margin for the select component.

Slots

Name	Description
``	The default slot for the selects options.
anchor	Slot for anchoring element.
arrow	Slot for drop-down list arrow.
start	Slot for placing content at the top of the component.
end	Slot for placing contents on the end of the component.