Chips
Description
Chips are compact elements that allow users to enter information, make selections, filter content, or trigger actions.
When to use
Use chips in a navigator to specify filter criteria used to search for values or in input fields to specify values.
In navigators, chips are used to identify which attributes the results should be filtered by and the values that should be evaluated for these filters.
In input fields, chips are used to specify values, where each chip represents a single value. Do not use for free text, numerical or date values.
Variations
In input 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.
Interactions
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 checkboxes next to the field names.)
Input fields
Click the plus icon in the input field to open a picker dialog for adding values.
Click the remove icon on the chip removes the chip from the input field. Click the remove icon on the input field to remove all chips from the 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.
Specifications
