ion-select

shadow

Selects are form controls to select an option, or options, from a set of options, similar to a native <select> element. When a user taps the select, 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 value is set on the <ion-select>, the selected option will be chosen based on that value.

Single Selection

By default, the select allows the user to select only one option. The alert interface presents users with a radio button styled list of options. The select component's value receives the value of the selected option's value.

Interfaces

By default, select uses ion-alert to open up the overlay of options in an alert. The interface can be changed to use ion-action-sheet or ion-popover by passing action-sheet or popover, respectively, to the interface property. Read on to the other sections for the limitations of the different interfaces.

Action Sheet

Popover

Multiple Selection

By adding the multiple attribute to select, users are able to select multiple options. When multiple options can be selected, the alert overlay presents users with a checkbox styled list of options. The select component's value receives an array of all of the selected option values.

Note: the action-sheet and popover interfaces will not work with multiple selection.

Responding to Interaction

The main ways of handling user interaction with the select are the ionChange, ionDismiss, and ionCancel events. See Events for more details on these and other events that select fires.

Object Value References

When using objects for select values, it is possible for the identities of these objects to change if they are coming from a server or database, while the selected value's identity remains the same. For example, this can occur when an existing record with the desired object value is loaded into the select, but the newly retrieved select options now have different identities. This will result in the select appearing to have no value at all, even though the original selection in still intact.

By default, the select uses object equality (===) to determine if an option is selected. This can be overridden by providing a property name or a function to the compareWith property.

Using compareWith

Object Values and Multiple Selection

Select Buttons

The alert supports two buttons: Cancel and OK. Each button's text can be customized using the cancelText and okText properties.

The action-sheet and popover interfaces do not have an OK button, clicking on any of the options will automatically close the overlay and select that value. The popover interface does not have a Cancel button, clicking on the backdrop will close the overlay.

Interface Options

Since select uses the alert, action sheet and popover interfaces, options can be passed to these components through the interfaceOptions property. This can be used to pass a custom header, subheader, css class, and more.

See the ion-alert docs, ion-action-sheet docs, and ion-popover docs for the properties that each interface accepts.

Note: interfaceOptions will not override inputs or buttons with the alert interface.

Customization

There are two units that make up the Select component and each need to be styled separately. The ion-select element is represented on the view by the selected value(s), or placeholder if there is none, and dropdown icon. The interface, which is defined in the Interfaces section above, is the dialog that opens when clicking on the ion-select. The interface contains all of the options defined by adding ion-select-option elements. The following sections will go over the differences between styling these.

Styling Select Element

As mentioned, the ion-select element consists only of the value(s), or placeholder, and icon that is displayed on the view. To customize this, style using a combination of CSS and any of the CSS custom properties.

Alternatively, depending on the browser support needed, CSS shadow parts can be used to style the select. Notice that by using ::part, any CSS property on the element can be targeted.

Styling Select Interface

Customizing the interface dialog should be done by following the Customization section in that interface's documentation:

• Alert Customization
• Action Sheet Customization
• Popover Customization

However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, see the Select Options documentation for usage examples of customizing options.

Typeahead Component

Typeahead or autocomplete functionality can be built using existing Ionic components. We recommend using an ion-modal to make the best use of the available screen space.

Interfaces

SelectChangeEventDetail

interface SelectChangeEventDetail<T = any> {
  value: T;
}

SelectCustomEvent

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

interface SelectCustomEvent<T = any> extends CustomEvent {
  detail: SelectChangeEventDetail<T>;
  target: HTMLIonSelectElement;
}

Properties

cancelText

Description	キャンセルボタンに表示するテキストです。
Attribute	cancel-text
Type	string
Default	'Cancel'

compareWith

Description	オブジェクトの値を比較するために使用されるプロパティ名または関数。
Attribute	compare-with
Type	((currentValue: any, compareValue: any) => boolean) ｜ null ｜ string ｜ undefined
Default	undefined

disabled

Description	trueの場合、ユーザはセレクトと対話することができません。
Attribute	disabled
Type	boolean
Default	false

interface

Description	selectが使用するインターフェース。action-sheet, popoverまたはalert`.
Attribute	interface
Type	"action-sheet" ｜ "alert" ｜ "popover"
Default	'alert'

interfaceOptions

Description	Any additional options that the alert, action-sheet or popover interface can take. See the ion-alert docs, the ion-action-sheet docs and the ion-popover docs for the create options for each interface. Note: interfaceOptions will not override inputs or buttons with the alert interface.
Attribute	interface-options
Type	any
Default	{}

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

multiple

Description	trueの場合、selectは複数の値を受け入れることができる。
Attribute	multiple
Type	boolean
Default	false

name

Description	フォームデータとともに送信されるコントロールの名前。
Attribute	name
Type	string
Default	this.inputId

okText

Description	okボタンに表示するテキストです。
Attribute	ok-text
Type	string
Default	'OK'

placeholder

Description	セレクトが空のときに表示するテキストです。
Attribute	placeholder
Type	string ｜ undefined
Default	undefined

selectedText

Description	選択されたオプションの値の代わりに表示するテキストです。
Attribute	selected-text
Type	null ｜ string ｜ undefined
Default	undefined

value

Description	セレクトの値です。
Attribute	value
Type	any
Default	undefined

Events

Name	Description
ionBlur	セレクトのフォーカスが外れたときに発行されます。
ionCancel	選択がキャンセルされたときに発行されます。
ionChange	値が変更されたときに発行されます。
ionDismiss	オーバーレイが解除されたときに発行されます。
ionFocus	セレクトにフォーカスが当たったときに発行されます。

Methods

open

Description	Open the select overlay. The overlay is either an alert, action sheet, or popover, depending on the interface property on the ion-select.
Signature	open(event?: UIEvent) => Promise<any>

CSS Shadow Parts

Name	Description
icon	セレクトアイコンのコンテナです。
placeholder	値がないときにセレクトに表示されるテキスト。
text	セレクトの表示値です。

CSS Custom Properties

Name	Description
--padding-bottom	セレクトのBottom Padding
--padding-end	セレクトの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingを行う
--padding-start	セレクトの方向が左から右の場合はLeft Padding、右から左の場合はRight Padding
--padding-top	セレクトのTop Padding
--placeholder-color	セレクトPlaceholderテキストの色
--placeholder-opacity	選択Placeholderテキストの不透明度

Slots

No slots available for this component.