Toggle Group
A pure vanilla JS implementation of Zag JS Toggle Group
Anatomy
The Toggle Group component consists of the following data-part
root
item
It can include multiple item parts.
data-value
is required on all item parts
Data attributes
Each toggle-group can be set with different settings with the following data-attribute.
Callbacks
Each Toggle Group component can receive callbacks that can be used to respond to user interaction with custom behavior.
You must add a custom id for the toggle group and a event listener for your event name
document.getElementById("my-callback-toggle-group")
?.addEventListener("my-callback-toggle-group-event", (event) => {
console.log("Received event:", (event as CustomEvent).detail);
});
Open your browser's console to see the events received when the toggle is clicked
Duo Toggle Group
If you only have 2 values and you wish to hide the active one, you can add the toggle-group-duo
class
RTL
RTL support for toggle-group
Custom (Tailwind)
If you are using Tailwind styling, you can customize each toggle-group and its parts with Tailwind utilities
Templates
Toggle Group 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.