Checkbox
A pure vanilla JS implementation of Zag JS Checkbox
Anatomy
The Checkbox component consists of the following data-part
root
label
hidden-input
control
To hide and show the correct on checkobx states, you must add class="control__checked" and class="control__indeterminate" to the respective icons
Data attributes
Each checkbox can be set with different settings with the following data-attribute.
We are aware of a bug regarding the default state as indeterminate. It currently sets the state as true instead of "indeterminate". We will update the components as soon as it is resolved on the new version.
Callbacks
Each checkbox component can receive callbacks that can be used to respond to user interaction with custom behavior.
You must add a custom id and an event listener for your event name
document.getElementById("my-callback-checkbox")
?.addEventListener("my-callback-checkbox-event", (event) => {
console.log("Received event:", (event as CustomEvent).detail);
});
Open your browser's console to see the events received when you open or close the above checkbox
Checked State Control
Checkbox checked state can be control with data attributes on any element
You must set a custom id for your checkbox, as the default is randomly generated
data-check-checkbox="checkbox-id"
data-uncheck-checkbox="checkbox-id"
data-indeterminate-checkbox="checkbox-id"
You also dispatch an event named checkbox:set-checked to the checkbox id with a boolean value
const el = document.getElementById("my-checkbox");
if (el) {
el.dispatchEvent(
new CustomEvent("checkbox:set-checked", {
detail: { value: true },
})
);
} else {
console.warn("Element with ID 'my-checkbox' not found");
}
Use with Form
Checkbox can be used inside a form
You must set the id of the form and the name of the checkbox
data-form="form-id"
data-name="checkbox-name"
You can also add the value of the checkbox. Default to : "on"
data-value="yes"
You can use the results from the form as you wish
const form = document.getElementById('my-form') as HTMLFormElement | null;
const result = document.getElementById('result') as HTMLDivElement | null;
if (form && result) {
form.addEventListener('submit', (e: Event) => {
e.preventDefault();
const formData = new FormData(form);
const newsletter = (formData.get('newsletter') as string) || 'no';
result.textContent = `Submitted: newsletter: ${newsletter}`;
});
}
Modifier
Each checkbox can be styled with modifiers.
You can mix as many modifiers on the same checkbox, however you can choose only one choice per modifer
For convenience the default variant name is omited, meaning there is no need to add the default name class
Color
Set the color of each button
Options: base(default), brand, alert
Size
Set the size of each button
Options: md(default), sm, lg, xl
Shape
Set the shape of each button
Options: square(default), circle
Mix
Mix as many modifiers for each button
Custom (Tailwind)
If you are using Tailwind styling, you can customize each checkbox with Tailwind utilities
Templates
Checkbox 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.