If you have any project questions, concerns, or contribution ideas, join our #pwa Slack channel. Find out how to create an account by visiting Community Resources

Color selector component

Description Reference image
Initial state Color selector
New color selected Color selected


  • Unavailable indicator - Unavailable colors are marked with an ‘X” on the color swatch
  • Selection - On tap, a checkmark appears on the swatch along with a tooltip that displays the color name. The tooltip disappears in a short amount of time.
  • Selection removal - On tap, the checkmark is removed from the color swatch.