Using CSS Toggle to Select an Element Based on Its Toggle State

Defining a Toggle State

A toggle state is a binary state that can be either active or inactive. You can define a toggle state in CSS using the toggle-root property and describe how the state will change based on user interaction with the toggle-trigger property.

Selecting an Element Based on Its Toggle State

You can use the CSS toggle pseudo-class to select an element based on its toggle state.

.toggle {
  /* styles for the toggle */
}

.toggle:toggle(active) {
  /* styles for the active state */
}

In this example, the .toggle class defines the toggle state, and the :toggle(active) pseudo-class selects the element when the toggle state is active.

Toggling Visibility

You can also use the CSS toggle pseudo-class to toggle the visibility of an element. This is useful for building disclosure widgets, such as tabs or accordions.

.toggle {
  /* styles for the toggle */
}

.toggle:toggle(visibility) {
  /* styles for the visible state */
}

In this example, the .toggle class defines the toggle state, and the :toggle(visibility) pseudo-class selects the element when the toggle state is visible.

Grouping Exclusive Toggles

If you have multiple toggles, you can group them together using the toggle-group property. This is useful for building patterns where only one toggle can be active at a time, such as tabs or accordion menus.

.toggle-group {
  /* styles for the toggle group */
}

.toggle-group:toggle(active) {
  /* styles for the active state */
}

In this example, the .toggle-group class defines the toggle group, and the :toggle(active) pseudo-class selects the element when the toggle state is active.

Other Features of the CSS Toggle Pseudo-Class

• A toggle root can contain multiple toggles.
• It’s possible to have more than one active state in a toggle.
• The toggle state is set to inactive by default, but this can be overridden.
• You can also represent states with a set of words, not just numbers.
• Sticky toggles are always active because there’s always at least one active item.
• State machines with transitions are being considered.

Keep in mind that the CSS toggle pseudo-class is still an unofficial draft, and these features may be updated or changed over time.