Option

<wa-option> Since 2.0 stable

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

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

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
defaultSelected
selected
Selects an option initially.
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 ''

Custom States

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

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

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

Importing

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

To manually import this component from the CDN, use the following code. 

import 'https://early.webawesome.com/[email protected]/dist/components/option/option.js';

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 '@awesome.me/webawesome/dist/react/option';
Need a hand? Report a bug Ask for help
    No results