Selectセレクト

ドロップダウンセレクトコンポーネントは、ドロップダウンメニューで複数のオプションを提供し、ユーザーが必要なコンテンツを素早く選択できるようにします。

このページでは主に <mdui-select> コンポーネントの使用方法について説明します。ドロップダウンメニュー項目の使用方法については、<mdui-menu-item> を参照してください。

使用方法

コンポーネントを必要に応じてインポートします：

import 'mdui/components/select.js';
import 'mdui/components/menu-item.js';

コンポーネントの TypeScript 型を必要に応じてインポートします：

import type { Select } from 'mdui/components/select.js';
import type { MenuItem } from 'mdui/components/menu-item.js';

使用例：

Item 1

Item 2

<mdui-select value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

例

形状

variant 属性を使用してドロップダウンセレクトの形状を設定します。

Item 1

Item 2

Item 1

Item 2

<mdui-select variant="filled" value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

<mdui-select variant="outlined" value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

ソース

複数選択のサポート

ドロップダウンセレクトはデフォルトで単一選択です。<mdui-select> コンポーネントの value 値は、現在選択されている <mdui-menu-item> の value 値です。

multiple 属性を追加すると、ドロップダウンセレクトで複数選択をサポートできます。この場合、<mdui-select> の value 値は、現在選択されている <mdui-menu-item> の value 値からなる配列になります。

注意：複数選択をサポートする場合、<mdui-select> の value 値は配列であり、JavaScript プロパティを通じてのみ読み取りと設定ができます。

Item 1

Item 2

Item 3

<mdui-select multiple class="example-multiple">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
  <mdui-menu-item value="item-3">Item 3</mdui-menu-item>
</mdui-select>

<script>
  // item-1 と item-2 をデフォルトで選択状態に設定
  const select = document.querySelector(".example-multiple");
  select.value = ["item-1", "item-2"];
</script>

ソース

補助テキスト

label 属性を使用してドロップダウンセレクトの上にラベルテキストを設定します。

Item 1

Item 2

<mdui-select label="Text Field" value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

ソース

placeholder 属性を使用して、値が選択されていない時のプレースホルダーテキストを設定します。

Item 1

Item 2

<mdui-select placeholder="Placeholder">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

ソース

helper 属性を使用してドロップダウンセレクトの下部にヘルプテキストを設定します。helper スロットを使用してヘルプテキストを設定することもできます。

Item 1

Item 2

Item 1

Item 2

Supporting text

<mdui-select helper="Supporting text">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

<mdui-select>
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
  <span slot="helper" style="color: blue">Supporting text</span>
</mdui-select>

ソース

読み取り専用モード

readonly 属性を追加することで、ドロップダウンセレクトを読み取り専用モードに設定できます。

Item 1

Item 2

<mdui-select readonly value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

ソース

無効モード

disabled 属性を追加することで、ドロップダウンセレクトを無効にできます。

Item 1

Item 2

<mdui-select disabled value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

ソース

クリア可能

clearable 属性を追加すると、ドロップダウンセレクトに値がある場合、右側にクリアボタンが表示されます。

Item 1

Item 2

<mdui-select clearable value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

ソース

clear スロットを使用してクリアボタンをカスタマイズすることもできます。

Item 1

Item 2

<mdui-select clearable value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
  <mdui-icon slot="clear" name="delete"></mdui-icon>
</mdui-select>

ソース

ドロップダウンメニューの位置

placement 属性を使用して、ドロップダウンメニューの位置を設定できます。

Item 1

Item 2

<mdui-select placement="top" value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

ソース

テキスト右揃え

end-aligned 属性を追加すると、テキストが右揃えになります。

Item 1

Item 2

<mdui-select end-aligned value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

ソース

前後のテキストとアイコン

icon と end-icon 属性を設定することで、ドロップダウンセレクトの左側と右側に Material Icons アイコンを追加できます。icon と end-icon スロットを使用してドロップダウンセレクトの左側と右側に要素を追加することもできます。

Item 1

Item 2

Item 1

Item 2

<mdui-select value="item-1" icon="search" end-icon="mic">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

<br/><br/>

<mdui-select value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
  <mdui-button-icon slot="icon" icon="search"></mdui-button-icon>
  <mdui-button-icon slot="end-icon" icon="mic"></mdui-button-icon>
</mdui-select>

ソース

prefix と suffix 属性を設定することで、ドロップダウンセレクトの左側と右側にテキストを追加できます。prefix と suffix スロットを使用してドロップダウンセレクトの左側と右側にテキスト要素を追加することもできます。これらのテキストは、ドロップダウンセレクトがフォーカスされているか値がある場合にのみ表示されます。

Item 1

Item 2

Item 1

Item 2

$ /100

<mdui-select value="item-1" prefix="$" suffix="/100">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

<br/><br/>

<mdui-select value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
  <span slot="prefix" style="color: blue">$</span>
  <span slot="suffix" style="color: blue">/100</span>
</mdui-select>

ソース

API

プロパティ

HTML 属性	JavaScript プロパティ	型	デフォルト値
`variant`	`variant`	`'filled' \| 'outlined'`	`'filled'`
セレクトボックスのスタイルです。次の値を指定します： `filled`：背景色付きセレクトボックス。視覚的な強調度が高いです。 `outlined`：枠線付きセレクトボックス。視覚的な強調度が低いです。
`multiple`	`multiple`	`boolean`	`false`
複数選択をサポートするかどうかを指定します。
`name`	`name`	`string`	`''`
セレクトボックスの名前です。フォームデータと共に送信されます。
`value`	`value`	`string \| string[]`	`''`
セレクトボックスの値です。フォームデータと共に送信されます。 `multiple` 属性が指定されていない場合、この値は文字列です。`multiple` 属性が指定されている場合、この値は文字列の配列です。HTML属性では文字列値のみ設定できます。配列値を設定する必要がある場合は、JavaScriptプロパティで設定してください。
	`defaultValue`	`string \| string[]`	`''`
デフォルトで選択される値です。フォームをリセットすると、このデフォルト値にリセットされます。この属性はJavaScriptプロパティでのみ設定できます。
`label`	`label`	`string`	-
ラベルテキストです。
`placeholder`	`placeholder`	`string`	-
プレースホルダーテキストです。
`helper`	`helper`	`string`	-
セレクトボックス下部のヘルプテキストです。`slot="helper"` で設定することもできます。
`clearable`	`clearable`	`boolean`	`false`
セレクトボックスをクリア可能にするかどうかを指定します。
`clear-icon`	`clearIcon`	`string`	-
セレクトボックスがクリア可能な場合に、右側に表示されるクリアボタンのMaterial Iconsアイコン名です。`slot="clear-icon"` で設定することもできます。
`placement`	`placement`	`'auto' \| 'bottom' \| 'top'`	`'auto'`
セレクトボックスの配置位置です。次の値を指定します： `auto`：位置を自動判断 `bottom`：下に配置 `top`：上に配置
`end-aligned`	`endAligned`	`boolean`	`false`
テキストを右揃えにするかどうかを指定します。
`prefix`	`prefix`	`string`	-
セレクトボックスの接頭辞テキストです。フォーカス時、または値がある場合にのみ表示されます。`slot="prefix"` で設定することもできます。
`suffix`	`suffix`	`string`	-
セレクトボックスの接尾辞テキストです。フォーカス時、または値がある場合にのみ表示されます。`slot="suffix"` で設定することもできます。
`icon`	`icon`	`string`	-
セレクトボックスの接頭辞アイコンのMaterial Iconsアイコン名です。`slot="icon"` で設定することもできます。
`end-icon`	`endIcon`	`string`	-
セレクトボックスの接尾辞アイコンのMaterial Iconsアイコン名です。`slot="end-icon"` で設定することもできます。
`error-icon`	`errorIcon`	`string`	-
フォームフィールドの検証に失敗した場合に、セレクトボックスの右側に表示されるMaterial Iconsアイコン名です。`slot="error-icon"` で設定することもできます。
`form`	`form`	`string`	-
関連付ける `<form>` 要素です。この属性値には、同一ページ内の `<form>` 要素の `id` を指定する必要があります。この属性が指定されていない場合、この要素は `<form>` 要素の子要素である必要があります。この属性を使用すると、要素を `<form>` 要素の子要素だけでなく、ページ上の任意の場所に配置できます。
`readonly`	`readonly`	`boolean`	`false`
読み取り専用状態にするかどうかを指定します。
`disabled`	`disabled`	`boolean`	`false`
無効状態にするかどうかを指定します。
`required`	`required`	`boolean`	`false`
フォーム送信時に、このフィールドを必須にするかどうかを指定します。
	`validity`	`ValidityState`	-
フォーム検証ステータスを表す `ValidityState` オブジェクトです。詳細は `ValidityState` を参照してください。
	`validationMessage`	`string`	-
フォーム検証に合格しなかった場合、このプロパティにはエラーメッセージが設定されます。検証に合格した場合は空の文字列になります。
`autofocus`	`autofocus`	`boolean`	`false`
ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
`tabindex`	`tabIndex`	`number`	-
Tab キーによるフォーカス移動時の、要素の順序を指定します。

メソッド

名前	パラメーター	戻り値
`checkValidity`		`boolean`
フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は `false` を返し、`invalid` イベントをトリガーします。合格した場合は `true` を返します。
`reportValidity`		`boolean`
フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は `false` を返し、`invalid` イベントをトリガーします。合格した場合は `true` を返します。検証に合格しなかった場合は、コンポーネントに検証失敗のエラーメッセージも表示されます。
`setCustomValidity`	`message: string`	`void`
カスタムのエラーメッセージを設定します。このテキストが空でない限り、フィールドが検証に合格していないと見なされます。
`click`		`void`
要素のマウスクリックをシミュレートします。
`focus`	`options: FocusOptions` (オプション)	`void`
現在の要素にフォーカスを設定します。オプションとして、以下のプロパティを持つオブジェクトを渡すことができます： `preventScroll`：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを `true` に設定します。
`blur`		`void`
現在の要素からフォーカスを外します。

イベント

名前
`focus`
フォーカスを取得したときに発生します。
`blur`
フォーカスを失ったときに発生します。
`change`
選択された値が変更されたときに発生します。
`invalid`
フォームフィールドの検証に合格しなかったときに発生します。
`clear`
`clearable` 属性によって生成されたクリアボタンがクリックされたときに発生します。`event.preventDefault()` を呼び出すことで、セレクトボックスがクリアされるのを防ぐことができます。

Slots

名前
デフォルト
`<mdui-menu-item>` 要素
`icon`
左側のアイコン
`end-icon`
右側のアイコン
`error-icon`
検証失敗状態の右側のアイコン
`prefix`
左側のテキスト
`suffix`
右側のテキスト
`clear-button`
クリアボタン
`clear-icon`
クリアボタン内のアイコン
`helper`
下部のヘルプテキスト

CSS Parts

名前
`chips`
複数選択時に、選択された値に対応するチップを配置するコンテナ
`chip`
複数選択時に、選択された各値に対応するチップ
`chip__button`
チップ内部の `<button>` 要素
`chip__label`
チップ内部のテキスト
`chip__delete-icon`
チップ内部の削除アイコン
`text-field`
テキストフィールド。つまり `<mdui-text-field>` 要素
`text-field__container`
text-field 内部のテキストフィールドコンテナ
`text-field__icon`
text-field 内部の左側のアイコン
`text-field__end-icon`
text-field 内部の右側のアイコン
`text-field__error-icon`
text-field 内部の検証失敗状態の右側のアイコン
`text-field__prefix`
text-field 内部の左側のテキスト
`text-field__suffix`
text-field 内部の右側のテキスト
`text-field__label`
text-field 内部のラベルテキスト
`text-field__input`
text-field 内部の `<input>` 要素
`text-field__clear-button`
text-field 内部のクリアボタン
`text-field__clear-icon`
text-field 内部のクリアボタン内のアイコン
`text-field__supporting`
text-field 内部の下部補助情報コンテナ（helper と error を含む）
`text-field__helper`
text-field 内部の下部ヘルプテキスト
`text-field__error`
text-field 内部の下部エラー説明テキスト
`menu`
ドロップダウンメニュー。つまり `<mdui-menu>` 要素

前の章

RangeSlider レンジスライダー

次の章

SegmentedButton セグメントボタン