3.0.0-alpha.9 Alpha
Components Select

Option

<wa-option> Since 2.0 Stable

Options define the selectable items within various form controls such as select.

Option 1 Option 2 Option 3 
<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

Disabled

Use the disabled attribute to disable an option and prevent it from being selected.

Option 1 Option 2 Option 3 
<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

Add icons to the start and end of menu items using the prefix and suffix slots.

Email Phone Chat 
<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

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

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

Methods

Learn more about methods.

Name Description Arguments
getTextLabel() Returns a plain text label based on the option's content.

CSS custom properties

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.

CSS parts

Learn more about CSS parts.

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.

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/webawesome@3.0.0-alpha.9/dist/components/option/option.js';
 Coming soon! Coming soon!
    No results