Options
The Options element is intended for use inside the Select element and is used to display a dynamically generated list of options that is asynchronously retrieved from the specified URL.
note
For more information on using Options, navigate to the Select element documentation
When to use
Use wje-select-options when you need a consistent WebJET-based implementation for this UI concern.
When not to use
Do not stretch the component beyond its responsibility; compose smaller primitives for edge cases.
Accessibility
Validate keyboard behavior, focus states, contrast, and meaningful labels for interactive elements.
Best Practices
- Prefer component APIs over direct DOM manipulation.
- Stick to design tokens and naming conventions.
- Test components with realistic data before production rollout.
Attributes and Properties
attached
| Description | Controls how attached behaves in the component. |
| Attribute | attached |
| Type | any |
| Default | - |
dropdownHeight
| Description | Gets the dropdown height attribute. |
| Attribute | dropdown-height |
| Type | string |
| Default | 100% |
itemText
| Description | Sets the item text attribute. |
| Attribute | item-text |
| Type | string |
| Default | text |
itemValue
| Description | Sets the item value attribute. |
| Attribute | item-value |
| Type | string |
| Default | value |
lazy
| Description | Sets the lazy attribute. |
| Attribute | lazy |
| Type | boolean |
| Default | false |
lazyLoadSize
| Description | Gets the lazy load size attribute. |
| Attribute | lazy-load-size |
| Type | number |
| Default | 10 |
optionArrayPath
| Description | Sets the option array path attribute. |
| Attribute | option-array-path |
| Type | string |
| Default | false |
queryParams
| Description | Sets the queryParams attribute on the element. |
| Attribute | query-params |
| Type | string |
| Default | - |
search
| Description | Sets the search attribute. |
| Attribute | search |
| Type | string |
| Default | false |
searchParamName
| Description | Gets the search parameter name used in queries. Retrieves the value of the 'search-param-name' attribute. If the attribute is not set, it defaults to 'search'. |
| Attribute | search-param-name |
| Type | string |
| Default | search |
searchToQueryParams
| Description | Retrieves the value of the 'search-to-query-params' attribute from the current instance. |
| Attribute | search-to-query-params |
| Type | string ｜ null |
| Default | false |
Events
| Name | Description |
|---|---|
wje-options:load | Emitted when async content finishes loading. |
Methods
addOption
| Description | Adds an option to the element. |
| Signature | (optionData: object) => void |
addOptions
| Description | Adds options to the element. |
| Signature | (optionsData: Array, silent?: boolean) => void |
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
No CSS custom properties available for this component.
Slots
No slots available for this component.