Color Refinement List

Let users filter on results according to their preferred color

View repoCheck out the demo


React InstantSearch widget that filters the dataset based on color facet values.
Equivalent of the offcial RefinementList widget but displaying a color indicator instead of text facet values.

This helps the user quickly visualize the kind of color that you have in your index. This is a great widget to refine records within multiple shades of a single color (like choosing the color of a jean for example).

React InstantSearch is an open source UI library for React that lets you quickly build a search interface in your frontend application.

InstantSearch’s goal is to help you implement awesome search experiences as smoothly as possible by providing a complete search ecosystem. InstantSearch tackles an important part of this vast goal by providing frontend widgets that you can assemble into unique search interfaces.


Was this useful?


Built by Algolia's developer community, not supported by Algolia




The best Search and Discovery Platform for your business.

Fabien Motte

Fabien Motte

Hey, I'm Fabien, a Junior Software Engineer interested in front-end development as well as creative development and 3D.

Recommended content

Frontend Tools
Widgets & Plugins

Refinement List Widget

A widget allows the user to filter the dataset based on facets.

  • JavaScript
  • React
  • Vue.js
  • Angular