入力スイッチ

InputSwitchは、ブール値を選択するために使用されます。

インポート#


import { InputSwitch } from 'primereact/inputswitch';

基本#

InputSwitchは、checkedプロパティとonChangeプロパティを使用して、制御された入力として使用されます。


<InputSwitch checked={checked} onChange={(e) => setChecked(e.value)} />

事前選択#

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


<InputSwitch checked={checked} onChange={(e) => setChecked(e.value)} />

無効#

無効状態のスタイルは、検証に失敗したことを示すためにp-invalidクラスを使用して追加されます。


<InputSwitch className="p-invalid" />

無効#

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


<InputSwitch disabled />

アクセシビリティ#

スクリーンリーダー

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


<label htmlFor="switch1">Remember Me</label>
<InputSwitch inputId="switch1" />

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

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

キーボードサポート

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