Anatomy
Chip is supposed to be used only inside of form fields, especially when there is multi-value option.
- iconLeft (optional): To support a Chip label's context.
- Label: Title of an item that can be added.
- Dismiss icon: Removes a Chip once selected.
- Avatar (optional): Available to help identify a user.
Usage
Chip are placed within our Select or TextField components when adding new or searchable items from a list. They can only ever be used in this way, but should you require dismissable selections outside of a Select field, please use our Tag component.
We also provide Disabled and Read-only variants which can not be dismissed by a customer.
States
Default
Commonly applied when adding basic keywords from a selectable list.
Warning
This occurance is shown when a previously selectable value was removed from our system, but this rule still works with the value.
Error
An error is presented to communicate to a user when a status that was previously set is no longer available. In both Warning and Error variants, additional Tooltip is provided for further context.
Properties
Avatar
To improve the visual identity of a user Chip, an Avatar can be added applied.
Colour matching
When multi-selecting statuses for example, we retain the status colour in the Chip icon to retain the familiarity of colour usage within the product interface.
Best practice
- Only use for adding selections to an appropriate input field.
- Try to keep the text in a Chip short and concise so multiple chips can be viewed inside the input field.
Do's and Don'ts
|
Do |
Don't |
|---|---|
|
✅ Use nested inside either Select or Textfield components |
🚫 Use Chip on its own. Use Tag for these instances. |
Also see
- Tag
- SelectGroup