Chip input pattern
Chips are compact elements that allow users to enter information, make selections, filter content, or trigger actions.
For more information, see https://material.io/design/components/chips.html.
In our design, they can be used to specify filter criteria used to search for values in a navigator or in input fields to specify values.
Chip appearance and behavior
The maximum length is the shorter of:
- one line
- 356 characters
When the length of the chip exceeds the maximum length, an ellipsis is displayed to indicate that additional information is available.
Chip variations
Chips as filters
In navigators, these chips are used to identify which attributes the results should be filtered by and the values that should be evaluated for these filters.
Unselected filter chips are displayed with a down chevron. They do not display the remove icon.
On click, a dialog opens. Depending on the type of value, the user can select one or more values from a picker dialog, specify a date or a range of dates, or specify other search criteria, and click OK.
The chip is then displayed with the filter criteria specified.
Clicking the "remove" icon removes the value of the filter. The filter chip remains, with a down chevron. To remove the chip entirely, click the chip and click the REMOVE FILTER button. (To remove several filter chips, open the Select filter fields dialog and clear the checkbox next to the field name.)
Chips as input values in forms and dialogs
Used to specify values in an input field, where each chip represents a single value. Do not use for free text, numerical or date values.
The input fields for chips have the same appearance and behaviors as text input fields. For details, see Text fields.
Chips that represent an entity with an avatar (contacts, companies, and so on) display the avatar to the left of the text. Otherwise, only text is displayed.
Clicking the remove icon removes the chip from the input field.
Specifying single or multiple values using chips
Before any chips are added, we display just the plus sign for both types of picker.
After the chips have been added:
- For MM, display both plus sign and X.
- For M1, display just X.
Displaying multiple chips in an input field
If the number of chips exceeds a single line, a counter chip is added to specify how many more chips (values) can be displayed.
Expand the chips (in multiples of 50) either by clicking the counter chip or by bringing focus to the input field.
On losing focus, collapse the chips to be displayed in one line and display the counter chip.