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
search
| Description | Gets the search attribute. |
| Attribute | search |
| Type | string |
| Default | - |
attached
| Description | Controls how attached behaves in the component. |
| Attribute | attached |
| Type | any |
| Default | - |
Events
| Name | Description |
|---|---|
wje-options:load | Emitted when async content finishes loading. |
Methods
processData
| Description | Processes the provided data based on the optional array path set in the instance. |
| Signature | (data: object) => Array |
filterOutDrawnOptions
| Description | Filters out options from the response object that have already been drawn, based on the specified option array path. |
| Signature | (response: object) => object |
getPages
| Description | Fetches the pages from the provided URL. |
| Signature | (page: number) => Promise<object> |
findSelectedOptionData
| Description | Finds the selected option data based on the given selected option values. |
| Signature | (selectedOptionValues: Array) => Array |
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.