SelectButtonは、ボタンを使用してリストから単一または複数の項目を選択するために使用されます。
import { SelectButton } from 'primereact/selectbutton';
SelectButtonは、optionsコレクションとともに、valueとonChangeプロパティを持つ制御されたコンポーネントとして使用されます。オプションのラベルと値は、それぞれoptionLabelとoptionValueで定義されます。optionLabelのデフォルトプロパティ名はlabelで、optionValueの場合はvalueです。optionValueが省略され、オブジェクトにvalueプロパティがない場合、オブジェクト自体がオプションの値になります。オプションが文字列配列のような単純なプリミティブ値の場合、optionLabelとoptionValueは必要ないことに注意してください。必要があります。
<SelectButton value={value} onChange={(e) => setValue(e.value)} options={options} />
SelectButtonでは、デフォルトで1つの項目のみを選択できます。multipleを有効にすると、より多くの項目を選択できます。複数の場合、モデルプロパティは単一の値ではなく配列である必要があります。
<SelectButton value={value} onChange={(e) => setValue(e.value)} optionLabel="name" options={items} multiple />
オプションは、コンテンツをレンダリングする関数を参照するitemTemplateプロパティを使用して、テンプレートをサポートします。視覚的にレンダリングされていなくても、リストキーとして使用するためにoptionLabelを使用する必要があることに注意してください。
<SelectButton value={value} onChange={(e) => setValue(e.value)} itemTemplate={justifyTemplate} optionLabel="value" options={justifyOptions} />
無効な状態は、検証が失敗したことを示すためにinvalid propを使用して表示されます。フォーム検証ライブラリと統合するときにこのスタイルを使用できます。
<SelectButton invalid value={value} onChange={(e) => setValue(e.value)} options={options} />
disabledが存在する場合、要素は編集および完全にフォーカスすることができません。optionDisabledプロパティを使用すると、特定のオプションを無効にすることもできます。
<SelectButton disabled options={options1} />
<SelectButton value={value} onChange={(e) => setValue(e.value)} options={options2} optionLabel="name" optionDisabled="constant" />
ボタンをラップするコンテナ要素にはgroupロールがあり、各ボタン要素はbuttonロールを使用し、aria-pressedは選択状態に応じて更新されます。オプションを説明する値は、オプションのラベルを参照するaria-labelプロパティを使用して自動的に設定されるため、オプションの表示がアイコンのみのような表示コンテンツで構成されている場合でも、ラベルを定義することをお勧めします。
| キー | 機能 |
|---|---|
| tab | フォーカスをボタンに移動します。 |
| space | ボタンのチェック状態を切り替えます。 |