チップタグ （ 概要 ）
アイテム化した任意の情報を、表示・削除しやすくするための要素です。属性やユーザー情報をアイテムにして並べたり削除したりするような場合に有効です。
ユースケース
- 選択した項目を並べて、個別に外せるようにするとき
- ユーザーが選択した項目をアイテムとして並べます。何を選んでいるかを確認しながら、不要なものだけを削除できます。たとえば、サイト内検索で指定した絞り込み条件を検索結果の上に並べるといった使い方があります。
- 入力した値をアイテムにして並べるとき
- 入力した値をひとつずつアイテムにして並べます。たとえば、メールの宛先を入力する欄での使い方があります。人物を示す場合は、先頭にアイコンを添えて誰を指しているかを分かりやすくできます。
注意が必要なケース
- 状態や分類を示す場合はチップラベルを使う
- チップタグは、ユーザーが選択または入力した値を扱うためのものです。コンテンツが持つ状態や分類を示す場合は、チップラベルを使用してください。
- 削除したときにもとに戻す方法がないときはチップタグは使用しない
- チップタグは削除操作が不可逆である場合には使用しないでください。代わりにチェックボックスの使用を検討してください。
関連コンポーネント
各種リソース
| 種別 | リソース | 状態 |
|---|---|---|
| デザイン | Figmaデザインデータ（v2） | 提供中 |
| HTML版実装 | ソースコード（GitHub） | 提供予定 |
| サンプル（Storybook） | 提供予定 | |
| React版実装 | ソースコード（GitHub） | 提供予定 |
| サンプル（Storybook） | 提供予定 |