Chip Input

Chip Input allows users to provide multiple entries of the same format and easily edit or delete them.

Guidelines

Multiple text strings of the same format: When we expect multiple entries of the same format, Chip Input allows the user to enter them neatly in one Field instead of cluttering the form with multiple fields.

We expect singular data entry: Chip Input should only be used when you expect to collect multiple entries, e.g. multiple email addresses. When only one data entry is expected, Text Input should be used instead.

Text strings include a space: Hitting space key on the keyboard will convert the entered string into a Chip. Therefore, Chip Input won’t work for data that consists of multiple words like e.g. name and surname.

User doesn’t know the exact string text: Currently, Chip Input does not support the autosuggest feature. Therefore, the user needs to enter the entire text string themselves.

If you want to extend Chip Input functionality to include autosuggest, please contact the MDS team to discuss the requirements and contribution.

All properties of the Chip Input are shared with other field components. They have been described on the dedicated Fields page.

Users can activate a Chip Input by clicking on the field’s container and start typing.

Each chip has an interactive “close” icon. Clicking on it will remove the Chip and the data it containes.

Key	Interaction
Tab	Sets focus on the Chip Input.
Space	Ends and replaces the inserted text string into a Chip.
left/right arrows when typing the string	Moves cursor character by character within the inserted text string.
left/right arrows when no string is typed	Moved focus between the Chips.
ctrl or opt + left/right arrows	Moves cursor to the start or end of the text string.
backspace when typing the string	Deletes typed characters one by one.
backspace when no string is typed	Removes the Chip in focus.

The content guidelines of the Chip Input are shared with other field components. They are described on the dedicated Fields page.