セレクト

Selectは、オプションのコレクションからアイテムを選択するために使用されます。

インポート # 


import Select from 'primevue/select';

基本 #

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


<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />

チェックマーク #

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


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

編集可能 #

editableが存在する場合、入力は入力して入力することもできます。


<Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />

グループ #

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


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

テンプレート #

オプションと選択されたオプションの表示は、それぞれoptionとvalueを使用してテンプレートをサポートします。


<Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
    <template #value="slotProps">
        <div v-if="slotProps.value" class="flex items-center">
            <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.value.code.toLowerCase()}`" style="width: 18px" />
            <div>{{ slotProps.value.name }}</div>
        </div>
        <span v-else>
            {{ slotProps.placeholder }}
        </span>
    </template>
    <template #option="slotProps">
        <div class="flex items-center">
            <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
            <div>{{ slotProps.option.name }}</div>
        </div>
    </template>
</Select>

フィルター #

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


<Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
    <template #value="slotProps">
        <div v-if="slotProps.value" class="flex items-center">
            <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.value.code.toLowerCase()}`" style="width: 18px" />
            <div>{{ slotProps.value.name }}</div>
        </div>
        <span v-else>
            {{ slotProps.placeholder }}
        </span>
    </template>
    <template #option="slotProps">
        <div class="flex items-center">
            <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
            <div>{{ slotProps.option.name }}</div>
        </div>
    </template>
</Select>

クリアアイコン #

showClearが有効になっている場合、Selectをリセットするためのクリアアイコンが追加されます。


<Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />

ローディング状態 #

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


<Select placeholder="Loading..." loading class="w-full md:w-56"></Select>

バーチャルスクロール #

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


<Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
    :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-56" />

遅延バーチャルスクロール # 


<Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-56"
    :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />

フロートラベル #

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


<FloatLabel class="w-full md:w-56">
    <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
    <label for="dd-city">Select a City</label>
</FloatLabel>

塗りつぶし #

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


<Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />

無効 #

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


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

無効 #

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


<Select disabled placeholder="Select a City" class="w-full md:w-56" />

アクセシビリティ #

スクリーンリーダー

コンポーネントを説明する値は、aria-labelledbyまたはaria-labelプロパティで提供できます。セレクト要素には、aria-haspopupおよびaria-expanded属性に加えて、comboboxロールがあります。editableオプションが有効になっている場合、aria-autocompleteも追加されます。 comboboxとポップアップ間の関係はaria-controlsで作成され、aria-activedescendant属性は、ポップアップリスト内のキーボードナビゲーション中にスクリーンリーダーにどのオプションを読み取るべきかを指示するために使用されます。

ポップアップリストには、combobox要素のaria-controls属性を参照するIDがあり、ロールとしてlistboxを使用します。各リストアイテムには、optionロール、入力要素のaria-activedescendantと一致するID、aria-label、aria-selected、aria-disabled属性があります。

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


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

<select aria-label="Options" />

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

キー機能
tabフォーカスをセレクト要素に移動します。
spaceポップアップを開き、視覚的なフォーカスを選択されたオプションに移動します。選択されていない場合は、最初のオプションにフォーカスが移動します。
enterポップアップを開き、視覚的なフォーカスを選択されたオプションに移動します。選択されていない場合は、最初のオプションにフォーカスが移動します。
下矢印ポップアップを開き、視覚的なフォーカスを選択されたオプションに移動します。選択されていない場合は、最初のオプションにフォーカスが移動します。
上矢印ポップアップを開き、視覚的なフォーカスを選択されたオプションに移動します。選択されていない場合は、最後のオプションにフォーカスが移動します。
任意の印刷可能な文字ポップアップを開き、ラベルがタイプされた文字で始まるオプションにフォーカスを移動します。存在しない場合、そしてセレクトが編集不可の場合、最初のオプションにフォーカスが移動します。

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

キー機能
tabポップアップ内の次のフォーカス可能な要素にフォーカスを移動します。存在しない場合、フォーカス可能なオプションが選択され、オーバーレイが閉じられ、ページ内の次の要素にフォーカスが移動します。
shift + tabポップアップ内の前のフォーカス可能な要素にフォーカスを移動します。存在しない場合、フォーカス可能なオプションが選択され、オーバーレイが閉じられ、ページ内の次の要素にフォーカスが移動します。
enterフォーカスされたオプションを選択し、ポップアップを閉じます。次に、フォーカスをセレクト要素に移動します。
spaceフォーカスされたオプションを選択し、ポップアップを閉じます。次に、フォーカスをセレクト要素に移動します。
escapeポップアップを閉じ、フォーカスをセレクト要素に移動します。
下矢印次のオプションにフォーカスを移動します。存在しない場合は、視覚的なフォーカスは変わりません。
上矢印前のオプションにフォーカスを移動します。存在しない場合は、視覚的なフォーカスは変わりません。
alt + 上矢印フォーカスされたオプションを選択し、ポップアップを閉じます。次に、フォーカスをセレクト要素に移動します。
左矢印セレクトが編集可能な場合、現在のオプションからの視覚的なフォーカスを削除し、入力カーソルを1文字左に移動します。
右矢印セレクトが編集可能な場合、現在のオプションからの視覚的なフォーカスを削除し、入力カーソルを1文字右に移動します。
homeセレクトが編集可能な場合、入力カーソルを最後に移動します。そうでない場合は、最初のオプションにフォーカスを移動します。
endセレクトが編集可能な場合、入力カーソルを先頭に移動します。そうでない場合は、最後のオプションにフォーカスを移動します。
pageUp視覚的なフォーカスを最初のオプションにジャンプします。
pageDown視覚的なフォーカスを最後のオプションにジャンプします。
任意の印刷可能な文字セレクトが編集不可の場合、ラベルがタイプされた文字で始まるオプションにフォーカスを移動します。

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

キー機能
下矢印次のオプションにフォーカスを移動します。存在しない場合は、視覚的なフォーカスは変わりません。
上矢印前のオプションにフォーカスを移動します。存在しない場合は、視覚的なフォーカスは変わりません。
左矢印現在のオプションからの視覚的なフォーカスを削除し、入力カーソルを1文字左に移動します。
右矢印現在のオプションからの視覚的なフォーカスを削除し、入力カーソルを1文字右に移動します。
home入力カーソルを最後に移動します。そうでない場合は、最初のオプションにフォーカスを移動します。
end入力カーソルを先頭に移動します。そうでない場合は、最後のオプションにフォーカスを移動します。
enterポップアップを閉じ、フォーカスをセレクト要素に移動します。
escapeポップアップを閉じ、フォーカスをセレクト要素に移動します。
tabポップアップ内の次のフォーカス可能な要素にフォーカスを移動します。存在しない場合、フォーカス可能なオプションが選択され、オーバーレイが閉じられ、ページ内の次の要素にフォーカスが移動します。
PrimeTekによるVue 3上のPrimeVue 4.0.7PrimeTek