Version: v7 (beta)

ion-select

Selectは、ネイティブの <select> 要素と同様に、オプションのセットからオプションを選択するためのフォームコントロールです。ユーザがselectをタップすると、すべてのオプションを含むダイアログが、選択しやすい大きなリストで表示されます。

selectは、子要素 <ion-select-option> とともに使用する必要があります。子要素のオプションにvalue属性が指定されていない場合、そのtextが値として使用されます。

value が <ion-select> にセットされている場合、オプションはその値に基づいて選択済みになります。

単一選択

デフォルトでは、selectを使用すると、ユーザは1つのOptionだけを選択できます。Alertのインターフェースでは、Optionのリストがradio button形式で表示されます。action sheetインタフェースは、1つの値選択でのみ使用できます。selectコンポーネントの値は、選択したオプションの値の値を受け取ります。

インターフェイス

デフォルトでは、select は ion-alert を使ってAlertのオプションのオーバーレイを開きます。インターフェイスを変更して、ion-action-sheet または ion-popover を使用するには、 action-sheet または popover を interface プロパティに渡します。各インタフェースの制限については、他のセクションを参照してください。

Action Sheet

複数選択

multiple 属性を追加して選択すると、複数のOptionを選択できます。複数のOptionを選択できる場合は、checkbox形式のオプションのリストがAlertオーバーレイで表示されます。selectコンポーネントの値は、選択されたすべてのオプション値の配列を受け取ります。

Note: action-sheet と popover インターフェイスでは、複数選択は動作しません

Responding to Interaction

select とユーザーのインタラクションを処理する主な方法は、 ionChange イベント、 ionDismiss イベント、 ionCancel イベントです。これらのイベントと select が発生するその他のイベントの詳細については、イベントを参照してください。

Object値について

選択した値にObjectを使用する場合、これらのObjectの識別情報がサーバーまたはデータベースからのものであれば変更できますが、選択した値の識別情報は変更されません。たとえば、目的のObject値を持つ既存の値がselectにロードされたが、新しく取得されたselectオプションが異なるIDを持つようになった場合などです。これにより、元の選択がそのままの状態であっても、選択に値がまったく表示されなくなります。

デフォルトでは、selectはObjectの等価性(===)を使用して、オプションが選択されているかどうかを判断します。これはcompareWithsプロパティにプロパティ名または関数を指定することで上書きできます。

Using compareWith

Object Values and Multiple Selection

Label Placement

Labels will take up the width of their content by default. Developers can use the labelPlacement property to control how the label is placed relative to the control.

Justification

Developers can use the justify property to control how the label and control are packed on a line.

Filled Selects

Material Design offers filled styles for a select. The fill property on the select can be set to either "solid" or "outline".

Since the fill styles visually defines the select container, selects that use fill should not be used in ion-item.

SelectのButton

alertはふたつのボタンをサポートしています: Cancel と OK です。それぞれのボタンは、 cancelText と okText プロパティを使ってカスタマイズできます。

action-sheet と popover インタフェースには OK ボタンがありません。いずれかのオプションをクリックすると、自動的にオーバーレイが閉じ、その値が選択されます。popover インターフェースにはCancelボタンがないので、backdropをクリックするとオーバーレイが閉じます。

インターフェイスオプション

select は alert、action sheet、popover インターフェースを使用するので、interfaceOptions プロパティを通して、これらのコンポーネントにオプションを渡すことができます。これは、カスタムヘッダー、サブヘッダー、CSS クラスなどを渡すために使用できます。

各インターフェースが受け付けるプロパティは、ion-alert docs, ion-action-sheet docs, ion-popover docs を参照してください。

Note: alert インターフェースでは、 interfaceOptions は inputs や buttons をオーバーライドしません。

カスタマイズ

Selectコンポーネントを構成する2つのユニットがあり、それぞれを別々にスタイルする必要があります。 ion-select要素は、ビュー上で選択された値（複数可）、または何もない場合はプレースホルダー、およびドロップダウンのアイコンによって表現されます。インターフェースは、上記のインターフェースセクションで定義されており、 ion-select をクリックすると開かれるダイアログです。インターフェースには、 ion-select-option 要素を追加することで定義されるすべてのオプションが含まれています。次のセクションでは、これらのスタイリングの違いについて説明します。

Select 要素のスタイリング

前述の通り、ion-select 要素は、ビューに表示される値 (またはプレースホルダ) とアイコンのみで構成されています。これをカスタマイズするには、CSSとCSSカスタムプロパティを組み合わせてスタイルを設定します。

また、必要なブラウザサポートに応じて、CSSのシャドウパーツを使用してセレクトのスタイルを設定することができます。part` を使用することで、要素上の任意のCSSプロパティをターゲットにすることができることに注意してください。

Select インターフェイスのスタイリング

インターフェイスのダイアログのカスタマイズは、そのインターフェイスのドキュメントのカスタマイズのセクションにしたがって行ってください。

ただし、Selectオプションでは、スタイリングを容易にするためにクラスを設定し、オーバーレイオプションにクラスを渡す機能があります。オプションのカスタマイズの使用例については、Selectオプションのドキュメントを参照してください。

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

必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。

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

Migrating from Legacy Select Syntax

A simpler select syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an select, resolves accessibility issues, and improves the developer experience.

Developers can perform this migration one select at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.

Using the Modern Syntax

Using the modern syntax involves two steps:

Remove ion-label and use the label property on ion-select instead. The placement of the label can be configured using the labelPlacement property on ion-select.
Move any usage of fill and shape from ion-item on to ion-select.

JavaScript
Angular
React
Vue

<!-- Label and Label Position -->

<!-- Before -->
<ion-item>
  <ion-label position="floating">Favorite Fruit:</ion-label>
  <ion-select>...</ion-select>
</ion-item>

<!-- After -->
<ion-item>
  <ion-select label="Favorite Fruit:" label-placement="floating">...</ion-select>
</ion-item>


<!-- Fill -->

<!-- Before -->
<ion-item fill="outline" shape="round">
  <ion-label position="floating">Favorite Fruit:</ion-label>
  <ion-select>...</ion-select>
</ion-item>

<!-- After -->

<!-- Inputs using `fill` should not be placed in ion-item -->
<ion-select fill="outline" shape="round" label="Favorite Fruit:" label-placement="floating">...</ion-select>

<!-- Label and Label Position -->

<!-- Before -->
<ion-item>
  <ion-label position="floating">Favorite Fruit:</ion-label>
  <ion-select>...</ion-select>
</ion-item>

<!-- After -->
<ion-item>
  <ion-select label="Favorite Fruit:" labelPlacement="floating">...</ion-select>
</ion-item>


<!-- Fill -->

<!-- Before -->
<ion-item fill="outline" shape="round">
  <ion-label position="floating">Favorite Fruit:</ion-label>
  <ion-select>...</ion-select>
</ion-item>

<!-- After -->

<!-- Inputs using `fill` should not be placed in ion-item -->
<ion-select fill="outline" shape="round" label="Favorite Fruit:" labelPlacement="floating">...</ion-select>

{/* Label and Label Position */}

{/* Before */}
<IonItem>
  <IonLabel position="floating">Favorite Fruit:</IonLabel>
  <IonSelect>...</IonSelect>
</IonItem>

{/* After */}
<IonItem>
  <IonSelect label="Favorite Fruit:" labelPlacement="floating">...</IonSelect>
</IonItem>


{/* Fill */}

{/* Before */}
<IonItem fill="outline" shape="round">
  <IonLabel position="floating">Favorite Fruit:</IonLabel>
  <IonSelect>...</IonSelect>
</IonItem>

{/* After */}

{/* Inputs using `fill` should not be placed in IonItem */}
<IonSelect fill="outline" shape="round" label="Favorite Fruit:" labelPlacement="floating">...</IonSelect>

<!-- Label and Label Position -->

<!-- Before -->
<ion-item>
  <ion-label position="floating">Favorite Fruit:</ion-label>
  <ion-select>...</ion-select>
</ion-item>

<!-- After -->
<ion-item>
  <ion-select label="Favorite Fruit:" label-placement="floating">...</ion-select>
</ion-item>


<!-- Fill -->

<!-- Before -->
<ion-item fill="outline" shape="round">
  <ion-label position="floating">Favorite Fruit:</ion-label>
  <ion-select>...</ion-select>
</ion-item>

<!-- After -->

<!-- Inputs using `fill` should not be placed in ion-item -->
<ion-select fill="outline" shape="round" label="Favorite Fruit:" label-placement="floating">...</ion-select>

Using the Legacy Syntax

Ionic uses heuristics to detect if an app is using the modern select syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the legacy property on ion-select to true to force that instance of the input to use the legacy syntax.

Properties

cancelText

Description	The text to display on the cancel button.
Attribute	`cancel-text`
Type	`string`
Default	`'Cancel'`

color

Description	The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see theming. This property is only available when using the modern select syntax.
Attribute	`color`
Type	`"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`
Default	`undefined`

compareWith

Description	A property name or function used to compare object values
Attribute	`compare-with`
Type	`((currentValue: any, compareValue: any) => boolean) ｜ null ｜ string ｜ undefined`
Default	`undefined`

disabled

Description	If `true`, the user cannot interact with the select.
Attribute	`disabled`
Type	`boolean`
Default	`false`

fill

Description	The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
Attribute	`fill`
Type	`"outline" ｜ "solid" ｜ undefined`
Default	`undefined`

interface

Description	The interface the select should use: `action-sheet`, `popover` or `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	`{}`

justify

Description	How to pack the label and select within a line. `justify` does not apply when the label and select are on different lines when `labelPlacement` is set to `"floating"` or `"stacked"`. `"start"`: The label and select will appear on the left in LTR and on the right in RTL. `"end"`: The label and select will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and select will appear on opposite ends of the line with space between the two elements.
Attribute	`justify`
Type	`"end" ｜ "space-between" ｜ "start"`
Default	`'space-between'`

label

Description	The visible label associated with the select.
Attribute	`label`
Type	`string ｜ undefined`
Default	`undefined`

labelPlacement

Description	Where to place the label relative to the select. `"start"`: The label will appear to the left of the select in LTR and to the right in RTL. `"end"`: The label will appear to the right of the select in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select. `"stacked"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). When using `"floating"` or `"stacked"` we recommend initializing the select with either a `value` or a `placeholder`.
Attribute	`label-placement`
Type	`"end" ｜ "fixed" ｜ "floating" ｜ "stacked" ｜ "start" ｜ undefined`
Default	`'start'`

legacy

Description	Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
Attribute	`legacy`
Type	`boolean ｜ undefined`
Default	`undefined`

mode

Description	The mode determines which platform styles to use.
Attribute	`mode`
Type	`"ios" ｜ "md"`
Default	`undefined`

multiple

Description	If `true`, the select can accept multiple values.
Attribute	`multiple`
Type	`boolean`
Default	`false`

name

Description	The name of the control, which is submitted with the form data.
Attribute	`name`
Type	`string`
Default	`this.inputId`

okText

Description	The text to display on the ok button.
Attribute	`ok-text`
Type	`string`
Default	`'OK'`

placeholder

Description	The text to display when the select is empty.
Attribute	`placeholder`
Type	`string ｜ undefined`
Default	`undefined`

selectedText

Description	The text to display instead of the selected option's value.
Attribute	`selected-text`
Type	`null ｜ string ｜ undefined`
Default	`undefined`

shape

Description	The shape of the select. If "round" it will have an increased border radius.
Attribute	`shape`
Type	`"round" ｜ undefined`
Default	`undefined`

value

Description	The value of the select.
Attribute	`value`
Type	`any`
Default	`undefined`

イベント

Name	Description
`ionBlur`	Emitted when the select loses focus.
`ionCancel`	Emitted when the selection is cancelled.
`ionChange`	Emitted when the value has changed.
`ionDismiss`	Emitted when the overlay is dismissed.
`ionFocus`	Emitted when the select has focus.

メソッド

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`	The select icon container.
`placeholder`	The text displayed in the select when there is no value.
`text`	The displayed value of the select.

CSSカスタムプロパティ

Name	Description
`--background`	Background of the select
`--border-color Color of the select border`
`--border-radius Radius of the select border`
`--border-style Style of the select border`
`--border-width Width of the select border`
`--highlight-color-focused The color of the highlight on the select when focused`
`--highlight-color-invalid The color of the highlight on the select when invalid`
`--highlight-color-valid The color of the highlight on the select when valid`
`--padding-bottom`	Bottom padding of the select
`--padding-end`	Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select
`--padding-start`	Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select
`--padding-top`	Top padding of the select
`--placeholder-color`	Color of the select placeholder text
`--placeholder-opacity`	Opacity of the select placeholder text
`--ripple-color`	The color of the ripple effect on MD mode.

Slots

No slots available for this component.

単一選択​

インターフェイス​

Action Sheet​

Popover​

複数選択​

Responding to Interaction​

Object値について​

Using compareWith​

Object Values and Multiple Selection​

Label Placement​

Justification​

Filled Selects​

SelectのButton​

インターフェイスオプション​

カスタマイズ​

Select 要素のスタイリング​

Select インターフェイスのスタイリング​

Typeahead Component​

Interfaces​

SelectChangeEventDetail​

SelectCustomEvent​

Migrating from Legacy Select Syntax​

Using the Modern Syntax​

Using the Legacy Syntax​

Properties​

cancelText​

color​

compareWith​

disabled​

fill​

interface​

interfaceOptions​

justify​

label​

labelPlacement​

legacy​

mode​

multiple​

name​

okText​

placeholder​

selectedText​

shape​

value​

イベント​

メソッド​

open​

CSS Shadow Parts​

CSSカスタムプロパティ​

Slots​

Contents