バージョン: v8

ion-select

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

セレクトは、子要素である<ion-select-option>要素と一緒に使用する必要があります。子オプションにvalue属性が指定されていない場合、そのテキストが値として使用されます。

<ion-select>にvalueが設定されている場合、選択されたオプションはその値に基づいて選択されます。

ラベル

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

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

labelプロパティ：プレーンテキストのラベルに使用します
labelスロット：カスタムHTMLラベルに使用します
aria-label：スクリーンリーダーにラベルを提供するために使用しますが、表示されるラベルは追加しません

ラベルの配置

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

ラベルスロット

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

表示ラベルなし

表示ラベルが必要ない場合でも、開発者はスクリーンリーダーでセレクトにアクセスできるように、aria-labelを指定する必要があります。

単一選択

デフォルトでは、セレクトではユーザーは1つのオプションのみを選択できます。アラートインターフェースには、ラジオボタン形式のオプションのリストが表示されます。セレクトコンポーネントの値には、選択したオプションの値が設定されます。

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

複数選択

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

注意

action-sheetインターフェースは、複数選択ではサポートされていません。

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

インターフェース

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

アラート

アクションシート

インタラクションへの応答

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

コンソール

上記の例からログに記録された場合、コンソールメッセージがここに表示されます。

オブジェクト値参照

セレクト値にオブジェクトを使用する場合、選択した値の同一性が同じままであっても、サーバーまたはデータベースからオブジェクトが取得されると、これらのオブジェクトの同一性が変化する可能性があります。たとえば、目的のオブジェクト値を持つ既存のレコードがセレクトにロードされたが、新しく取得したセレクトオプションが異なる同一性を持つようになった場合に、このようなことが起こる可能性があります。これにより、元の選択はそのまま残っていても、セレクトには値がないように見えます。

デフォルトでは、セレクトは厳密等価性（===）を使用して、オプションが選択されているかどうかを判断します。これは、compareWithプロパティにプロパティ名または関数を指定することで上書きできます。

compareWithの使用

コンソール

上記の例からログに記録された場合、コンソールメッセージがここに表示されます。

オブジェクト値と複数選択

コンソール

上記の例からログに記録された場合、コンソールメッセージがここに表示されます。

配置

開発者は、justifyプロパティを使用して、ラベルとコントロールを1行にどのように配置するかを制御できます。

塗りつぶされたセレクト

マテリアルデザインでは、セレクトの塗りつぶしスタイルが提供されています。セレクトのfillプロパティは、"solid"または"outline"のいずれかに設定できます。

塗りつぶされたセレクトは、セレクトのmodeをmdに設定することで、iOSで使用できます。

警告

fillを使用するセレクトは、コンポーネント間のスタイルの競合により、ion-itemで使用しないでください。

セレクトボタン

アラートは、キャンセルとOKの2つのボタンをサポートしています。各ボタンのテキストは、cancelTextプロパティとokTextプロパティを使用してカスタマイズできます。

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

modal インターフェースには、ヘッダーに単一の 閉じる ボタンがあります。このボタンは、モーダルを閉じるだけです。このボタンをクリックした後、または別の方法でモーダルを閉じた場合でも、選択した内容は保持されます。

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

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

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

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

開始スロットと終了スロット

start および end スロットを使用して、select の両側にアイコン、ボタン、またはプレフィックス/サフィックステキストを配置できます。スロットのコンテンツをクリックしても、select は開きません。

注意

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

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

カスタマイズ

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

Select 要素のスタイル設定

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

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

Select インターフェースのスタイル設定

インターフェースダイアログのカスタマイズは、そのインターフェースのドキュメントのスタイル設定セクション (CSS シャドウパーツ、CSS カスタムプロパティ、およびスロット) に従う必要があります。

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

カスタムトグルアイコン

select テキストの横に表示されるアイコンは、toggleIcon および/または expandedIcon プロパティを使用して、任意の Ionicon に設定できます。

アイコンの反転動作

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

以下の例では、ios での反転動作をより適切に実証するために、カスタム toggleIcon も使用しています。デフォルトのアイコンは垂直に対称であるためです。

タイプアヘッドコンポーネント

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

インターフェース

SelectChangeEventDetail

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

SelectCustomEvent

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

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

従来の Select 構文からの移行

Ionic 7.0 では、よりシンプルな select 構文が導入されました。この新しい構文は、select をセットアップするために必要なボイラープレートを減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。

開発者は、一度に 1 つずつ select の移行を実行できます。開発者は引き続き従来の構文を使用できますが、できるだけ早く移行することをお勧めします。

モダン構文の使用

モダン構文を使用するには、2 つの手順が必要です。

ion-label を削除し、代わりに ion-select の label プロパティを使用します。ラベルの配置は、ion-select の labelPlacement プロパティを使用して構成できます。
ion-item から fill および shape の使用を 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>

従来の構文の使用

Ionic は、アプリがモダン select 構文を使用しているかどうかを検出するためにヒューリスティックを使用します。場合によっては、従来の構文を使い続ける方が望ましい場合があります。開発者は、ion-select の legacy プロパティを true に設定して、その入力のインスタンスで従来の構文を強制的に使用できます。

アクセシビリティ

キーボード操作

Ionic のキーボード操作は、すべてのプラットフォームで一貫したエクスペリエンスを実現するために、ネイティブ iOS の select ではなく、Web の実装パターンに従います。

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

select が閉じている。
select がフォーカスされている。
select が無効になっていない。

キー	説明
`Enter`	オーバーレイを開き、最初に選択したオプションにフォーカスします。選択したオプションがない場合は、最初のオプションにフォーカスします。
`スペース`	オーバーレイを開き、最初に選択したオプションにフォーカスします。選択したオプションがない場合は、最初のオプションにフォーカスします。

単一選択

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

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

キー	説明
`ArrowDown`	リスト内の次のオプションにフォーカスして選択します。次のオプションがない場合は、選択が最初のオプションにサイクルします。
`ArrowLeft`	リスト内の前のオプションにフォーカスして選択します。前のオプションがない場合は、選択が最後のオプションにサイクルします。
`ArrowRight`	リスト内の次のオプションにフォーカスして選択します。次のオプションがない場合は、選択が最初のオプションにサイクルします。
`ArrowUp`	リスト内の前のオプションにフォーカスして選択します。前のオプションがない場合は、選択が最後のオプションにサイクルします。
`Enter`	オプションがフォーカスされている場合、そのオプションを選択します。`OK` ボタンがないオーバーレイは、値をすぐにコミットし、オーバーレイを閉じて、`ion-select` 要素にフォーカスを戻します。 `OK` ボタンがフォーカスされている場合は、ユーザーの選択を保存し、オーバーレイを閉じて、`ion-select` 要素にフォーカスを戻します。
`Escape`	送信されたオプションを変更せずにオーバーレイを閉じます。フォーカスを `ion-select` 要素に戻します。
`スペース`	フォーカスされたラジオボタンがチェックされていない場合は、現在チェックされているラジオボタンのチェックを外し、フォーカスされたラジオボタンをチェックします。それ以外の場合は、何も行いません。オーバーレイに `OK` ボタンがない場合は、値がすぐにコミットされ、オーバーレイが閉じます。
`Tab`	オーバーレイ上の次のフォーカス可能な要素 (キャンセルボタン、`OK` ボタン、または選択されたオプションまたは最初のオプションのいずれか) にフォーカスを移動します。次のフォーカス可能な要素がオプションである場合は、選択されたオプションにフォーカスし、それ以外の場合は最初のオプションにフォーカスします。

複数選択

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

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

キー	説明
`Enter`	`OK` ボタンがフォーカスされている場合、ユーザーの選択を保存し、オーバーレイを閉じて、`ion-select` 要素にフォーカスを戻します。
`Escape`	送信されたオプションを変更せずにオーバーレイを閉じます。フォーカスを `ion-select` 要素に戻します。
`スペース`	現在フォーカスされているオプションを選択または選択解除します。これにより、他の選択されているオプションが選択解除されることはありません。オーバーレイに `OK` ボタンがない場合は、値がすぐにコミットされます。
`Tab`	オーバーレイ上の次のフォーカス可能な要素（キャンセルボタン、'OK'ボタン、またはオプションのいずれか）にフォーカスを移動します。次のフォーカス可能な要素がオプションリストの場合、各オプションを順に反復処理する必要があります。

プロパティ

cancelText

説明	キャンセルボタンに表示するテキスト。
属性	`cancel-text`
型	`string`
デフォルト	`'キャンセル'`

color

説明	アプリケーションのカラーパレットで使用する色。デフォルトのオプションは、`"primary"`、`"secondary"`、`"tertiary"`、`"success"`、`"warning"`、`"danger"`、`"light"`、`"medium"`、`"dark"`です。色の詳細については、テーマ設定を参照してください。このプロパティは、最新のselect構文を使用している場合にのみ利用可能です。
属性	`color`
型	`"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined`
デフォルト	`undefined`

compareWith

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

disabled

説明	`true`の場合、ユーザーはselectを操作できません。
属性	`disabled`
型	`boolean`
デフォルト	`false`

expandedIcon

説明	selectが開いているときに表示するトグルアイコン。定義されている場合、`md`モードでのアイコン回転の動作は無効になります。未定義の場合、selectが開いているときと閉じているときの両方で`toggleIcon`が使用されます。
属性	`expanded-icon`
型	`string ｜ undefined`
デフォルト	`undefined`

fill

説明	アイテムの塗りつぶし。`"solid"`の場合、アイテムには背景が設定されます。`"outline"`の場合、アイテムはボーダー付きの透明になります。`md`モードでのみ使用可能です。
属性	`fill`
型	`"outline" ｜ "solid" ｜ undefined`
デフォルト	`undefined`

interface

説明	selectが使用するインターフェース：`action-sheet`、`popover`、`alert`、または`modal`。
属性	`interface`
型	`"action-sheet" ｜ "alert" ｜ "modal" ｜ "popover"`
デフォルト	`'alert'`

interfaceOptions

説明	`alert`、`action-sheet`、または`popover`インターフェースが使用できる追加オプション。各インターフェースの作成オプションについては、ion-alertドキュメント、ion-action-sheetドキュメント、ion-popoverドキュメント、およびion-modalドキュメントを参照してください。注意：`interfaceOptions` は、`alert` インターフェースで `inputs` または `buttons` を上書きしません。
属性	`interface-options`
型	`any`
デフォルト	`{}`

justify

説明	行内のラベルとselectの配置方法。`labelPlacement`が`"floating"`または`"stacked"`に設定されている場合、ラベルとselectが別の行にあるときは、`justify`は適用されません。`"start"`：ラベルとselectは、LTRでは左側に、RTLでは右側に表示されます。`"end"`：ラベルとselectは、LTRでは右側に、RTLでは左側に表示されます。`"space-between"`：ラベルとselectは、行の両端に表示され、2つの要素の間にはスペースがあります。
属性	`justify`
型	`"end" ｜ "space-between" ｜ "start" ｜ undefined`
デフォルト	`undefined`

label

説明	selectに関連付けられた可視ラベル。プレーンテキストのラベルをレンダリングする必要がある場合は、これを使用します。 `label`プロパティは、`label`スロットの両方が使用されている場合、`label`スロットよりも優先されます。
属性	`label`
型	`string ｜ undefined`
デフォルト	`undefined`

labelPlacement

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

mode

説明	モードは、使用するプラットフォームのスタイルを決定します。
属性	`mode`
型	`"ios" ｜ "md"`
デフォルト	`undefined`

multiple

説明	`true`の場合、selectは複数の値を受け入れることができます。
属性	`multiple`
型	`boolean`
デフォルト	`false`

name

説明	フォームデータとともに送信されるコントロールの名前。
属性	`name`
型	`string`
デフォルト	`this.inputId`

okText

説明	OKボタンに表示するテキスト。
属性	`ok-text`
型	`string`
デフォルト	`'OK'`

placeholder

説明	selectが空の場合に表示するテキスト。
属性	`placeholder`
型	`string ｜ undefined`
デフォルト	`undefined`

selectedText

説明	選択されたオプションの値の代わりに表示するテキスト。
属性	`selected-text`
型	`null ｜ string ｜ undefined`
デフォルト	`undefined`

shape

説明	selectの形状。「round」の場合、ボーダー半径が増加します。
属性	`shape`
型	`"round" ｜ undefined`
デフォルト	`undefined`

toggleIcon

説明	使用するトグルアイコン。`ios`モードの場合は`chevronExpand`、`md`モードの場合は`caretDownSharp`がデフォルトです。
属性	`toggle-icon`
型	`string ｜ undefined`
デフォルト	`undefined`

value

説明	selectの値。
属性	`value`
型	`any`
デフォルト	`undefined`

イベント

名前	説明	バブル
`ionBlur`	selectがフォーカスを失ったときに発生します。	`true`
`ionCancel`	選択がキャンセルされたときに発生します。	`true`
`ionChange`	値が変更されたときに発生します。このイベントは、プログラムで`value`プロパティを設定する場合は発生しません。	`true`
`ionDismiss`	オーバーレイが閉じられたときに発生します。	`true`
`ionFocus`	selectにフォーカスがあるときに発生します。	`true`

メソッド

open

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

CSSシャドウパーツ

名前	説明
`container`	選択されたテキストまたはプレースホルダーのコンテナ。
`icon`	selectアイコンコンテナ。
`label`	label
`placeholder`	placeholder
`text`	selectの表示値。

CSSカスタムプロパティ

名前	説明
`--background`	selectの背景
`--border-color`	selectのボーダーの色
`--border-radius`	selectのボーダーの半径。fill="outline"を使用する場合、半径が大きいと不均一に表示される可能性があります。必要な場合は、代わりにshape="round"を使用するか、--padding-startを大きくしてください。
`--border-style`	selectのボーダーのスタイル
`--border-width`	selectのボーダーの幅
`--highlight-color-focused`	フォーカス時のselectのハイライトの色
`--highlight-color-invalid`	無効な場合のselectのハイライトの色
`--highlight-color-valid`	有効な場合のselectのハイライトの色
`--highlight-height`	selectのハイライトの高さ。mdモードにのみ適用されます。
`--padding-bottom`	selectの下部のパディング
`--padding-end`	方向が左から右の場合は右側のパディング、方向が右から左の場合はselectの左側のパディング
`--padding-start`	方向が左から右の場合は左側のパディング、方向が右から左の場合はselectの右側のパディング
`--padding-top`	selectの上部のパディング
`--placeholder-color`	selectのプレースホルダーテキストの色
`--placeholder-opacity`	selectのプレースホルダーテキストの不透明度
`--ripple-color`	MDモードでのリップル効果の色。

名前	説明
`--background`	selectの背景
`--border-color`	selectのボーダーの色
`--border-radius`	selectのボーダーの半径。fill="outline"を使用する場合、半径が大きいと不均一に表示される可能性があります。必要な場合は、代わりにshape="round"を使用するか、--padding-startを大きくしてください。
`--border-style`	selectのボーダーのスタイル
`--border-width`	selectのボーダーの幅
`--highlight-color-focused`	フォーカス時のselectのハイライトの色
`--highlight-color-invalid`	無効な場合のselectのハイライトの色
`--highlight-color-valid`	有効な場合のselectのハイライトの色
`--highlight-height`	selectのハイライトの高さ。mdモードにのみ適用されます。
`--padding-bottom`	selectの下部のパディング
`--padding-end`	方向が左から右の場合は右側のパディング、方向が右から左の場合はselectの左側のパディング
`--padding-start`	方向が左から右の場合は左側のパディング、方向が右から左の場合はselectの右側のパディング
`--padding-top`	selectの上部のパディング
`--placeholder-color`	selectのプレースホルダーテキストの色
`--placeholder-opacity`	selectのプレースホルダーテキストの不透明度
`--ripple-color`	MDモードでのリップル効果の色。

スロット

名前	説明
`end`	セレクトの末尾に表示するコンテンツ。
`label`	セレクトに関連付けるラベルテキスト。ラベルをセレクトのどの位置に配置するかは、`labelPlacement`プロパティで制御します。カスタムHTMLでラベルをレンダリングする必要がある場合に使用します。
`start`	セレクトの先頭に表示するコンテンツ。

ラベル​

ラベルの配置​

ラベルスロット​

表示ラベルなし​

単一選択​

複数選択​

インターフェース​

アラート​

アクションシート​

ポップオーバー​

モーダル​

インタラクションへの応答​

オブジェクト値参照​

compareWithの使用​

オブジェクト値と複数選択​

配置​

塗りつぶされたセレクト​

セレクトボタン​

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

開始スロットと終了スロット​

カスタマイズ​

Select 要素のスタイル設定​

Select インターフェースのスタイル設定​

カスタム トグル アイコン​

アイコンの反転動作​

タイプアヘッド コンポーネント​

インターフェース​

SelectChangeEventDetail​

SelectCustomEvent​

従来の Select 構文からの移行​

モダン構文の使用​

従来の構文の使用​

アクセシビリティ​

キーボード操作​

単一選択​

複数選択​

プロパティ​

cancelText​

color​

compareWith​

disabled​

expandedIcon​

fill​

interface​

interfaceOptions​

justify​

label​

labelPlacement​

mode​

multiple​

name​

okText​

placeholder​

selectedText​

shape​

toggleIcon​

value​

イベント​

メソッド​

open​

CSSシャドウパーツ​

CSSカスタムプロパティ​

スロット​

目次

ラベル

ラベルの配置

ラベルスロット

表示ラベルなし

単一選択

複数選択

インターフェース

アラート

アクションシート

ポップオーバー

モーダル

インタラクションへの応答

オブジェクト値参照

compareWithの使用

オブジェクト値と複数選択

配置

塗りつぶされたセレクト

セレクトボタン

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

開始スロットと終了スロット

カスタマイズ

Select 要素のスタイル設定

Select インターフェースのスタイル設定

カスタムトグルアイコン

アイコンの反転動作

タイプアヘッドコンポーネント

インターフェース

SelectChangeEventDetail

SelectCustomEvent

従来の Select 構文からの移行

モダン構文の使用

従来の構文の使用

アクセシビリティ

キーボード操作

単一選択

複数選択

プロパティ

cancelText

color

compareWith

disabled

expandedIcon

fill

interface

interfaceOptions

justify

label

labelPlacement

mode

multiple

name

okText

placeholder

selectedText

shape

toggleIcon

value

イベント

メソッド

open

CSSシャドウパーツ

CSSカスタムプロパティ

スロット