Option

<sl-option> | SlOption
Since 1.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>

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>

Prefix & Suffix

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

Email 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="check"></sl-icon>
  </sl-option>

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

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

Check icon

We can display check icon in option using check-icon on select component.

Checkbox

We can use checkbox in option using checkbox attribute on select component.

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 Reflects 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
checkIcon
check-icon 		Hides the check icon when the option is selected. boolean false
checkbox Draws a checkbox to the left of the option. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
sl-option-hover Emitted when the option is hovered. CustomEvent

Learn more about events.

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>