ガイドライン
Input Chip
インプットチップはチップ形式で任意の定数を選択して入力するためのコンポーネントです。
Anatomy: 解剖図
Field
| Item | Name | Description | Component | Optional |
|---|---|---|---|---|
| 1 | Container | インプットチップのコンテナ | — | |
| 2 | Chip | 選択したアイテム | — |
Chip
| Item | Name | Description | Component | Optional |
|---|---|---|---|---|
| 1 | Container | チップのコンテナ | — | |
| 2 | Label | チップにコンテキストを付与するためのテキスト要素 | — | |
| 3 | Remove Button | 選択を解除するためのトリガー要素 | Icon Button | — |
Options: 選択肢
Field
Size
md (default)
インプットチップのデフォルトのサイズです。ミディアムが最も使用されるサイズです。他のサイズのインプットチップはミディアムを基準に重要度に応じて使用します。
lg
大きなインプットチップは入力の重要性を高めるため、使用は極力控えてください。
Chip
Prefix
none (default)
チップのコンテキストをラベルだけで表現します。
icon
チップのコンテキストを、アイコンとラベルで表現します。
avatar
チップのコンテキストをラベルとアバターで表現します。
States: 状態
Enable
ユーザーが操作を行う前のデフォルトの状態。
Hover
ユーザーがインプットチップにマウスオーバーしている状態。
Focus
インプットチップが展開可能な状態。クリックやキー操作によってインプットチップが展開され、オプションが表示されます。
Disabled
システムによってインプットチップが非活性化されている状態。ユーザーによる操作は不能です。
Invalid
Enable
入力内容が特定の条件に準拠していない場合の状態です。
ユーザーが適切な入力を行うことで無効状態は解除されます。
Hover
ユーザーがフィールドにマウスオーバーしている場合かつ、入力内容が特定の条件に準拠していない場合の状態です。
Focus
フォーカスされている場合かつ、入力内容が特定の条件に準拠していない場合の状態です。
Disabled
システムによってインプットチップが非活性化されている状態かつ、入力内容が特定の条件に準拠していない場合の状態です。ユーザーによる操作は不能です。
Chip
Enable
ユーザーが操作を行う前のデフォルトの状態。
Hover
ユーザーがチップにマウスオーバーしている状態。
Focus
インプットチップが展開可能な状態。クリックやキー操作によってインプットチップが展開され、オプションが表示されます。
Disabled
システムによってチップが非活性化されている状態。ユーザーによる操作は不能です。
Behaviors: 振る舞い
最小幅やコンテンツのオーバーフローに関しては、Input コンポーネントの振る舞いに準拠します。詳しくはInputをご覧ください。
入力
フィールドを選択することでオプショングループが展開され、オプションを選択するとフィールドに値が入力されます。
また、文字列を入力するとオプショングループ内の一致する要素がフィルタリングされます。
Metrics: 寸法
Field
md
- Vertical Resizing: Hug
- Horizontal Resizing: Hug
- Container Height: 40px
- Item Spacing: 8px
- padding Vertical: 4px
- padding Horizontal: 4px
lg
- Vertical Resizing: Hug
- Horizontal Resizing: Hug
- Container Height: 48px
- Item Spacing: 8px
- padding Vertical: 4px
- padding Horizontal: 4px
Chip
Container
- Vertical Resizing: Hug
- Horizontal Resizing: Hug
- Container Height: 32px
- padding Vertical: 4px
- padding Horizontal: 8px, 4px
Label
- Vertical Resizing: Hug
- Horizontal Resizing: Hug
- Item Spacing: 6px
- padding Horizontal: 6px, 2px
Usage: 使い方
要素が4つ未満の場合や、Chipにプレフィックスを使用しない場合はCheckboxを使用してください。
入力内容のコンテクストや選択肢の識別性を補強できる場合には、チップのプレフィックスを有効にすることができます。
装飾目的でチップのプレフィックスを使用しないでください。プレフィックスは、選択肢の情報補完や識別補助を目的として使用する必要があります。
Change log: 変更履歴
| Date | Changes |
|---|---|
| 2024/11/29 | ドキュメントを公開 |
| 2023/10/14 | Figmaを公開 |
