ion-select

shadow

セレクトは、一連のオプションから1つまたは複数のオプションを選択するためのフォームコントロールです。ユーザーがセレクトをタップすると、ダイアログが表示され、すべてのオプションが大きく選択しやすいリストに表示されます。

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

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

Labels

ラベルは、Selectを説明するために使用します。これらは視覚的に使用することができ、また、ユーザーがSelectにフォーカスしているときには、スクリーンリーダーによって読み上げられます。これにより、ユーザーはSelectの意図を理解しやすくなります。セレクトには、ラベルを割り当てるいくつかの方法があります：

セレクトには、コンポーネントにラベルを指定するためのいくつかのオプションがあります：

• labelプロパティ：プレーンテキストのラベルに使用します。
• labelスロット：カスタム HTML ラベルに使用する。
• aria-label：スクリーンリーダー用のラベルとして使用されるが、ラベルは表示されない。

Label Placement

ラベルはデフォルトではコンテンツの幅を占めます。開発者は labelPlacement プロパティを使用して、コントロールに対するラベルの配置を制御することができます。ここでは label プロパティを使用しているが、labelPlacement は label スロットと一緒に使用することもできます。

Label Slot

プレーンテキストのラベルは label プロパティで渡すべきですが、カスタムHTMLが必要な場合は、代わりに label スロットで渡すことができます。

No Visible Label

表示するラベルが必要ない場合でも、開発者はaria-labelを指定する必要があります

Single Selection

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

単一選択時のキーボード操作については、以下のキーボード操作のセクションで説明しています。

複数選択

select に multiple 属性を追加することで、ユーザは複数のオプションを選択することができます。複数のオプションを選択できる場合、アラート、ポップオーバー、またはモーダルオーバーレイは、チェックボックススタイルのオプションリストをユーザに提示します。select コンポーネントの値は、選択されたすべてのオプション値の配列を受け取ります。

note

注意: action-sheet インターフェースは複数選択では動作しません。

複数選択時のキーボード操作については、以下のキーボード操作のセクションで説明しています。

インターフェイス

デフォルトでは、selectは ion-alert を使用してアラートのオプションのオーバーレイを開きます。インターフェイスは、interface プロパティに action-sheet、popover、modal を渡すことで、ion-action-sheet、ion-popover、ion-modal を使用するように変更することができます。それぞれのインターフェースの制限事項については、他のセクションを参照してください。

Alert

Action Sheet

Popover

Modal

Responding to Interaction

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

Console

Console messages will appear here when logged from the example above.

オブジェクト値の参照

Selectの値にオブジェクトを使用する場合、Selectの値のidentityはそのままで、サーバやデータベースから取得したオブジェクトのidentityが変わってしまうことがあります。例えば、希望するオブジェクト値を持つ既存のレコードがSelectに読み込まれたが、新しく取得されたselectオプションのIDが異なる場合、このようなことが起こりえます。その結果、Selectは、元のSelectがそのまま残っているにもかかわらず、全く値がないように見えることになります。

デフォルトでは、Select はオプションが選択されているかどうかを決定するために厳密な等式 (===) を使用します。これは、プロパティ名または関数を compareWith プロパティに指定することでオーバーライドできます。

Using compareWith

Console

Console messages will appear here when logged from the example above.

Object Values and Multiple Selection

Console

Console messages will appear here when logged from the example above.

Justification

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

Filled Selects

Material DesignはセレクトにFilledスタイルを提供します。select の fill プロパティは "solid" または "outline" のいずれかに設定できます。

iOSでは、Selectの mode を md に設定することで、Filled Selectsを使うことができます。

warning

コンポーネント間のスタイリングの競合のため、fillを使用するセレクトはion-item内で使用すべきではありません。

Select Buttons

アラートは Cancel と OK の2つのボタンをサポートしている。それぞれのボタンのテキストは cancelText と okText プロパティを使ってカスタマイズすることができます。

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

modalインターフェースには、ヘッダーに単一のCloseボタンがあります。このボタンは、モーダルを閉じることのみを担当します。 このボタンをクリックした後、または代替方法でモーダルが閉じられた場合でも、行われた選択は保持されます。

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

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

各インターフェースが受け入れるプロパティについては、ion-alertドキュメント、ion-action-sheetドキュメント、ion-popoverドキュメント、およびion-modalドキュメントを参照してください。

注意: alert インターフェイスでは、interfaceOptions は inputs や buttons を上書きしません。

Start and End Slots

startとendスロットは、セレクトの両側にアイコン、ボタン、またはプレフィックス/サフィックステキストを配置するために使用できます。スロットコンテンツがクリックされた場合、セレクトは開きません。

note

ほとんどの場合、これらのスロットに配置されたIconコンポーネントはaria-hidden="true"を持つべきです。詳細については、Iconアクセシビリティドキュメントを参照してください。

スロットコンテンツが操作対象である場合、Buttonなどのインタラクティブ要素でラップする必要があります。これにより、コンテンツにタブで移動できるようになります。

カスタマイズ

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

Select要素のスタイリング

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

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

セレクトインターフェースのスタイリング

インターフェイス・ダイアログのカスタマイズは、そのインターフェイスのドキュメントのスタイリングセクション（CSS Shadow Parts、CSS カスタムプロパティ、スロット）に 従って行ってください。

• Alert
• Action Sheet
• Popover
• Modal

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

カスタム切り替えアイコン

選択テキストの隣に表示されるアイコンは、toggleIcon プロパティと expandedIcon プロパティを使用して、任意の Ionicon に設定することができます。

アイコンの反転動作

デフォルトでは、セレクトを開いているとき、トグルアイコンは md モードでは自動的に回転し、ios モードでは静止します。この動作はCSSを使ってカスタマイズすることができます。

以下の例ではcustom toggleIconを使って、iosモードでのトグルアイコンの反転動作をより分かりやすく説明しています。

Typeahead Component

Typeaheadまたはオートコンプリート機能は、既存のIonicコンポーネントを使用して構築できます。利用可能なスクリーンスペースを最大限に活用するために、ion-modalを使用することをお勧めします。

Helper & Error Text

ヘルパーテキストとエラーテキストは、helperTextとerrorTextプロパティを使用してセレクト内で使用できます。エラーテキストは、ion-invalidとion-touchedクラスがion-selectに追加されていない限り表示されません。これにより、ユーザーがデータを入力する前にエラーが表示されることはありません。

Angularでは、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいてクラスを手動で追加する必要があります。

インターフェイス

SelectChangeEventDetail

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

SelectCustomEvent

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

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

アクセシビリティ

キーボード操作

Ionic のキーボード操作は、すべてのプラットフォームで一貫した体験を提供するため、iOS ネイティブの選択要素ではなく Web の実装パターンに従います。

次の条件を満たす場合、これらのキーボード操作はすべての ion-select 要素に適用されます。

• 選択要素が閉じている。
• 選択要素にフォーカスがある。
• 選択要素が無効化されていない。

キー	説明
Enter	オーバーレイを開き、最初に選択されているオプションにフォーカスします。選択がない場合は最初の項目に移動します。
Space	オーバーレイを開き、最初に選択されているオプションにフォーカスします。選択がない場合は最初の項目に移動します。

単一選択

単一選択のキーボード操作は、ARIA のラジオボタン実装パターンに従います。

これらのキーボード操作は、オーバーレイが表示され、フォーカスされている場合にion-action-sheet、ion-alert、ion-popover、およびion-modal要素に適用されます。

キー	説明
ArrowDown	リスト内の次のオプションにフォーカスして選択します。次のオプションがない場合は、先頭に戻ります。
ArrowLeft	リスト内の前のオプションにフォーカスして選択します。前のオプションがない場合は、末尾に移動します。
ArrowRight	リスト内の次のオプションにフォーカスして選択します。次のオプションがない場合は、先頭に戻ります。
ArrowUp	リスト内の前のオプションにフォーカスして選択します。前のオプションがない場合は、末尾に移動します。
Enter	オプションにフォーカスがある場合は、そのオプションを選択します。「OK」ボタンがないオーバーレイでは、値をすぐに確定し、オーバーレイを閉じて ion-select 要素へフォーカスを戻します。 「OK」ボタンにフォーカスがある場合は、選択内容を保存してオーバーレイを閉じ、ion-select 要素へフォーカスを戻します。
Escape	選択内容を変更せずにオーバーレイを閉じ、ion-select 要素へフォーカスを戻します。
Space	フォーカス中のラジオボタンが未選択なら、現在の選択を解除してそのボタンを選択します。すでに選択されている場合は何もしません。「OK」ボタンがないオーバーレイでは、値をすぐに確定してオーバーレイを閉じます。
Tab	オーバーレイ上の次のフォーカス可能な要素（キャンセルボタン、「OK」ボタン、選択中または最初のオプション）へ移動します。次の要素がオプションなら選択中のオプションに、そうでなければ最初のオプションにフォーカスします。

複数選択

複数選択のキーボード操作は、ARIA のチェックボックス実装パターンに従います。

これらのキーボード操作は、オーバーレイが表示され、複数選択が有効になっている場合にion-alert、ion-popover、およびion-modal要素に適用されます。

キー	説明
Enter	「OK」ボタンにフォーカスがある場合は、選択内容を保存してオーバーレイを閉じ、ion-select 要素へフォーカスを戻します。
Escape	選択内容を変更せずにオーバーレイを閉じ、ion-select 要素へフォーカスを戻します。
Space	現在フォーカスしているオプションを選択または選択解除します。他の選択済みオプションは解除しません。「OK」ボタンがないオーバーレイでは、値をすぐに確定します。
Tab	オーバーレイ上の次のフォーカス可能な要素（キャンセルボタン、「OK」ボタン、いずれかのオプション）へ移動します。次の要素がオプションリストの場合は、各オプションを順に移動します。

プロパティ

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 ｜ undefined
Default	undefined

compareWith

Description	このプロパティを使用すると、開発者は、ion-select で選択されたオプションを決定するときにオブジェクトを比較するためのカスタム関数またはプロパティ名を指定できます。指定しない場合、デフォルトの動作では比較に厳密な等式 (===) が使用されます。
Attribute	compare-with
Type	((currentValue: any, compareValue: any) => boolean) ｜ null ｜ string ｜ undefined
Default	undefined

disabled

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

errorText

Description	Text that is placed under the select and displayed when an error is detected.
Attribute	error-text
Type	string ｜ undefined
Default	undefined

expandedIcon

Description	セレクトが開いているときに表示するトグルアイコン。定義されている場合、mdモードでのアイコン回転の動作は無効になる。未定義の場合、セレクトが開いているときも閉じているときも toggleIcon が使用される。
Attribute	expanded-icon
Type	string ｜ undefined
Default	undefined

fill

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

helperText

Description	Text that is placed under the select and displayed when no error is detected.
Attribute	helper-text
Type	string ｜ undefined
Default	undefined

interface

Description	セレクトが使用するインターフェース：action-sheet, popover, alert, または modal`.
Attribute	interface
Type	"action-sheet" ｜ "alert" ｜ "modal" ｜ "popover"
Default	'alert'

interfaceOptions

Description	alert、action-sheet、popoverインターフェースが取ることができる追加オプション。各インターフェイスの作成オプションについては、[ion-alert docs](./alert), [ion-action-sheet docs](./action-sheet), [ion-popover docs](./popover), [ion-modal docs](./modal) を参照してください。 注意: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" ｜ undefined
Default	undefined

label

Description	セレクトに関連付けられた可視ラベル。 プレーンテキストのラベルをレンダリングする必要がある場合に使用する。 labelプロパティは label スロットよりも優先される。
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'

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。 This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
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

required

Description	true の場合、スクリーンリーダーは必須項目として読み上げます。このプロパティはアクセシビリティ目的でのみ機能し、値が無効でもフォーム送信は妨げません。
Attribute	required
Type	boolean
Default	false

selectedText

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

shape

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

toggleIcon

Description	使用するトグルアイコン。デフォルトは ios モードの場合は chevronExpand で、md モードの場合は caretDownSharp である。
Attribute	toggle-icon
Type	string ｜ undefined
Default	undefined

value

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

イベント

Name	Description	Bubbles
ionBlur	セレクトのフォーカスが外れたときに発行されます。	true
ionCancel	選択がキャンセルされたときに発行されます。	true
ionChange	値が変更されたときに発行される。 プログラムで value プロパティを設定した場合は、このイベントは発生しない。	true
ionDismiss	オーバーレイが解除されたときに発行されます。	true
ionFocus	セレクトにフォーカスが当たったときに発行されます。	true

メソッド

open

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

CSS Shadow Parts

Name	Description
container	セレクトテキストまたはプレースホルダーのコンテナ。
error-text	Supporting text displayed beneath the select when the select is invalid and touched.
helper-text	Supporting text displayed beneath the select when the select is valid.
icon	セレクトアイコンのコンテナです。
label	セレクトを表すラベルテキスト。
placeholder	値がないときにセレクトに表示されるテキスト。
supporting-text	Supporting text displayed beneath the select.
text	セレクトの表示値です。

CSS カスタムプロパティ

iOS

Name	Description
--background	セレクトの背景
--border-color	セレクトボーダーの色
--border-radius	選択枠の半径。fill="outline "を使う場合、半径が大きいと表示が不均一になることがあります。
--border-style	セレクトボーダーのスタイル
--border-width	セレクトボーダーの幅
--highlight-color-focused	フォーカス時のセレクトのハイライトの色
--highlight-color-invalid	無効時のセレクトのハイライトの色
--highlight-color-valid	有効時のセレクトのハイライトの色
--highlight-height	セレクトのハイライトの高さ。mdモードにのみ適用される。
--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モード時のリップルエフェクトの色です。

MD

Name	Description
--background	セレクトの背景
--border-color	セレクトボーダーの色
--border-radius	選択枠の半径。fill="outline "を使う場合、半径が大きいと表示が不均一になることがあります。
--border-style	セレクトボーダーのスタイル
--border-width	セレクトボーダーの幅
--highlight-color-focused	フォーカス時のセレクトのハイライトの色
--highlight-color-invalid	無効時のセレクトのハイライトの色
--highlight-color-valid	有効時のセレクトのハイライトの色
--highlight-height	セレクトのハイライトの高さ。mdモードにのみ適用される。
--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

Name	Description
end	セレクトの最後尾に表示するコンテンツ。
label	セレクトに関連付けるラベルテキスト。labelPlacementプロパティを使用して、selectに対するラベルの位置を制御します。ラベルをカスタムHTMLでレンダリングする必要がある場合に使用します。
start	セレクトの最先端に表示するコンテンツ。