チェックボックスは、テーマ設定された標準チェックボックス要素の拡張機能です。
import Checkbox from 'primevue/checkbox';
バイナリチェックボックスは、v-modelプロパティとbinaryプロパティを使用して制御された入力として使用されます。
<Checkbox v-model="checked" :binary="true" />
indeterminateプロパティが存在する場合、チェックボックスは実際の値を視覚的にマスクします。
<Checkbox v-model="checked" indeterminate binary />
複数のチェックボックスをグループ化できます。
<div class="card flex flex-wrap justify-center gap-4">
<div class="flex items-center">
<Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1" class="ml-2"> Cheese </label>
</div>
<div class="flex items-center">
<Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2" class="ml-2"> Mushroom </label>
</div>
<div class="flex items-center">
<Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3" class="ml-2"> Pepper </label>
</div>
<div class="flex items-center">
<Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4" class="ml-2"> Onion </label>
</div>
</div>
値のリストを使用してチェックボックスを生成できます。
<div v-for="category of categories" :key="category.key" class="flex items-center">
<Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
<label :for="category.key">{{ category.name }}</label>
</div>
variantプロパティをfilledとして指定すると、デフォルトのoutlinedスタイルよりも視覚的な強調表示が強化されたコンポーネントが表示されます。
<Checkbox v-model="checked" binary variant="filled" />
invalidプロパティを使用して無効状態を表示し、検証エラーを示します。フォーム検証ライブラリと統合する際にこのスタイルを使用できます。
<Checkbox v-model="checked" :invalid="!checked" binary />
disabledプロパティが存在する場合、要素は編集およびフォーカスできません。
<Checkbox v-model="checked1" binary disabled />
<Checkbox v-model="checked2" binary disabled />
チェックボックスコンポーネントは、内部的にスクリーンリーダーにのみ表示される非表示のネイティブチェックボックス要素を使用します。コンポーネントを説明する値は、inputIdプロパティと組み合わせたlabelタグ、またはaria-labelledby、aria-labelプロパティを使用して提供できます。
<label for="chkbox1">Remember Me</label>
<Checkbox inputId="chkbox1" />
<span id="chkbox2">Remember Me</span>
<Checkbox aria-labelledby="chkbox2" />
<Checkbox aria-label="Remember Me" />
| キー | 機能 |
|---|---|
| tab | チェックボックスにフォーカスを移動します。 |
| space | チェック状態を切り替えます。 |