MultiSelect

MultiSelectは、コレクションから複数の項目を選択するために使用されます。

インポート#


import { MultiSelect } from 'primereact/multiselect';
         

基本#

MultiSelectは、value と onChange プロパティ、および options コレクションを持つ制御されたコンポーネントとして使用されます。オプションのラベルと値は、それぞれ optionLabel と optionValue で定義されます。optionLabel のデフォルトプロパティ名は label で、optionValue は value です。optionValue が省略され、オブジェクトに value プロパティがない場合、オブジェクト自体がオプションの値になります。オプションが文字列配列のような単純なプリミティブ値の場合、optionLabel と optionValue は必要ないことに注意してください。それぞれプロパティ。optionLabelのデフォルトのプロパティ名はlabelで、optionValueはvalueです。optionValueが省略されていて、オブジェクトにvalueプロパティがない場合、オブジェクト自体がオプションの値になります。オプションが文字列配列などの単純なプリミティブ値である場合、optionLabelとoptionValueは必要ありません。

都市を選択

<MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
    placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
         

チップ#

選択された値は、デフォルトではコンマ区切りのリストとして表示されます。display を chip に設定すると、チップとして表示されます。

都市を選択

<MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" display="chip"
    placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
         

グループ#

ネストされたデータ構造が提供されると、オプションをグループ化できます。グループのラベルを定義するには、optionGroupLabel プロパティが必要であり、グループの子を参照するプロパティを定義するには、optionGroupChildren も必要です。

都市を選択

<MultiSelect value={selectedCities} options={groupedCities} onChange={(e) => setSelectedCities(e.value)} optionLabel="label" 
    optionGroupLabel="label" optionGroupChildren="items" optionGroupTemplate={groupedItemTemplate}
    placeholder="Select Cities" display="chip" className="w-full md:w-20rem" />
         

テンプレート#

使用可能なオプションと選択されたオプションは、それぞれ itemTemplate プロパティと selectedItemTemplate プロパティを使用したテンプレートをサポートしています。さらに、ヘッダー、フッター、フィルターセクションもテンプレート化できます。

国を選択

<MultiSelect value={selectedCountries} options={countries} onChange={(e) => setSelectedCountries(e.value)} optionLabel="name" 
    placeholder="Select Countries" itemTemplate={countryTemplate} panelFooterTemplate={panelFooterTemplate} className="w-full md:w-20rem" display="chip" />
         

フィルター#

MultiSelectには、filterプロパティを追加することで有効になる組み込みのフィルタリング機能があります。

都市を選択

<MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
    filter placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
         

ローディング状態#

ローディング状態はloadingプロパティを使用して使用できます。

読み込み中...

<MultiSelect loading placeholder="Loading..." className="w-full md:w-20rem" />
         

仮想スクロール#

VirtualScrollerは、このデモのように100Kレコードのような長いオプションリストを効率的にレンダリングするために使用されます。構成はvirtualScrollerOptionsプロパティで行われます。詳細についてはVirtualScrollerを参照してください。 MultiSelectで内部的に使用されるため、使用可能なオプションについてを参照してください。 VirtualScrollerを参照してください。MultiSelectによって内部的に使用されるため、利用可能なオプションの詳細について確認できます。

アイテムを選択

<MultiSelect
    value={selectedItems}
    options={items}
    onChange={(e) => {
        setSelectedItems(e.value);
        setSelectAll(e.value.length === items.length);
    }}
    selectAll={selectAll}
    onSelectAll={(e) => {
        setSelectedItems(e.checked ? [] : items.map((item) => item.value));
        setSelectAll(!e.checked);
    }}
    virtualScrollerOptions={{ itemSize: 43 }}
    maxSelectedLabels={3}
    placeholder="Select Items"
    className="w-full md:w-20rem"
/>
         

フロートラベル#

フォーカスすると、入力フィールドの上にフロートラベルが表示されます。詳細については、FloatLabelのドキュメントを参照してください。

空

<FloatLabel>
    <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" maxSelectedLabels={3} className="w-full" />
    <label htmlFor="ms-cities">MultiSelect</label>
</FloatLabel>
         

入力済み#

デフォルトの outlined スタイルよりも視覚的に強調してコンポーネントを表示するには、variant プロパティを filled に指定します。

都市を選択

<MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
    placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
         

無効#

検証が失敗したことを示すには、invalid プロパティを使用して無効状態を表示します。フォーム検証ライブラリと統合するときにこのスタイルを使用できます。

都市を選択

<MultiSelect invalid value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
    placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
         

無効#

disabled が存在する場合、要素は編集およびフォーカスできません。

都市を選択

<MultiSelect disabled placeholder="Select Cities" className="w-full md:w-20rem" />
         

アクセシビリティ#

スクリーンリーダー

コンポーネントを説明する値は、aria-labelledby または aria-label プロパティのいずれかで提供できます。multiselectコンポーネントには、aria-haspopupおよびaria-expandedに加えて、comboboxロールがあります。属性。comboboxとポップアップの関係は、ポップアップリストボックスのidを参照するaria-controls属性で作成されます。

ポップアップリストボックスは、aria-multiselectableを有効にして、ロールとしてlistboxを使用します。各リストアイテムには、aria-label、aria-selected、およびaria-disabled属性とともにoptionロールがあります。

ヘッダーのチェックボックスコンポーネントは、スクリーンリーダーにのみ表示される非表示のネイティブチェックボックス要素を内部で使用します。読み取る値は、locale API の aria プロパティの selectAll および unselectAll キーで定義されます。

フィルタリングが有効になっている場合、filterInputProps を定義して、aria-* プロパティを入力要素に与えることができます。

クローズボタンは、デフォルトではlocaleAPIのariaプロパティのcloseキーをaria-labelとして使用します。これはcloseButtonPropsでオーバーライドできます。


<span id="dd1">Options</span>
<MultiSelect aria-labelledby="dd1" />

<MultiSelect aria-label="Options" />
     

閉じた状態でのキーボードサポート

キー機能
tabフォーカスをマルチセレクト要素に移動します。
spaceポップアップを開き、選択されたオプションに視覚的なフォーカスを移動します。選択されたオプションがない場合は、最初のオプションにフォーカスが移ります。
下矢印ポップアップを開き、選択されたオプションに視覚的なフォーカスを移動します。選択されたオプションがない場合は、最初のオプションにフォーカスが移ります。
上矢印ポップアップを開き、選択されたオプションに視覚的なフォーカスを移動します。選択されたオプションがない場合は、最初のオプションにフォーカスが移ります。

ポップアップキーボードサポート

キー機能
tabポップアップの次のフォーカス可能な要素にフォーカスを移動します。ない場合は、最初のフォーカス可能な要素にフォーカスが移ります。
shift + tabポップアップの前のフォーカス可能な要素にフォーカスを移動します。ない場合は、最後のフォーカス可能な要素にフォーカスが移ります。
enterフォーカスされたオプションの選択状態を切り替えます。
spaceフォーカスされたオプションの選択状態を切り替えます。
escapeポップアップを閉じ、フォーカスをマルチセレクト要素に移動します。
下矢印フォーカスを次のオプションに移動します。ない場合、視覚的なフォーカスは変化しません。
上矢印フォーカスを前のオプションに移動します。ない場合、視覚的なフォーカスは変化しません。
homeフォーカスを最初のオプションに移動します。
endフォーカスを最後のオプションに移動します。
印刷可能な文字ドロップダウンが編集可能でない場合は、入力された文字で始まるラベルを持つオプションにフォーカスを移動します。

すべて切り替えチェックボックスのキーボードサポート

キー機能
spaceチェック状態を切り替えます。
escapeポップアップを閉じます。

フィルター入力キーボードサポート

キー機能
enterポップアップを閉じ、フォーカスをマルチセレクト要素に移動します。
escapeポップアップを閉じ、フォーカスをマルチセレクト要素に移動します。

クローズボタンのキーボードサポート

キー機能
enterポップアップを閉じ、フォーカスをマルチセレクト要素に移動します。
spaceポップアップを閉じ、フォーカスをマルチセレクト要素に移動します。
escapeポップアップを閉じ、フォーカスをマルチセレクト要素に移動します。
                            PrimeReact 10.8.3 by PrimeTek