Option
Examples
Disabled
Prefix & Suffix
Importing
Slots
Properties
Methods
Parts
Dependencies

Option

<sl-option> | SlOption

Since 2.0

stable

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

Option 1

Option 2

Option 3

<sl-select label="Select one">
  <sl-option value="option-1">Option 1</sl-option>
  <sl-option value="option-2">Option 2</sl-option>
  <sl-option value="option-3">Option 3</sl-option>
</sl-select>

import SlOption from '@shoelace-style/shoelace/dist/react/option';
import SlSelect from '@shoelace-style/shoelace/dist/react/select';

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

Examples

Disabled

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

Option 1

Option 2

Option 3

<sl-select label="Select one">
  <sl-option value="option-1">Option 1</sl-option>
  <sl-option value="option-2" disabled>Option 2</sl-option>
  <sl-option value="option-3">Option 3</sl-option>
</sl-select>

import SlOption from '@shoelace-style/shoelace/dist/react/option';
import SlSelect from '@shoelace-style/shoelace/dist/react/select';

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

Prefix & Suffix

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

Phone

Chat

<sl-select label="Select one">
  <sl-option value="option-1">
    <sl-icon slot="prefix" name="envelope"></sl-icon>
    Email
    <sl-icon slot="suffix" name="patch-check"></sl-icon>
  </sl-option>

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

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

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script

Import

Bundler

React

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/cdn/components/option/option.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/cdn/components/option/option.js';

To import this component using a bundler:

import '@shoelace-style/shoelace/dist/components/option/option.js';

To import this component as a React component:

import SlOption from '@shoelace-style/shoelace/dist/react/option';

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.

Learn more about using slots.

Properties

Name	Description	Type	Default
`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.	`string`	`''`
`disabled`	Draws the option in a disabled state, preventing selection.	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Methods

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

Learn more about methods.

Parts

Name	Description
`checked-icon`	The checked icon, an `<sl-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.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

<sl-icon>