Option
The Option element represents the individual options within the Select component. It is similar to the standard HTML select element and allows users to make one or more selections based on the configuration of the select component. These elements can be dynamically populated and are designed to work seamlessly with the wje-select component's own logic, including features such as multiple selection and custom styling.
For information on using Option, navigate to the Select. element documentation.
When to use
Use wje-select-option 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
selected
| Description | Retrieves the 'selected' attribute status of the element. |
| Attribute | selected |
| Type | boolean |
| Default | - |
Events
| Name | Description |
|---|---|
wje-option:change | Event fired when the option is clicked. |
Methods
optionClickCallback
| Description | Handles the click event on an option element and dispatches a custom event when triggered. |
| Signature | (e: Event) => void |
CSS Shadow Parts
| Name | Description |
|---|---|
native | The native part of the option. |
CSS Custom Properties
No CSS custom properties available for this component.
Slots
| Name | Description |
|---|---|
start | The slot for the start of the option. |
default | The default slot for the option. |
end | The slot for the end of the option. |