Version: v7

ion-select

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

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

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

Labels

Labels should be used to describe the select. They can be used visually, and they will also be read out by screen readers when the user is focused on the select. This makes it easy for the user to understand the intent of the select. Select has several ways to assign a label:

Select has several options for supplying a label for the component:

label property: used for plaintext labels
label slot: used for custom HTML labels
aria-label: used to provide a label for screen readers but adds no visible label

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. While the label property is used here, labelPlacement can also be used with the label slot.

Label Slot

While plaintext labels should be passed in via the label property, if custom HTML is needed, it can be passed through the label slot instead.

No Visible Label

If no visible label is needed, developers should still supply an aria-label so the select is accessible to screen readers.

Single Selection

デフォルトでは、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 Selection

By adding the multiple attribute to select, users are able to select multiple options. When multiple options can be selected, the alert or popover 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 interface 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

Justification

開発者は justify プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。

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 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:

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.

Custom Toggle Icons

The icon that displays next to the select text can be set to any Ionicon using the toggleIcon and/or expandedIcon properties.

Icon Flip Behavior

By default, when the select is open, the toggle icon will automatically rotate on md mode and remain static on ios mode. This behavior can be customized using CSS.

The below example also uses a custom toggleIcon to better demonstrate the flip behavior on ios, since the default icon is vertically symmetrical.

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;
}

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	キャンセルボタンに表示するテキストです。
Attribute	`cancel-text`
Type	`string`
Default	`'Cancel'`

color

Description	アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです：`"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色についての詳細は theming を参照してください。このプロパティは、modern select構文を使用する場合にのみ利用可能です。
Attribute	`color`
Type	`"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`
Default	`undefined`

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`

fill

Description	アイテムの塗りつぶし。もし `"solid"` ならば、アイテムは背景を持つようになります。もし `"outline"` ならば、アイテムはボーダー付きの透明なものになります。md`モードでのみ使用可能です。
Attribute	`fill`
Type	`"outline" ｜ "solid" ｜ undefined`
Default	`undefined`

interface

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

interfaceOptions

Description	alert`、`action-sheet`、`popover`インターフェースが取ることができる追加オプション。各インターフェイスの作成オプションについては、 [ion-alert docs](./alert), [ion-action-sheet docs](./action-sheet), [ion-popover docs](./popover) を参照してください。注意:`interfaceOptions`は`alert`インターフェースで`inputs`や`buttons` をオーバーライドしません。
Attribute	`interface-options`
Type	`any`
Default	`{}`

justify

Description	ラベルとセレクトを1行にまとめる方法。`labelPlacement`が `"floating"` または `"stacked"` に設定されている場合、ラベルとセレクトが異なる行にあるときは `justify` は適用されません。`"start"`：ラベルとセレクトはLTRでは左側に、RTLでは右側に表示されます。`"end"`：ラベルとセレクトはLTRでは右に、RTLでは左に表示されます。"space-between"`：ラベルとセレクトは行の反対側の端に表示され、2つの要素の間にはスペースがあります。
Attribute	`justify`
Type	`"end" ｜ "space-between" ｜ "start"`
Default	`'space-between'`

label

Description	セレクトに関連する可視ラベル。
Attribute	`label`
Type	`string ｜ undefined`
Default	`undefined`

labelPlacement

Description	セレクトに対してラベルを配置する位置。`"start"`：ラベルはLTRではセレクトの左側に、RTLでは右側に表示されます。`"end"`：ラベルはLTRではセレクトの右側に、RTLでは左側に表示されます。"floating"`：ラベルは、セレクトがフォーカスされているか、セレクトに値がある場合、小さく表示され、セレクトの上に表示されます。それ以外の場合は、セレクトの上に表示されます。"stacked"`：ラベルは、セレクトがぼやけた状態や値がない状態でも、小さく表示され、セレクトの上に表示されます。`"fixed"`：ラベルの幅が固定される以外は、`"start"`と同じ動作になります。長いテキストは省略記号（"..."）で切り捨てられます。`"floating"`や "stacked"`を使用する場合は、selectに` value`か`placeholder` のどちらかを指定して初期化することをお勧めします。
Attribute	`label-placement`
Type	`"end" ｜ "fixed" ｜ "floating" ｜ "stacked" ｜ "start" ｜ undefined`
Default	`'start'`

legacy

Description	`legacy`プロパティを`true`に設定すると、レガシーフォームコントロールのマークアップを強制的に使用することができます。Ionicは、コンポーネントが`aria-label`属性または`label`プロパティを使用している場合にのみ、最新のフォームマークアップを選択します。そのため、`legacy`プロパティは、この自動オプトイン動作を回避したい場合にのみ、エスケープハッチとして使用する必要があります。なお、このプロパティはIonicの今後のメジャーリリースで削除され、すべてのフォームコンポーネントはモダンフォームマークアップを使用するようオプトインされる予定です。
Attribute	`legacy`
Type	`boolean ｜ undefined`
Default	`undefined`

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`

shape

Description	セレクトの形状を指定します。`round`の場合、境界線の半径が大きくなります。
Attribute	`shape`
Type	`"round" ｜ undefined`
Default	`undefined`

value

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

Events

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

Methods

open

Description	セレクトオーバーレイを開きます。オーバーレイは `ion-select` の `interface` プロパティによって、アラート、アクションシート、ポップオーバーのいずれかになります。
Signature	`open(event?: UIEvent) => Promise<any>`

CSS Shadow Parts

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

CSS Custom Properties

Name	Description
`--background`	セレクトの背景
`--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
`--padding-end`	セレクトの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingを行う
`--padding-start`	セレクトの方向が左から右の場合はLeft Padding、右から左の場合はRight Padding
`--padding-top`	セレクトのTop Padding
`--placeholder-color`	セレクトPlaceholderテキストの色
`--placeholder-opacity`	選択Placeholderテキストの不透明度
`--ripple-color`	MDモード時のリップルエフェクトの色です。

Slots

No slots available for this component.

Labels​

Label Placement​

Label Slot​

No Visible Label​

Single Selection​

インターフェイス​

Action Sheet​

Popover​

Multiple Selection​

Responding to Interaction​

Object Value References​

Using compareWith​

Object Values and Multiple Selection​

Justification​

Filled Selects​

Select Buttons​

Interface Options​

Customization​

Styling Select Element​

Styling Select Interface​

Custom Toggle Icons​

Icon Flip Behavior​

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​

Events​

Methods​

open​

CSS Shadow Parts​

CSS Custom Properties​

Slots​

Contents