Javatpoint Logo
Javatpoint Logo

Ionic Select

The Ionic select component provides a select menu with select options for the user to choose among the set of multiple options. Selects are the form controls similar to native <select> element. When you tap the select, immediately a dialog appears with all of the including options. The select menu will look different for a different platform because its styling is handled by the browser. We can access the Ionic select by using a standard <ion-select> element.

A select component always used with child <ion-select-option> element. If the <ion-select-option> does not have a value attribute, then its text will be used as the value.

If the <ion-select> component has set the value attribute, the selected options will be decided based on that value. On the other hand, if the value is not set, the select attribute will be used on the <ion-select-option>.

The select component uses the interface AtertController API for opening the overlay of options in an alert. It can be changed for using the ActionSheetController API or PopoverController API by passing action-sheet or popover to the interface property.

The select component can be of two types:

  1. Single-Selection
  2. Multiple-Selection

Single-Selection

By default, the select allows you to select only one option. In this selection, the alert interface shows the radio button styled list of options. The select component's value receives only the value of the selected option's value.

Select Buttons

The alert interface supports two buttons which are: cancel and ok. The button text can be customized by using the cancelText and okText properties.

Example

The following example helps to understand the use of a single selection component.

Output:

When you execute the above code snippet, it will give the following output.

Ionic Select

If you tap the select, immediately a dialog appears with all of the including options. We will get the following output.

Ionic Select

Multiple-Selection

The multiple selections use multiple attributes which allows you to select multiple options from a set of select options. In this selection, the alert interface shows the checkbox styled list of options. Here the select component's value receives the array of all of the selected option values.

Example

Output:

Ionic Select

If you tap the select, immediately a dialog appears with all of the including options. Now, you can choose multiple options as you want.

Ionic Select

Interface Options

By default, the select component uses the interface AtertController API. But, we can also change it for using the ActionSheetController API or PopoverController API by passing action-sheet or popover to the interface property. The following example explained it more clearly.

Example

Home.page.html

Home.page.ts

Output:

When you execute the above Ionic app, it will give the following output.

Ionic Select

Now, when you select the popover option, the following screen appears. Here, you can also check for other options such as Alert and Action Sheet.

Ionic Select
Next TopicIonic Slides




Help Others, Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA