Switcher
Based of Toggle Group Component
Switcher component enables dynamic updating of data attributes while automatically saving preferences to local storage. It's ideal for implementing theme switching functionality such as light/dark mode toggles or custom theme selectors across your application.
Anatomy
The Switcher component consists of the following data-part
root
item
It can include multiple item parts.
data-value
is required on all item parts
data-key
is required on the component
data-default-value
is not required on the component but recommended to have a
default value value to load at first.
html
tag
Data attributes
Each switcher can be set with different settings with the following data-attribute.
Callbacks
Each Switcher component can receive callbacks that can be used to respond to user interaction with custom behavior.
You must add a custom id for the switcher and a event listener for your event name
Open your browser's console to see the events received when the toggle is clicked
Set Value Control
Switcher value can be control with event dispatch
You must set a custom id for your switcher, as the default is randomly generated
switcher:set-value
the detail of the event must contain the value, a list of strings
value = ["light"]
const targetEl = document.getElementById("my-switcher");
if (targetEl && targetEl !== event.target) {
targetEl.dispatchEvent(new CustomEvent("switcher:set-value", {
detail: { value }
}));
}
This a real example changing the mode on the site.
Due to another switcher with the same key on the same page, we must synchronise them using the id and callback and set value
document.getElementById("mode-switcher-demo")?.addEventListener("update-mode-switcher", (event) => {
const { value } = (event as CustomEvent<{ value: string[] }>).detail;
const targetEl = document.getElementById("mode-switcher");
if (targetEl && targetEl !== event.target) {
targetEl.dispatchEvent(new CustomEvent("switcher:set-value", {
detail: { value }
}));
}
});
document.getElementById("mode-switcher")?.addEventListener("update-mode-switcher-demo", (event) => {
const { value } = (event as CustomEvent<{ value: string[] }>).detail;
const targetEl = document.getElementById("mode-switcher-demo");
if (targetEl && targetEl !== event.target) {
targetEl.dispatchEvent(new CustomEvent("switcher:set-value", {
detail: { value }
}));
}
});
Duo Switch
If you only have 2 values and you wish to hide the active one, you can add the switcher--duo
class
RTL
RTL support for switcher
Custom (Tailwind)
If you are using Tailwind styling, you can customize each switcher and its parts with Tailwind utilities
Templates
Switcher components is available in the followng templates
-
Corex template
Default corex templates. It provides the global, semantic and components tokens
-
Modex template
Based on Corex default template, it adds dark and light mode option to the tokens
-
Themex template
Based on the Corex default template, it adds theming capabilities as well as light and dark mode options to the tokens.