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

Requirements

Requires OctantisEventProxy hook. See Install Hooks README.

Example

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

Unimplemented

<s-group-options /> is not currently implemented. Unsure what that would look like.

See

• https://shopify.dev/docs/api/app-home/polaris-web-components/forms/select

Attributes

• id (:string) (required) - A unique identifier for the element.

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

• disabled (:string) - Disables the field, disallowing any interaction.

• icon (:string) - "" | "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.

• label (:string) - Content to use as the field label.

• label_accessibility_visibility (:string) - "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.

• placeholder (:string) - A short hint that describes the expected value of the field.

• required (:string) - 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.

• change (:string) - CallbackEventListener<'input'>.

• input (:string) - CallbackEventListener<'input'>.

• field (Phoenix.HTML.FormField) (required) - The Phoenix Form Field.

• Global attributes are accepted.

Slots

• s_option - Represents a single option within a select component. Use only as a child of s-select components. Accepts attributes:
  • default_selected (:boolean) - Whether the control is active by default.
  • disabled (:boolean) - Disables the control, disallowing any interaction.
  • selected (:boolean) - Whether the control is active.
  • value (:string) - The value used in form data when the control is checked.
• inner_block