Option
<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>
Examples Jump to heading
Disabled Jump to heading
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>
Prefix & Suffix Jump to heading
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>
Slots Jump to heading
Learn more about using slots.
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. |
Attributes & Properties Jump to heading
Learn more about attributes and properties.
Name | Description | Reflects | |
---|---|---|---|
value value |
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
'' |
|
|
disabled disabled |
Draws the option in a disabled state, preventing selection.
Type
boolean Default
false |
|
|
label label |
The option’s plain text label.
Usually automatically generated, but can be useful to provide manually for cases involving complex content.
Type
string |
||
defaultLabel |
The default label, generated from the element contents. Will be equal to
label in most cases.Type
string Default
'' |
CSS custom properties Jump to heading
Learn more about CSS custom properties.
Name | Description |
---|---|
--background-color-current |
The current option's background color.
|
--background-color-hover |
The options's background color on hover.
|
--text-color-current |
The current option's label color.
|
--text-color-hover |
The label color on hover.
|
Custom States Jump to heading
Learn more about custom states.
Name | Description | CSS selector |
---|---|---|
current |
The user has keyed into the option, but hasn't selected it yet (shows a highlight) | :state(current) |
selected |
The option is selected and has aria-selected="true" | :state(selected) |
hover |
Like :hover but works while dragging in Safari |
:state(hover) |
CSS parts Jump to heading
Learn more about CSS parts.
Name | Description |
---|---|
checked-icon |
The checked icon, a <wa-icon> element. |
label |
The option's label. |
prefix |
The container that wraps the prefix. |
suffix |
The container that wraps the suffix. |
Dependencies Jump to heading
This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.
Importing Jump to heading
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.12/dist/components/option/option.js';