Go to homepage

Projects /

Color Swatches

A list of selectable swatches used to show a product color variants.

View Demo

How to

The Color Swatches component is used to show different color variations of a product.

The default version is a <select> element that is replaced by custom color swatches using JavaScript.

Each <option> has a data-style attribute equal to the custom style you want to apply to the swatch (e.g., background-color value):

<select class="js-color-swatches__select">
  <option value="black" data-style="background-color: #000;">Black</option>
  <!-- other options here -->

You can also pass a list of comma-separated custom data attributes that you want to add to the color swatch using the data-custom-attr attribute:

<select class="js-color-swatches__select">
  <option value="black" data-custom-attr="data-one: valueOne, data-two: valueTwo" data-style="background-color: #000;">Black</option>
  <!-- other options here -->

When the user selects a new color swatch, the native <select> element is updated with the new selection and a change event is emitted.

With the --link variation, each swatch links to a different page where the product variation is shown.


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.