Go to homepage

Projects /

Color Swatches

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

View Demo


All components are compatible with CodyFrame, Tailwind CSS or any other CSS framework.

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 ↗

Level up your CSS skills

Each month we email a 1-minute CSS tutorial to 20K developers

Awesome! We just sent you a confirmation link by email

Error - please try again or contact us

Your email address is already subscribed

Project duplicated

Project created

Globals imported

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