Select

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のドキュメントを参照してください。


<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>

塗りつぶし #

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


<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プロップで指定できます。select要素には、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属性があります。

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


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

<select aria-label="Options" />

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

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

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

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

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

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