webawesome/docs/pages/components/option.md

meta, layout

meta	layout
title description Option Options define the selectable items within various form controls such as select.	component

<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>

import WaOption from '@shoelace-style/shoelace/dist/react/option';
import WaSelect from '@shoelace-style/shoelace/dist/react/select';

const App = () => (
  <WaSelect>
    <WaOption value="option-1">Option 1</WaOption>
    <WaOption value="option-2">Option 2</WaOption>
    <WaOption value="option-3">Option 3</WaOption>
  </WaSelect>
);

Examples

Disabled

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>

import WaOption from '@shoelace-style/shoelace/dist/react/option';
import WaSelect from '@shoelace-style/shoelace/dist/react/select';

const App = () => (
  <WaSelect>
    <WaOption value="option-1">Option 1</WaOption>
    <WaOption value="option-2" disabled>
      Option 2
    </WaOption>
    <WaOption value="option-3">Option 3</WaOption>
  </WaSelect>
);

Prefix & Suffix

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"></wa-icon>
    Email
    <wa-icon slot="suffix" name="patch-check"></wa-icon>
  </wa-option>

  <wa-option value="option-2">
    <wa-icon slot="prefix" name="telephone"></wa-icon>
    Phone
    <wa-icon slot="suffix" name="patch-check"></wa-icon>
  </wa-option>

  <wa-option value="option-3">
    <wa-icon slot="prefix" name="chat-dots"></wa-icon>
    Chat
    <wa-icon slot="suffix" name="patch-check"></wa-icon>
  </wa-option>
</wa-select>