MoreLesson 186Free preview

Contact Chips

This lesson is part of How To · All levels

Summary

This lesson discusses contact chips, which are small pieces of information that contain an avatar and a name that can be deleted. The chip is often used on the email recipient column or team member, and some chips can wrap up to the next line. The delete button needs to have a clear label so that the user knows which contacts to delete.

Key points

Set the chip with a flexbox and allow the flex-wrap so that some chips can move the line
Use an avatar image with an alt blank when the name already explains the contact.
The delete button should have a label that says the contact's name.
When you add a chip from the input, use textContent and clean the input after it's added

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.