Option
<wa-option>
Options define the selectable items within a select component.
This component must be used as a child of <wa-select>. Please see the Select docs to see examples of this component in action.
Slots Jump to heading
Learn more about using slots.
| Name | Description |
|---|---|
| (default) | The option's label. |
start
|
An element, such as <wa-icon>, placed before the label. |
end
|
An element, such as <wa-icon>, placed after the label. |
Attributes & Properties Jump to heading
Learn more about attributes and properties.
| 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
stringDefault
'' |
|
|
disableddisabled |
Draws the option in a disabled state, preventing selection.
Type
booleanDefault
false |
||
defaultSelectedselected |
Selects an option initially.
Type
booleanDefault
false |
||
labellabel |
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
stringDefault
'' |
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. |
start |
The container that wraps the start slot. |
end |
The container that wraps the end slot. |
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
Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
Let your project code do the work! Sign up for free to use a project with your very own CDN — it's the fastest and easiest way to use Web Awesome.
To manually import this component from NPM, use the following code.
import '@awesome.me/webawesome/dist/components/option/option.js';
To manually import this component from React, use the following code.
import WaOption from '@awesome.me/webawesome/dist/react/option';