Select lets merchants choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface.

Examples

<.select label="Date range" value="today">
  <:option value="today" label="Today"/>
  <:option value="yesterday" label="Yesterday"/>
  <:option value="lastWeek" label="Last 7 days" />
</.select>

See

• https://polaris.shopify.com/components/selection-and-input/select
• https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/Select/Select.tsx

Attributes

• options (:list) - List of options or option groups to choose from. Defaults to [].
• field (Phoenix.HTML.FormField) (required) - The Phoenix Form Field.
• label (:string) - Label for the select. Defaults to nil.
• label_action (:any) - Adds an action to the label. Defaults to nil.
• label_hidden (:boolean) - Visually hide the label. Defaults to false.
• label_inline (:boolean) - Show the label to the left of the value, inside the control. Defaults to false.
• disabled (:boolean) - Disable input. Defaults to false.
• help_text (:string) - Additional text to aide in use. Defaults to nil.
• placeholder (:string) - Example text to display as placeholder. Defaults to nil.
• id (:string) (required) - ID for form input.
• error (:string) - Display an error state. Defaults to nil.
• phx_change (:any) - onChange: Callback when selection is changed. Defaults to nil.
• phx_focus (:any) - onFocus: Callback when select is focused. Defaults to nil.
• phx_blur (:any) - onBlur: Callback when focus is removed. Defaults to nil.
• required_indicator (:boolean) - Visual required indicator, add an asterisk to label. Defaults to false.
• tone (:string) - Indicates the tone of the select. Defaults to nil.