diff --git a/examples/react/css/src/algolia.css b/examples/react/css/src/algolia.css
index 0ecd4dd7e2..ae5f18ae12 100644
--- a/examples/react/css/src/algolia.css
+++ b/examples/react/css/src/algolia.css
@@ -8,6 +8,7 @@
 @import url('breadcrumbs.css');
 @import url('hierarchical-menu.css');
 @import url('refinement-list.css');
+@import url('toggle-refinement.css');
 @import url('panel.css');
 @import url('pagination.css');
 @import url('hits-per-page.css');
diff --git a/examples/react/css/src/toggle-refinement.css b/examples/react/css/src/toggle-refinement.css
new file mode 100644
index 0000000000..2c79730e62
--- /dev/null
+++ b/examples/react/css/src/toggle-refinement.css
@@ -0,0 +1,41 @@
+.ais-ToggleRefinement-label {
+  cursor: pointer;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+}
+
+.ais-ToggleRefinement-checkbox {
+  appearance: none;
+  height: 18px;
+  width: 32px;
+  position: relative;
+  pointer-events: none;
+  border: 1px solid rgba(var(--ais-border-color-rgb), 0.3);
+  background-color: rgb(var(--ais-background-color-rgb));
+  border-radius: calc(infinity * 1px);
+}
+
+.ais-ToggleRefinement-checkbox:checked {
+  background-image: none !important;
+}
+
+.ais-ToggleRefinement-checkbox:checked::after {
+  transform: translateX(14px);
+  background-color: rgb(var(--ais-background-color-rgb));
+}
+
+.ais-ToggleRefinement-checkbox::after {
+  appearance: none;
+  content: '';
+  width: var(--ais-spacing);
+  height: var(--ais-spacing);
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: rgb(var(--ais-muted-color-rgb));
+  border-radius: calc(infinity * 1px);
+  transition: var(--ais-transition-duration)
+    var(--ais-transition-timing-function);
+}