Chip

All chips have a title to represent the value entered or selected.

A hover state appears over the chip’s delete button.

On native platforms, characters can be typed in plain text and converted to a chip by hitting the ENTER key or selecting a filtered value from a list.

Chips within a text field wrap to a new line when reaching the edge of the text box. The cursor wraps to a new line when the first chip is added.

Only valid entry values convert to chips. If a value fails validation, it should remain as plain text until corrected or deleted. Focusing away from an input field removes invalid values. Existing chips within the field remain.

Chips are removed by pressing (or holding) the BACKSPACE key within an empty input field or activating the delete button.

Chips have a minimum width of 56px.

Chips have a max width of 320px before the title is truncated. If chips are nested within an input field that is narrower than 336px then they will extend the full width of the field minus padding.

Input fields with chips leverage the same behavior as comboboxes:

• The popover appears automatically when the user starts typing in the input field, or when they focus on the input field.
• The popover is filtered as the user types, so that only the options that match the user's input are displayed.
• If no option exists, and the field allows for custom values, then the value is created and added to the list.
• When an element is selected and added as a chip to the field, that item is removed from the list.
• Options within the popover can be grouped and organized as necessary.

Editing and selecting chips within a field on compact screens launches a fullscreen overlay.