About this set
Two checkbox trees whose parent boxes are tri-state. Role permissions with a select-all root lists an editor role’s rights in four groups plus a nested GitHub group, with a checked-of-total tally on every parent and a summary line under the title. Shop filters with product counts is an outdoor store’s category filter with a product count on each leaf, a live total of matching products, a Clear all button and an Apply filters button. Each item is a real checkbox inside a label. When a parent changes, a short script copies its state to every box below it, then walks the parents from the deepest up: all children checked makes the parent checked, none makes it unchecked, and anything in between sets the native indeterminate property, which screen readers announce as mixed or half checked. Groups fold away with a separate disclosure button that has aria-expanded and toggles the hidden attribute, so clicking the label never collapses a branch by accident. The plain CSS and Tailwind versions draw the box, tick and dash with appearance none; the Bootstrap version uses .form-check-input, which already draws the indeterminate dash.
What’s included
- Tri-state parents using the native indeterminate state
- Checking a parent sets every descendant, children update every ancestor
- Checked-of-total tally on each parent and a polite status line
- Product counts, a running total and Clear all in the filter version
- Separate disclosure buttons with aria-expanded for each group
Accessibility
Every checkbox is labelled by its visible text, and parents expose the mixed state through the native indeterminate property. The expand buttons are named after their group and report aria-expanded. The summary line is a role status region, so totals are announced politely. Checkboxes and buttons show a 2px indigo outline on keyboard focus, and transitions stop under prefers-reduced-motion.
Customise it
Change --ct-accent on .ct-cb and .ct for the checked colour, and --ct-line, --ct-soft and --ct-muted for guides, tallies and secondary text. In Bootstrap the accent is applied to .form-check-input:checked and :indeterminate; in Tailwind edit the colour utilities on the tally and buttons.
