Skip to main content
Skip table of contents

Chip input pattern

Chips are compact elements that allow users to enter information, make selections, filter content, or trigger actions.

For more information, see

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.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.