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: 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" | "link" | "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" | "alert-triangle-filled" | "app-extension": 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": 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: 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 optionOption

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

Anchor to defaultSelected defaultSelected boolean: Whether the control is active by default.
Anchor to disabled disabled boolean: Disables the control, disallowing any interaction.
Anchor to selected selected boolean: 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 optiongroupOptionGroup

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

Anchor to disabled disabled boolean: 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?

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

Default

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

Select

Anchor to propertiesProperties

Anchor to eventsEvents

CallbackEventListener

CallbackEvent

Anchor to optionOption

Anchor to optiongroupOptionGroup

Code

Examples

Code

Default

Preview