トグルスイッチ

トグルスイッチは、ブール値を選択するために使用されます。

インポート #


import ToggleSwitch from 'primevue/toggleswitch';

基本 #

双方向の値バインディングは、v-modelを使用して定義されます。


<ToggleSwitch v-model="checked" />

事前選択 #

checkedプロパティを有効にすると、コンポーネントが初期状態でアクティブとして表示されます。


<ToggleSwitch v-model="checked" />

無効 #

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


<ToggleSwitch v-model="checked" :invalid="!checked" />

無効化 #

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


<ToggleSwitch v-model="checked" disabled />

アクセシビリティ #

スクリーンリーダー

トグルスイッチコンポーネントは、内部でswitchロールを持つ非表示のネイティブチェックボックス要素を使用します。これは、スクリーンリーダーにのみ表示されます。コンポーネントを記述する値は、labelタグとidプロパティを組み合わせるか、aria-labelledby、aria-labelプロパティを使用して提供できます。


<label for="switch1">Remember Me</label>
<ToggleSwitch inputId="switch1" />

<span id="switch2">Remember Me</span>
<ToggleSwitch aria-labelledby="switch2" />

<ToggleSwitch aria-label="Remember Me" />

キーボードサポート

キー	機能
tab	スイッチにフォーカスを移動します。
スペース	チェック状態を切り替えます。