https://github.com/nonsalant/toggle-categories
"Toggles" that control categories of toggle switches with intermediary state for when only some subitems are active
https://github.com/nonsalant/toggle-categories
css forms light-dom toggle-switches vanilla-javascript web-components
Last synced: 4 months ago
JSON representation
"Toggles" that control categories of toggle switches with intermediary state for when only some subitems are active
- Host: GitHub
- URL: https://github.com/nonsalant/toggle-categories
- Owner: nonsalant
- License: mit
- Created: 2025-02-15T16:11:31.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-02T12:15:25.000Z (11 months ago)
- Last Synced: 2025-08-02T12:25:54.999Z (11 months ago)
- Topics: css, forms, light-dom, toggle-switches, vanilla-javascript, web-components
- Language: CSS
- Homepage: https://codepen.io/nonsalant/pen/OPJLJoL
- Size: 21.5 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `` Web Component (no Shadow DOM)
"Toggles" that control categories of toggle switches with intermediary (indeterminate) states for when only some subitems are active.
- Using **Light DOM** allows you to style everything with regular CSS
- Checkboxes fallback (for items only, category names need JS to show their toggles)
- No dependencies
## Demo
[https://codepen.io/nonsalant/pen/OPJLJoL](https://codepen.io/nonsalant/pen/OPJLJoL)
[](https://codepen.io/nonsalant/pen/OPJLJoL)
*Dark mode demo of an indeterminate state for category toggles when only some subitems are active.*
## Installation
### Via CDN
Load the style and the main script in your `head` or anywhere in the `body`:
```html
```
CDN demo: https://codepen.io/nonsalant/pen/MYapmzR/bf1a11a33025524b17cdbe6ff9e3bb71
- The script can also be loaded as a module:
```html
```
### From local files
1. Grab the files from the src folder.
2. Load the style and the main script in your `head` or anywhere in the `body` (adjust the paths as needed):
```html
```
- The script can also be loaded as a module:
```html
```
## Usage
Use it like this:
```html
-
Category Name
- Item 1
- Item 2
-
Other Category Name
- Item 3
- Item 4
- Item 5
```
- Use the `checked` attribute to have an item pre-selected:
```html
```
- ID's are generated automatically for the checkboxes, but you can also set (some or all of) them manually:
```html
```
## Styling
You can use regular CSS to style everything since the custom element does not use Shadow DOM.
You can also override these CSS custom properties to change the appearance of the component by adding the following CSS anywhere:
```css
toggle-categories ul {
--toggle-category-color: light-dark(red, hotpink);
--toggle-color: #018259;
--toggle-category-height: .8rem;
--toggle-height: 1rem;
--toggle-categories--heading-bg: light-dark(#ddd, #333);
--toggle-categories-bg: light-dark(#f0f0f0, #222);
}
```
Note: `ul` added in the selector above for extra specificity, to override the values set in toggle-categories.css.
## Other notes
The `setTimeout(()=>{...})` wrapping the insides of the `connectedCallback()` lifecycle method allows the script to be used as a non-module script tag (in addition to the module option) from anywhere on the page, including the document head, by adding a ~4ms delay which should be enough for the DOM to be ready.