<wa-option>
Options define the selectable items within various form controls such as select.
<wa-select label="Select one"> <wa-option value="option-1">Option 1</wa-option> <wa-option value="option-2">Option 2</wa-option> <wa-option value="option-3">Option 3</wa-option> </wa-select>
Use the disabled attribute to disable an option and prevent it from being selected.
<wa-select label="Select one"> <wa-option value="option-1">Option 1</wa-option> <wa-option value="option-2" disabled>Option 2</wa-option> <wa-option value="option-3">Option 3</wa-option> </wa-select>
Add icons to the start and end of menu items using the prefix and suffix slots.
<wa-select label="Select one"> <wa-option value="option-1"> <wa-icon slot="prefix" name="envelope" variant="solid"></wa-icon> Email <wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon> </wa-option> <wa-option value="option-2"> <wa-icon slot="prefix" name="phone" variant="solid"></wa-icon> Phone <wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon> </wa-option> <wa-option value="option-3"> <wa-icon slot="prefix" name="comment" variant="solid"></wa-icon> Chat <wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon> </wa-option> </wa-select>
| Name | Description |
|---|---|
| (default) | The option's label. |
prefix
|
Used to prepend an icon or similar element to the menu item. |
suffix
|
Used to append an icon or similar element to the menu item. |
| Name | Description | Reflects | |
|---|---|---|---|
valuevalue
|
The option's value. When selected, the containing form control will receive this value. The value
must be unique from other options in the same group. Values may not contain spaces, as spaces are
used as delimiters when listing multiple values.
Type
string
Default
''
|
|
|
disableddisabled
|
Draws the option in a disabled state, preventing selection.
Type
boolean
Default
false
|
|
| Name | Description | Arguments |
|---|---|---|
getTextLabel() |
Returns a plain text label based on the option's content. |
| Name | Description |
|---|---|
--background-color-current |
The current option's background color.
|
--background-color-hover |
The options's background color on hover.
|
--label-color-current |
The current option's label color.
|
--label-color-hover |
The label color on hover.
|
| Name | Description |
|---|---|
checked-icon |
The checked icon, a <wa-icon> element. |
base |
The component's base wrapper. |
label |
The option's label. |
prefix |
The container that wraps the prefix. |
suffix |
The container that wraps the suffix. |
This component automatically imports the following elements. Subdependencies, if any exist, will also be included in this list.
The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
To manually import this component from the CDN, use the following code.
import 'https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/components/option/option.js';