Select
Overview of the Select Component
Selects are Form Controls used to select an option (or options) from a set of options, similar to a native ion-select element. When the select is tapped, a dialog appears with all of the options in a large, easy-to-select list.
A select should be used with child ion-select-option elements. If the child option is not given a value attribute, then its text will be used as the value.
If the value is set on the ion-select, the selected option will be chosen based on that value. Otherwise, the selected attribute can be used on the ion-select-option.
Basics about working with the Select component
You can find more information on how to work with Select here.
Properties
Important Note!
This document lists the properties that are specific to this particular UI component.
To check for the properties common for most UI components, please check the General components document.
Every new SelectWrapper component is created with two default child components: Select and ItemLabel.
The Select Item Wrapper (ion-item) component has the following properties:
Common Properties
| Property Name | Property Description |
|---|---|
| Item Wrapped | If set to true, the component will be included in the Item with additional properties |
| Show Label | If set to true, the component will have a label. |
| Lines | How the bottom border should be displayed on the item. Possible values are; Full, Inset, None. |
| Reorder | Reorder properties: Type - Content or Wrapper. If Wrapper is used, the item will be wrapped into a reorder tag. Icon - custom icon for Reorder with a type Content. Click the Default icon button to select the needed icon. Slot - position inside the item: Start or End. SVG Icon - used to select an svg file. This path will be added as the src attribute. Click the Change button to select the uploaded image from Media Manager. |
Adding Select
Click the + button on the SelectWrapper to add a new Select:
The Select component has the following properties:
Common Properties
| Property Name | Property Description |
|---|---|
| Placeholder | The text to display when the select is empty. |
| Placeholder Text I18n | If set to True then use the Placeholder property for internationalization. |
| Selected Text | The text to display instead of the selected option's value. |
| Selected Text I18n | If set to True then use the Selected Text property for internationalization. |
| Cancel Text | The text to display on the Cancel button. Defaults are set to Cancel. |
| Cancel Text I18n | If set to True then use the Cancel Text property for internationalization. |
| OK Text | The text to display on the OK button. Defaults are set to OK. |
| OK Text I18n | If set to True then use the OK Text property for internationalization. |
| Multiple | If set to True, the select can accept multiple values. |
| Compare with | A property name or function used to compare object values. |
| Interface | The interface the select should use: Action Sheet*, Popover, or Alert (default). |
| Interface Options | Any additional options that the interface can take. |
| Opened | This property is available only for development mode. Defaults are set to False. |
| [(ngModel)] | Angular directive for data binding. |
| (ionBlur) | Emitted when the search is blurred. |
| (ionCancel) | The event emitted when the value has canceled. |
| (ionChange) | Emitted when the value has changed. |
| (ionFocus) | Emitted when the search has focus. |
The property Opened is used only in the Visual Editor for switching between the opened and closed states of the Select component.
Visit the Ionic documentation to read more about <ion-select>.
Styles Properties
Under the Styles tab, selects can be styled with this additional attribute to look like in a specific way:
| Property Name | Property Description |
|---|---|
| Text Color | Select text color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker. |
Note!
To get access to the advanced properties organized in the Form Control section, make sure the Select is used as a Form Control (placed inside the Form component) and is selected:
Adding Select Option
Click the + button on the Select to add a new Select Option:
Use double-clicking on the select to show options:
The Select Option (ion-select-option) component has the following additional property:
| Property Name | Property Description |
|---|---|
| Value | The select option value. |
Note!
To make the Select Option checked, the Value property of the Select Option should be the same as the one of the Select component:
Note!
To get multiselect for the Select component, provide the needed values inside the [] for the Value property:
ItemLabel
The ItemLabel component has the following properties:
Common Properties
| Property Name | Property Description |
|---|---|
| Truncate Text | Set to True (default) to truncate label text if it is too long. |
| Position | The position determines where and how the label behaves inside an item. |
Styles Properties
Under the Styles tab, ItemLabel components can be styled with the following attributes to look like in a specific way:
| Property Name | Property Description |
|---|---|
| Font Size | Enter font size in px, %, em, vh, and vw. |
| Font Weight | Set the weight (or boldness) of the font: Normal or Bold. |
Using Select as a Form Control
The component is the Form Control of Angular form when:
- it is included into the Form component
- the Form has the Native validation property disabled (is set to False)
- it doesn't have the Standalone option under Control Options enabled
- the component has the property Name specified:
In this mode, the component has additional properties (Initial Value, Control ID, Control options, and Validation that allow checking the validity, changing updating strategy, etc. These properties can be used only in the Form component that doesn't have the Native validation property enabled.
If the Native validation property is enabled, the control can be used as a default HTML Form Control.
By default, the Name property is set as the Component name property and can be customized.
To set the initial value of the control, use the Initial Value property of the Form Control properties section.
The component can have only string values or null. If the property isn't specified, the initial value will be set to null.
To use variables as the control's data, the advanced property [(ngModel)] should be specified - the variable name should be entered as the property value. It replaces the value that is set by the Initial Value property.
As a Form Control, the component can get additional properties (Control ID and Control options) that allow checking the validity, changing updating strategy, etc. These properties can be used if the Native Validation property is disabled for the Form component.
Read more about validation in the Form section.
Note!
The component can't be used with array iteration data for creating a dynamic form structure. If you need to create such kind of structure, follow these recommendations.
Visit the Ionic documentation to read more about <ion-select-option>
Updated about 5 hours ago