0.0.4

Toggle Group

A pure vanilla JS implementation of Zag JS Toggle Group Opens in a new window

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

<div class="toggle-group toggle-group-js" data-default-value="a">
                  <div data-part="root">
                  <button data-part="item" data-value="a">A</button>
                  <button data-part="item" data-value="b">B</button>
                  <button data-part="item" data-value="c">C</button>
                  </div>
                  </div>

Data attributes

Each toggle-group can be set with different settings with the following data-attribute.

<div class="toggle-group toggle-group-js" data-default-value="b,c" data-orientation="vertical" data-dir="ltr" data-deselectable="true" data-loop-focus="false" data-rowing-focus="false" data-multiple="true">
                  <div data-part="root">
                  <button data-part="item" data-value="a">A</button>
                  <button data-part="item" data-value="b">B</button>
                  <button data-part="item" data-value="c">C</button>
                  </div>
                  </div>
Data attribute Type / Options Description
id string The unique id of the component. Default generated if none is provided
data-default-value string || string list The initial selected toggle group value/values. Separated by comma
data-value string || string list The controled toggle group value/values. Separated by comma
data-orientation horizontal | vertical The orientation of the toggle-group. Can be `horizontal` or `vertical` - `horizontal`: only left and right arrow key navigation will work. - `vertical`: only up and down arrow key navigation will work.
data-dir ltr | rtl The orientation of the toggle-group. Can be `ltr` or `rtl`
data-loop-focus boolean Whether the keyboard navigation will loop from last tab to first, and vice versa.
data-rowing-focus boolean Whether to use roving tab index to manage focus.
data-multiple boolean Whether to allow multiple toggles to be selected.
data-deselectable boolean Whether the toggle group allows empty selection. Note: This is ignored if multiple is true
data-disabled boolean Whether the toggle is disabled.

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);
                      });
                  
<div id="my-callback-toggle-group" class="toggle-group toggle-group-js" data-default-value="a" data-on-value-change="my-callback-toggle-group-event">
                  <div data-part="root">
                  <button data-part="item" data-value="a">A</button>
                  <button data-part="item" data-value="b">B</button>
                  <button data-part="item" data-value="c">C</button>
                  </div>
                  </div>

Open your browser's console to see the events received when the toggle is clicked

Data attribute Type / Options Description
data-on-value-change string Event name to be send when the toogle 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

<div class="toggle-group toggle-group-js toggle-group--duo" data-default-value="a">
                  <div data-part="root">
                  <button data-part="item" data-value="a">A</button>
                  <button data-part="item" data-value="b">B</button>
                  </div>
                  </div>

RTL

RTL support for toggle-group

<div dir="rtl">
                  <div class="toggle-group toggle-group-js" data-default-value="a" data-dir="rtl">
                  <div data-part="root">
                  <button data-part="item" data-value="a">A
                  <svg class="item__icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
                  </svg>
                  </button>
                  <button data-part="item" data-value="b">B
                  <svg class="item__icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
                  </svg>
                  </button>
                  <button data-part="item" data-value="c">C
                  <svg class="item__icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
                  </svg>
                  </button>
                  </div>
                  </div>
                  </div>

Custom (Tailwind)

If you are using Tailwind styling, you can customize each toggle-group and its parts with Tailwind utilities 

<div class="toggle-group toggle-group-js" data-default-value="a">
                  <div data-part="root" class="bg-ui-alert shadow-xl rounded-xl">
                  <button data-part="item" data-value="a" class="bg-ui-brand data-[state=on]:bg-accent-brand data-[state=on]:text-accent-contrast-alert data-[state=on]:hover:bg-accent-brand-1 data-[state=on]:active:bg-accent-brand-2">A</button>
                  <button data-part="item" data-value="b" class="bg-ui-alert data-[state=on]:bg-accent-alert data-[state=on]:text-accent-contrast-brand data-[state=on]:hover:bg-accent-brand-1 data-[state=on]:active:bg-accent-brand-2">B</button>
                  <button data-part="item" data-value="c" class="bg-ui data-[state=on]:bg-accent data-[state=on]:text-accent-contrast-brand data-[state=on]:hover:bg-accent-1 data-[state=on]:active:bg-accent-2">C</button>
                  </div>
                  </div>

Templates

Toggle Group components is available in the followng templates

Timer Tree View