チップは、入力フィールドに複数の値を入力するために使用されます。
import { Chips } from 'primereact/chips';
チップは、*value* と *onChange* プロパティを持つ制御された入力として使用されます。ここで、*value* は配列である必要があります。
<Chips value={value} onChange={(e) => setValue(e.value)} />
*Enter* キーを押すと新しいチップが追加されます。*separator* プロパティを使用すると、追加のキーを定義できます。現在、有効な値は *,* のみであり、カンマキーが押されたときに新しいアイテムを作成します。
<Chips value={value} onChange={(e) => setValue(e.value)} separator="," />
チップのコンテンツは、単一のチップ値をパラメーターとして受け取る *itemTemplate* 関数を使用してカスタマイズされます。
<Chips value={value} onChange={(e) => setValue(e.value)} itemTemplate={customChip} />
チップには、特定のキーをブロックするための組み込みのキーフィルタリングサポートがあります。詳細については、キーフィルターページを参照してください。
<Chips value={value} onChange={(e) => setValue(e.value)} keyfilter="int" />
フォーカスされると、入力フィールドの上にフローティングラベルが表示されます。詳細については、フローティングラベルのドキュメントを参照してください。
<FloatLabel>
<Chips id="username" value={value} onChange={(e) => setValue(e.value)} />
<label htmlFor="username">Username</label>
</FloatLabel>
デフォルトの *outlined* スタイルよりも高い視覚的強調表示でコンポーネントを表示するには、*variant* プロパティを *filled* として指定します。
<Chips variant="filled" value={value} onChange={(e) => setValue(e.value)} />
検証の失敗を示すために、*invalid* プロパティを使用して無効な状態が表示されます。フォーム検証ライブラリと統合する場合に、このスタイルを使用できます。
<Chips invalid value={value} onChange={(e) => setValue(e.value)} />
*disabled* が存在する場合、要素を編集およびフォーカスすることはできません。
<Chips disabled placeholder="Disabled" />
コンポーネントを記述する値は、*inputId* プロパティと組み合わせた *label* タグを介して、または *aria-labelledby*、*aria-label* プロパティを使用して提供できます。チップリストは、*aria-orientation* が水平に設定された *listbox* ロールを使用します。一方、各チップは、チップのラベルに設定された *aria-label* を持つ *option* ロールを持ちます。
<label htmlFor="chips1">Tags</label>
<Chips inputId="chips1" />
<span id="chips2">Tags</span>
<Chips aria-labelledby="chips2" />
<Chips aria-label="Tags" />
| キー | 機能 |
|---|---|
| Tab | フォーカスを入力要素に移動します |
| Enter | 入力フィールド値を使用して新しいチップを追加します。 |
| Backspace | 入力フィールドが空の場合、前のチップを削除します。 |
| 左矢印 | 前のチップが利用可能で、入力フィールドが空の場合、フォーカスを前のチップに移動します。 |
| キー | 機能 |
|---|---|
| 左矢印 | 利用可能な場合、フォーカスを前のチップに移動します。 |
| 右矢印 | 次のチップにフォーカスを移動します。チップがない場合は、入力フィールドがフォーカスを受け取ります。 |
| Backspace | チップを削除し、入力フィールドにフォーカスを追加します。 |