Interactive

Tree with checkboxes

With data-m-tree-checkbox every item gets a tristate checkbox: checking a branch checks everything below it, and a branch with some checked children shows as mixed. Space or Enter toggles. Needs monsoon.js.

Interactive2 classesNeeds monsoon.jsLight and dark

Needs monsoon.js. The styles work on their own, and the behavior comes from the optional interactive layer: add <script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script> or import 'monsooncss/js'. See the interactive layer.

Example

Full

tree-checkbox.html

<ul class="tree max-w-xs" data-m-tree data-m-tree-checkbox aria-label="Notifications">
  <li data-open>Email
    <ul>
      <li data-checked data-value="email-mentions">Mentions</li>
      <li data-checked data-value="email-replies">Replies</li>
      <li data-value="email-digest">Weekly digest</li>
    </ul>
  </li>
  <li data-open>Push
    <ul>
      <li data-checked data-value="push-mentions">Mentions</li>
      <li data-checked data-value="push-reminders">Reminders</li>
    </ul>
  </li>
  <li data-value="sms">Text messages</li>
</ul>

JavaScript API

Attribute

data-m-tree data-m-tree-checkbox

Options

Option	Description
`data-checked on a leaf starts it checked`

Methods

Method	Description
`Monsoon.tree(el).checked (values of the checked leaves)`

Events

Event	Description
`monsoon:tree-check { item, checked }`

Classes

2 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

Class Type What it does

Class	Type	What it does
	Base	Base class of the tree with checkboxes. On an <ul> in the example. Sets margin, padding, text size, border, hidden by default and font weight, and `--tone` and `--tone-fg`. CSS `.tree [role=treeitem] { outline: 0; } .tree [role=group]:dir(rtl) { margin-inline: 0 .8125rem; }`
	Modifier	Modifier, combined with the tree class. Not used in the example above. Sets grid display, alignment, width, height, text color and background. CSS `@media (forced-colors: active) { .datepicker-grid td[aria-selected=true] .datepicker-day, .range-dual-fill, .tree-check::before { forced-color-adjust: none; background-color: Highlight; color: HighlightText; } } .tree-check::before { content: ""; width: .75rem; height: .75rem; background-color: currentColor; mask: var(--m-ix-check) center / contain no-repeat; scale: 0; transition: scale var(--m-duration) var(--m-ease-spring); }`

Base

Base class of the tree with checkboxes. On an <ul> in the example. Sets margin, padding, text size, border, hidden by default and font weight, and --tone and --tone-fg.

CSS

.tree [role=treeitem] {
  outline: 0;
}

.tree [role=group]:dir(rtl) {
  margin-inline: 0 .8125rem;
}

Modifier

Modifier, combined with the tree class. Not used in the example above. Sets grid display, alignment, width, height, text color and background.

CSS

@media (forced-colors: active) {
  .datepicker-grid td[aria-selected=true] .datepicker-day,
  .range-dual-fill,
  .tree-check::before {
    forced-color-adjust: none;
    background-color: Highlight;
    color: HighlightText;
  }
}

.tree-check::before {
  content: "";
  width: .75rem;
  height: .75rem;
  background-color: currentColor;
  mask: var(--m-ix-check) center / contain no-repeat;
  scale: 0;
  transition: scale var(--m-duration) var(--m-ease-spring);
}

Usage

The styles ship inside the same stylesheet as the utilities, and the behavior comes from the optional monsoon.js script, which enhances any element with a matching data-m attribute, including markup added later.

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>

<!-- Tree with checkboxes: start from the base class, then add modifiers -->
<ul class="tree max-w-xs" data-m-tree data-m-tree-checkbox aria-label="Notifications">
  <li data-open>Email
    <ul>
      <li data-checked data-value="email-mentions">Mentions</li>
      <li data-checked data-value="email-replies">Replies</li>
      <li data-value="email-digest">Weekly digest</li>
    </ul>
  </li>
  <li data-open>Push
    <ul>
      <li data-checked data-value="push-mentions">Mentions</li>
      <li data-checked data-value="push-reminders">Reminders</li>
    </ul>
  </li>
<!-- the full example is in the Code tab above -->

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

#Example

#JavaScript API

#Classes

#Usage

#Accessibility

#Related components

Example

JavaScript API

Classes

Usage

Accessibility

Related components