Pill/Chip: To represent an input, attribute, label or action

[daneah]

The problem

I need to represent a list of email addresses in an input field so that a user can add a single or multiple emails within the input field.

The solution

Creating a pill/chip component that standardized the look and behavior of this component.

Here is the design we'd like to follow for this feature.

This is the starting state:

List state with valid pills:

List state with pill error:

Hover on pill error state:

Alternatives considered

I took a look at what Material Design does for similar use cases and I find that their chips component is very similar to the behavior we're looking for.