--- title: Select description: Allow users to pick one option from a menu. Ideal when presenting four or more choices to keep interfaces uncluttered. api_name: app-home source_url: html: https://shopify.dev/docs/api/app-home/polaris-web-components/forms/select md: https://shopify.dev/docs/api/app-home/polaris-web-components/forms/select.md --- # Select Allow users to pick one option from a menu. Ideal when presenting four or more choices to keep interfaces uncluttered. ## Properties * 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 boolean Default: false Disables the field, disallowing any interaction. * disconnectedCallback () => void * 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. * 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. * id string A unique identifier for the element. * label string Content to use as the field label. * 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. * name string An identifier for the field that is unique within the nearest containing form. * placeholder string A short hint that describes the expected value of the field. * 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. * value string The current value for the field. If omitted, the field will be empty. ## Events Learn more about [registering events](https://shopify.dev/docs/api/app-home/using-polaris-components#event-handling). * change CallbackEventListener<'input'> * input CallbackEventListener<'input'> ### CallbackEventListener ```ts (EventListener & { (event: CallbackEvent): void; }) | null ``` ### CallbackEvent ```ts Event & { currentTarget: HTMLElementTagNameMap[T]; } ``` ## Slots * children HTMLElement The options a user can select from. Accepts `Option` and `OptionGroup` components. ## Option Represents a single option within a select component. Use only as a child of `s-select` components. * defaultSelected boolean Default: false Whether the control is active by default. * disabled boolean Default: false Disables the control, disallowing any interaction. * selected boolean Default: false Whether the control is active. * value string The value used in form data when the control is checked. ## Slots * children HTMLElement The content to use as the label. ## OptionGroup Represents a group of options within a select component. Use only as a child of `s-select` components. * disabled boolean Default: false Whether the options within this group can be selected or not. * label string The user-facing label for this group of options. ## Slots * children HTMLElement The options a user can select from. Accepts `Option` components. ### Examples * #### Code ##### jsx ```jsx Today Yesterday Last 7 days Last 30 days Last 90 days ``` ##### html ```html Today Yesterday Last 7 days Last 30 days Last 90 days ```