Listbox

Listboxは、アイテムリストから1つ以上の値を選択するために使用されます。

インポート #


import Listbox from 'primevue/listbox';

基本 #

Listboxは、v-modelプロパティとoptionsコレクションを使用して制御コンポーネントとして使用されます。オプションのラベルと値は、それぞれoptionLabelとoptionValueプロパティで定義されます。オプションが文字列配列などの単純なプリミティブ値の場合、optionLabelとoptionValueは不要です。

選択されたアイテムはありません


<Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-56" />

チェックマーク #

選択されたオプションを強調表示する別の方法は、チェックマークを表示することです。

選択されたアイテムはありません


<Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-56" />

複数選択 #

Listboxはデフォルトで単一アイテムの選択を許可しますが、multipleプロパティを有効にすると、複数アイテムを選択できます。オプションのmetaKeySelectionプロパティが存在する場合、新しいアイテムを選択するにはメタキーが必要になります。

選択されたアイテムはありません


<Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-56" />

グループ化 #

入れ子になったデータ構造が提供されている場合、オプションをグループ化できます。グループのラベルを定義するにはoptionGroupLabelプロパティが必要であり、グループの子を参照するプロパティを定義するにはoptionGroupChildrenプロパティが必要です。


<Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-56" listStyle="max-height:250px">
    <template #optiongroup="slotProps">
        <div class="flex items-center">
            <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
            <div>{{ slotProps.option.label }}</div>
        </div>
    </template>
</Listbox>

フィルタリング #

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

5件の結果があります

選択されたアイテムはありません


<Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-56" />

テンプレート #

オプションのカスタムコンテンツは、オプションをパラメーターとして受け取るoptionスロットを使用して表示されます。利用可能な追加のテンプレートセクションはfilterとoptionGroupです。

選択されたアイテムはありません


<Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-56" listStyle="max-height:250px">
    <template #option="slotProps">
        <div class="flex items-center">
            <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
            <div>{{ slotProps.option.name }}</div>
        </div>
    </template>
</Listbox>

仮想スクロール #

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

選択されたアイテムはありません


<Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
    :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-56" listStyle="height:250px" striped />

無効 #

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

選択されたアイテムはありません


<Listbox v-model="selectedCity" :options="cities" optionLabel="name" :invalid="selectedCity === null"  class="w-full md:w-56" />

無効化 #

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

選択されたアイテムはありません


<Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-56" />

アクセシビリティ #

スクリーンリーダー

コンポーネントを記述する値は、aria-labelledbyまたはaria-labelプロパティで指定できます。リスト要素は、複数選択が有効になっている場合にtrueに設定されるaria-multiselectable属性を持つlistboxロールを持ちます。各リストアイテムは、aria-selectedとaria-disabledを属性として持つoptionロールを持ちます。

フィルタリングが有効になっている場合、入力要素にaria-*プロパティを与えるためにfilterInputPropsを定義できます。あるいは、filterPlaceholderも通常スクリーンリーダーによって使用されます。


<span id="lb"></span>Options</span>
<Listbox aria-labelledby="lb" />

<Listbox aria-label="City" />

キーボードサポート

キー	機能
tab	フォーカスを最初に選択されたオプションに移動します。選択されていない場合は、最初のオプションにフォーカスが移動します。
上矢印	フォーカスを前のオプションに移動します。
下矢印	フォーカスを次のオプションに移動します。
Enter	フォーカスされているオプションの選択状態を切り替えます。
スペース	フォーカスされているオプションの選択状態を切り替えます。
Home	フォーカスを最初のオプションに移動します。
End	フォーカスを最後のオプションに移動します。
Shift + 下矢印	フォーカスを次のオプションに移動し、選択状態を切り替えます。
Shift + 上矢印	フォーカスを前のオプションに移動し、選択状態を切り替えます。
Shift + スペース	最後に選択されたオプションとフォーカスされているオプションの間のアイテムを選択します。
Ctrl + Shift + Home	フォーカスされているオプションと、最初のオプションまでのすべてのオプションを選択します。
Ctrl + Shift + End	フォーカスされているオプションと、最後のオプションまでのすべてのオプションを選択します。
Ctrl + A	すべてのオプションを選択します。
Page Up	視覚的なフォーカスを最初のオプションにジャンプします。
Page Down	視覚的なフォーカスを最後のオプションにジャンプします。
任意の印刷可能な文字	ラベルがタイピングされた文字で始まるオプションにフォーカスを移動します。

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

キー	機能
下矢印	フォーカスを次のオプションに移動します。ない場合は、視覚的なフォーカスは変わりません。
上矢印	フォーカスを前のオプションに移動します。ない場合は、視覚的なフォーカスは変わりません。
左矢印	現在のオプションからの視覚的なフォーカスを削除し、入力カーソルを1文字左に移動します。
右矢印	現在のオプションからの視覚的なフォーカスを削除し、入力カーソルを1文字右に移動します。
Home	入力カーソルを最後に移動します。そうでない場合は、フォーカスを最初のオプションに移動します。
End	入力カーソルを最初に移動します。そうでない場合は、フォーカスを最後のオプションに移動します。
Enter	ポップアップを閉じ、フォーカスを複数選択要素に移動します。
Escape	ポップアップを閉じ、フォーカスを複数選択要素に移動します。
tab	コンポーネント内の次のフォーカス可能な要素にフォーカスを移動します。ない場合は、ページ内の次の要素にフォーカスを移動します。

Listbox

インポート #

基本 #

チェックマーク #

複数選択 #

グループ化 #

フィルタリング #

テンプレート #

仮想スクロール #

無効 #

無効化 #

アクセシビリティ #

スクリーンリーダー

キーボードサポート

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

Listbox API