Skip to main content
Version: v9

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​

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などのインタラクティブ要素でラップする必要があります。これにより、コンテンツにタブで移動できるようになります。

リッチコンテンツオプション​

important

select option のリッチコンテンツはデフォルトで無効です。グローバル Ionic config で innerHTMLTemplatesEnabled を true に設定してください。無効な場合、option 内のマークアップはプレーンテキストとして扱われます。カスタム HTML を有効にする際のサニタイズについては、セキュリティを参照してください。

単一のテキストラベルに加えて、Select Option では select インターフェースに HTML リッチコンテンツを含めることができます。名前付き slot を指定せずに option 内へ追加した要素は、デフォルト slot に配置されます。start と end slot は、デフォルト slot の両側に要素を配置します。description 属性を使用すると、ラベルの下に補足テキストを表示できます。

これは、閉じた状態のフィールドを装飾する ion-select の Start と End Slot とは別のものです。リッチコンテンツオプションは、select を開いた後のインターフェースに表示されます。

option を選択すると、閉じた状態のフィールドには option のテキストコンテンツだけがプレーンテキストとして表示されます。HTML マークアップは取り除かれ、start、end slot と description 属性は選択後の表示には含まれません。

カスタマイズ​

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

Select要素のスタイリング​

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

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

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

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

ただし、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キャンセルボタンに表示するテキストです。
Attributecancel-text
Typestring
Default'Cancel'

color​

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

compareWith​

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

disabled​

Descriptiontrueの場合、ユーザはセレクトと対話することができません。
Attributedisabled
Typeboolean
Defaultfalse

errorText​

DescriptionText that is placed under the select and displayed when an error is detected.
Attributeerror-text
Typestring ｜ undefined
Defaultundefined

expandedIcon​

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

fill​

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

helperText​

DescriptionText that is placed under the select and displayed when no error is detected.
Attributehelper-text
Typestring ｜ undefined
Defaultundefined

interface​

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

interfaceOptions​

Descriptionalert、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` を上書きしない。
Attributeinterface-options
Typeany
Default{}

justify​

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

label​

Descriptionセレクトに関連付けられた可視ラベル。 プレーンテキストのラベルをレンダリングする必要がある場合に使用する。 labelプロパティは label スロットよりも優先される。
Attributelabel
Typestring ｜ undefined
Defaultundefined

labelPlacement​

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

mode​

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。

This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attributemode
Type"ios" ｜ "md"
Defaultundefined

multiple​

Descriptiontrueの場合、selectは複数の値を受け入れることができる。
Attributemultiple
Typeboolean
Defaultfalse

name​

Descriptionフォームデータとともに送信されるコントロールの名前。
Attributename
Typestring
Defaultthis.inputId

okText​

Descriptionokボタンに表示するテキストです。
Attributeok-text
Typestring
Default'OK'

placeholder​

Descriptionセレクトが空のときに表示するテキストです。
Attributeplaceholder
Typestring ｜ undefined
Defaultundefined

required​

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

selectedText​

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

shape​

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

toggleIcon​

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

value​

Descriptionセレクトの値です。
Attributevalue
Typeany
Defaultundefined

イベント​

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

メソッド​

open​

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

CSS Shadow Parts​

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

CSS カスタムプロパティ​

NameDescription
--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-colorMDモード時のリップルエフェクトの色です。

Slots​

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

Contents

Edit this page