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.
Importing
Jump to heading
If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.
Import this component directly from the CDN:
import 'https://ka-f.webawesome.com/webawesome@0.14.0/components/option/option.js';
After installing Web Awesome via npm, import this component:
import '@awesome.me/webawesome/dist/components/option/option.js';
If you're self-hosting Web Awesome, import this component from your server:
import './webawesome/dist/components/option/option.js';
To import this component for React 18 or below, use the following code:
import WaOption from '@awesome.me/webawesome/dist/react/option/index.js';
Slots
Jump to heading
Learn more about using slots.
| Name | Description |
|---|---|
| (default) | The option's label. |
end
|
An element, such as <wa-icon>, placed after the label. |
start
|
An element, such as <wa-icon>, placed before the label. |
Attributes & Properties
Jump to heading
Learn more about attributes and properties.
| Name | Description | Reflects | |
|---|---|---|---|
css |
One or more CSSResultGroup to include in the component's shadow root. Host styles are automatically prepended.
Type
CSSResultGroup | undefinedDefault
styles |
||
defaultLabel |
The default label, generated from the element contents. Will be equal to
label in most cases.Type
string |
||
defaultSelectedselected |
Selects an option initially.
Type
booleanDefault
false |
||
disableddisabled |
Draws the option in a disabled state, preventing selection.
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 |
||
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
'' |
|
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)
|
disabled |
Applied when the option is disabled |
:state(disabled)
|
hover |
Like :hover but works while dragging in Safari |
:state(hover)
|
selected |
The option is selected and has aria-selected="true" |
:state(selected)
|
CSS parts
Jump to heading
Learn more about CSS parts.
| Name | Description | CSS selector |
|---|---|---|
checked-icon |
The checked icon, a <wa-icon> element. |
::part(checked-icon)
|
end |
The container that wraps the end slot. |
::part(end)
|
label |
The option's label. |
::part(label)
|
start |
The container that wraps the start slot. |
::part(start)
|
Dependencies
Jump to heading
This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.