Select

Allow users to pick one option from a menu. Ideal when presenting four or more choices to keep interfaces uncluttered.

Anchor to propertiesProperties

Anchor to details details string: Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user.

This will also be exposed to screen reader users.
Anchor to disabled disabled boolean Default: false: Disables the field, disallowing any interaction.
Anchor to disconnectedCallback disconnectedCallback () => void
Anchor to error error string: Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.
Anchor to icon icon "" | "replace" | "search" | "split" | "link" | "edit" | "product" | "variant" | "collection" | "select" | "info" | "incomplete" | "complete" | "color" | "money" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" | "alert-location" | "alert-octagon" | "alert-octagon-filled" | "alert-triangle": The type of icon to be displayed in the field.
Anchor to id id string: A unique identifier for the element.
Anchor to label label string: Content to use as the field label.
Anchor to labelAccessibilityVisibility labelAccessibilityVisibility "visible" | "exclusive" Default: 'visible': Changes the visibility of the component's label.

visible: the label is visible to all users.

exclusive: the label is visually hidden but remains in the accessibility tree.
Anchor to name name string: An identifier for the field that is unique within the nearest containing form.
Anchor to placeholder placeholder string: A short hint that describes the expected value of the field.
Anchor to required required boolean Default: false: Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the error property.
Anchor to value value string: The current value for the field. If omitted, the field will be empty.

Was this section helpful?

Anchor to eventsEvents

Learn more about registering events.

Anchor to change change <'input'>
Anchor to input input <'input'>

Was this section helpful?

Anchor to slotsSlots

Anchor to children children HTMLElement: The options a user can select from.

Accepts Option and OptionGroup components.

Was this section helpful?

Anchor to optionOption

Represents a single option within a select component. Use only as a child of s-select components.

Anchor to defaultSelected defaultSelected boolean Default: false: Whether the control is active by default.
Anchor to disabled disabled boolean Default: false: Disables the control, disallowing any interaction.
Anchor to selected selected boolean Default: false: Whether the control is active.
Anchor to value value string: The value used in form data when the control is checked.

Was this section helpful?

Anchor to slotsSlots

Anchor to children children HTMLElement: The content to use as the label.

Was this section helpful?

Anchor to optiongroupOptionGroup

Represents a group of options within a select component. Use only as a child of s-select components.

Anchor to disabled disabled boolean Default: false: Whether the options within this group can be selected or not.
Anchor to label label string: The user-facing label for this group of options.

Was this section helpful?

Anchor to slotsSlots

Anchor to children children HTMLElement: The options a user can select from.

Accepts Option components.

Was this section helpful?

Code

<s-select label="Date range">

<s-option value="1">Today</s-option>

<s-option value="2">Yesterday</s-option>

<s-option value="3">Last 7 days</s-option>

<s-option-group label="Custom ranges">

<s-option value="4">Last 30 days</s-option>

<s-option value="5">Last 90 days</s-option>

</s-option-group>

</s-select>

Examples

Code

jsx

<s-select label="Date range">
  <s-option value="1">Today</s-option>
  <s-option value="2">Yesterday</s-option>
  <s-option value="3">Last 7 days</s-option>
  <s-option-group label="Custom ranges">
    <s-option value="4">Last 30 days</s-option>
    <s-option value="5">Last 90 days</s-option>
  </s-option-group>
</s-select>

html

<s-select label="Date range">
  <s-option value="1">Today</s-option>
  <s-option value="2">Yesterday</s-option>
  <s-option value="3">Last 7 days</s-option>
  <s-option-group label="Custom ranges">
    <s-option value="4">Last 30 days</s-option>
    <s-option value="5">Last 90 days</s-option>
  </s-option-group>
</s-select>

Anchor to examplesExamples

Component examples

Anchor to example-basic-usageBasic usage

A simple select dropdown with pre-selected value for product sorting options.

Anchor to example-with-placeholderWith placeholder

Select dropdown with helpful placeholder text guiding category selection.

Anchor to example-with-error-stateWith error state

Select in error state showing specific business context and actionable error message.

Anchor to example-with-option-groupsWith option groups

Grouped select options organized by geographical regions for international shipping.

Anchor to example-with-iconWith icon

Select dropdown with sort icon for filtering order management views.

Anchor to example-disabled-stateDisabled state

Select in disabled state preventing user interaction with pre-selected value.

Was this section helpful?

Basic usage

<s-select label="Sort products by" value="newest">

<s-option value="newest">Newest first</s-option>

<s-option value="oldest">Oldest first</s-option>

<s-option value="title">Title A–Z</s-option>

<s-option value="price-low">Price: low to high</s-option>

<s-option value="price-high">Price: high to low</s-option>

</s-select>

Examples

Basic usage

Description

A simple select dropdown with pre-selected value for product sorting options.

jsx

<s-select label="Sort products by" value="newest">
  <s-option value="newest">Newest first</s-option>
  <s-option value="oldest">Oldest first</s-option>
  <s-option value="title">Title A–Z</s-option>
  <s-option value="price-low">Price: low to high</s-option>
  <s-option value="price-high">Price: high to low</s-option>
</s-select>

html

<s-select label="Sort products by" value="newest">
  <s-option value="newest">Newest first</s-option>
  <s-option value="oldest">Oldest first</s-option>
  <s-option value="title">Title A–Z</s-option>
  <s-option value="price-low">Price: low to high</s-option>
  <s-option value="price-high">Price: high to low</s-option>
</s-select>

With placeholder

Description

Select dropdown with helpful placeholder text guiding category selection.

jsx

<s-select
  label="Product category"
  placeholder="Choose category for better organization"
>
  <s-option value="clothing">Clothing & apparel</s-option>
  <s-option value="accessories">Accessories & jewelry</s-option>
  <s-option value="home-garden">Home & garden</s-option>
  <s-option value="electronics">Electronics & tech</s-option>
  <s-option value="books">Books & media</s-option>
</s-select>

html

<s-select
  label="Product category"
  placeholder="Choose category for better organization"
>
  <s-option value="clothing">Clothing & apparel</s-option>
  <s-option value="accessories">Accessories & jewelry</s-option>
  <s-option value="home-garden">Home & garden</s-option>
  <s-option value="electronics">Electronics & tech</s-option>
  <s-option value="books">Books & media</s-option>
</s-select>

With error state

Description

Select in error state showing specific business context and actionable error message.

jsx

<s-select
  label="Shipping origin"
  error="Select your primary shipping location to calculate accurate rates for customers"
  required
>
  <s-option value="ca">Canada</s-option>
  <s-option value="us">United states</s-option>
  <s-option value="mx">Mexico</s-option>
  <s-option value="uk">United kingdom</s-option>
</s-select>

html

<s-select
  label="Shipping origin"
  error="Select your primary shipping location to calculate accurate rates for customers"
  required
>
  <s-option value="ca">Canada</s-option>
  <s-option value="us">United states</s-option>
  <s-option value="mx">Mexico</s-option>
  <s-option value="uk">United kingdom</s-option>
</s-select>

With option groups

Description

Grouped select options organized by geographical regions for international shipping.

jsx

<s-select label="Shipping destination">
  <s-option-group label="North america">
    <s-option value="ca">Canada</s-option>
    <s-option value="us">United states</s-option>
    <s-option value="mx">Mexico</s-option>
  </s-option-group>
  <s-option-group label="Europe">
    <s-option value="uk">United kingdom</s-option>
    <s-option value="fr">France</s-option>
    <s-option value="de">Germany</s-option>
    <s-option value="it">Italy</s-option>
  </s-option-group>
  <s-option-group label="Asia pacific">
    <s-option value="au">Australia</s-option>
    <s-option value="jp">Japan</s-option>
    <s-option value="sg">Singapore</s-option>
  </s-option-group>
</s-select>

html

<s-select label="Shipping destination">
  <s-option-group label="North america">
    <s-option value="ca">Canada</s-option>
    <s-option value="us">United states</s-option>
    <s-option value="mx">Mexico</s-option>
  </s-option-group>
  <s-option-group label="Europe">
    <s-option value="uk">United kingdom</s-option>
    <s-option value="fr">France</s-option>
    <s-option value="de">Germany</s-option>
    <s-option value="it">Italy</s-option>
  </s-option-group>
  <s-option-group label="Asia pacific">
    <s-option value="au">Australia</s-option>
    <s-option value="jp">Japan</s-option>
    <s-option value="sg">Singapore</s-option>
  </s-option-group>
</s-select>

With icon

Description

Select dropdown with sort icon for filtering order management views.

jsx

<s-select label="Filter orders by" icon="sort">
  <s-option value="date">Order date</s-option>
  <s-option value="status">Fulfillment status</s-option>
  <s-option value="total">Order total</s-option>
  <s-option value="customer">Customer name</s-option>
</s-select>

html

<s-select label="Filter orders by" icon="sort">
  <s-option value="date">Order date</s-option>
  <s-option value="status">Fulfillment status</s-option>
  <s-option value="total">Order total</s-option>
  <s-option value="customer">Customer name</s-option>
</s-select>

Disabled state

Description

Select in disabled state preventing user interaction with pre-selected value.

jsx

<s-select label="Product type" disabled value="physical">
  <s-option value="physical">Physical product</s-option>
  <s-option value="digital">Digital product</s-option>
  <s-option value="service">Service</s-option>
  <s-option value="gift-card">Gift card</s-option>
</s-select>

html

<s-select label="Product type" disabled value="physical">
  <s-option value="physical">Physical product</s-option>
  <s-option value="digital">Digital product</s-option>
  <s-option value="service">Service</s-option>
  <s-option value="gift-card">Gift card</s-option>
</s-select>

Select

Anchor to propertiesProperties

Anchor to eventsEvents

CallbackEventListener

CallbackEvent

Anchor to slotsSlots

Anchor to optionOption

Anchor to slotsSlots

Anchor to optiongroupOptionGroup

Anchor to slotsSlots

Examples

Code

jsx

html

Anchor to examplesExamples

Anchor to example-basic-usageBasic usage

Examples

Basic usage

Description

jsx

html

With placeholder

Description

jsx

html

With error state

Description

jsx

html

With option groups

Description

jsx

html

With icon

Description

jsx

html

Disabled state

Description

jsx

html