ToggleButton

トグルボタンは、ボタンを使用してブール値を選択するために使用されます。

インポート#


import { ToggleButton } from 'primereact/togglebutton';

基本#

トグルボタンは、valueとonChangeプロパティを持つ制御された入力コンポーネントとして使用されます。

いいえ


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

カスタマイズ#

アイコンとラベルは、onLabel、offLabel、onIcon、offIconプロパティを使用してカスタマイズできます。

拒否します


<ToggleButton onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" 
    checked={checked} onChange={(e) => setChecked(e.value)} />

無効#

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

いいえ


<ToggleButton invalid onIcon="pi pi-check" offIcon="pi pi-times" checked={checked} onChange={(e) => setChecked(e.value)} />

無効化#

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

いいえ


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

アクセシビリティ#

スクリーンリーダー

トグルボタンコンポーネントは、buttonロールを持つ要素を使用し、スクリーンリーダー用にaria-pressed状態を更新します。コンポーネントを説明する値は、aria-labelledbyまたはaria-labelプロパティで定義できます。コンポーネントが表示されるラベルを変更すると、コンポーネントがフォーカスを受け取るとスクリーンリーダーが異なるラベルを読み上げるため、これらのプロパティのいずれかを使用することを強くお勧めします。これを防ぐために、常に状態に関連して変化しないariaラベルを提供してください。


<span id="rememberme">Remember Me</span>
<ToggleButton aria-labelledby="rememberme" />

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

キーボードサポート

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