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. If the select is placed in a container with overflow: hidden, in a dialog, or in another overlay, use the portaled attribute.

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. If no options are returned, or the search does not return a match, the dropdown displays an empty status with the message No data. The text of this message is taken from the localization key wj.select.empty. To change it in the library, edit the appropriate language file in packages/translations, for example packages/translations/en-sk.js or packages/translations/en-gb.js. The translation used is selected by the lang value on the component or parent element.

export const skSk = {
    // ...
    'wj.select.empty': 'No data',
};

Portaled

Adding the portaled attribute will move the dropdown with the list of options to the portal, similar to wje-dropdown. This avoids list clipping in parents with overflow: hidden or in more complex overlay scenarios. Select still works with the original wje-option elements and also supports dynamic options from wje-options.

Standard

Adding the standard attribute will display the Select in the style of a standard HTML Select.

Long Text

Single-select mode displays the selected value in a dedicated text wrapper with ellipsis. Long option labels no longer stretch the input and stay aligned with start/end slots, the clear button, and the indicator.

When an option has a custom action in slot="end", keep the action as its own control, such as wje-button only-icon. wje-option wraps long text and keeps the end slot separate from the label.

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.

When to use

Use wje-select when the user enters a value, selects options, or performs an action on a form.

When not to use

Don't just use it as a visual decorative element without interaction. In this case, give priority to the presentation components.

Accessibility

Always link the component to the description (label/aria-label), keep keyboard control, and display a clear message on validation errors.

Recommended practices

• Keep validation rules and error states consistent across the entire form.
• For asynchronous operations, display the load status or disabled status.
• For complex forms, prefer smaller sections and immediate feedback.

Attributes and properties

active

Popis	Určuje, či je výberové menu otvorené.
Atribút	active
Typ	boolean
Predvolené	-

customErrorDisplay

Popis	Riadi validáciu alebo stavové hlášky pre voľbu custom-error-display.
Atribút	custom-error-display
Typ	boolean
Predvolené	false

disabled

Popis	Vypína používateľskú interakciu s komponentom.
Atribút	disabled
Typ	boolean
Predvolené	false

lazy

Popis	Určuje, či je voľba lazy zapnutá a ovplyvňuje správanie komponentu.
Atribút	lazy
Typ	boolean
Predvolené	false

maxHeight

Popis	Nastavuje rozmery alebo veľkosť pre voľbu max-height.
Atribút	max-height
Typ	string｜null
Predvolené	auto

maxOptions

Popis	Nastavuje číselnú hodnotu používanú vo voľbe max-options.
Atribút	max-options
Typ	number ｜ object
Predvolené	1

noSize

Popis	Nastavuje rozmery alebo veľkosť pre voľbu no-size.
Atribút	no-size
Typ	boolean
Predvolené	false

offset

Popis	Nastavuje textovú hodnotu uloženú vo voľbe offset.
Atribút	offset
Typ	string
Predvolené	5

portaled

Popis	Určuje, či je voľba portaled zapnutá a ovplyvňuje správanie komponentu.
Atribút	portaled
Typ	boolean｜string
Predvolené	-

readonly

Popis	Zabráni používateľovi upravovať hodnotu.
Atribút	readonly
Typ	boolean
Predvolené	false

trigger

Popis	Nastavuje textovú hodnotu uloženú vo voľbe trigger.
Atribút	trigger
Typ	string
Predvolené	click

value

Popis	Nastavuje aktuálnu hodnotu komponentu.
Atribút	value
Typ	string｜Array
Predvolené	-

Events

Názov	Popis
wje-select:change	Vyvolá sa pri zmene hodnoty komponentu.
wje-popup:content-ready	Vyvolá sa pri odoslaní udalosti wje-popup:content-ready.

Methods

getAllOptions

Popis	Vráti všetky položky z aktuálneho stavu komponentu.
Signatúra	() => NodeList

addOption

Popis	Pridá položku do spravovanej kolekcie komponentu.
Signatúra	(optionData: object, silent?: boolean, map?: object) => void

addOptions

Popis	Pridá položky do spravovanej kolekcie komponentu.
Signatúra	(optionsData: Array ｜ object, silent?: boolean, map?: object) => void

selectOption

Popis	Vyberie položku a aktualizuje aktívny stav.
Signatúra	(value: string, silent?: boolean) => void

selectOptions

Popis	Vyberie položky a aktualizuje aktívny stav.
Signatúra	(values: any｜any[], silent?: boolean) => void

clearSelections

Popis	Vyčistí výbery a obnoví súvisiace hodnoty.
Signatúra	() => void

CSS shadow parts

Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.

CSS custom variables

Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.

Slots

Pre tento komponent nie sú dostupné žiadne sloty.