Demo 4: Named States / Cyclical control (Toggle Attribute)

• ← to index
• CSS Toggles
• Toggle Attribute

How

Give the toggle-value attribute a value to set the toggle’s value. Respond to this in CSS using :toggle(name: value).

Control cycling with the toggle-group-cycle attribute on the toggle-group (default behavior: cycle). To advance the toggle, add a toggle-trigger attribute with its value set to the toggle-group name, e.g. toggle-trigger="colors".

Optionally, set [toggle-trigger-action="next|prev"] to determine the direction (default: next)

Code

<div toggle-group="colors" toggle-group-cycle>
    <button toggle-trigger>Cycle</button>
    <button type="toggle" toggle-value="grape">Grape</button>
    <button type="toggle" toggle-value="green">Green</button>
    <button type="toggle" toggle-value="blue" toggle-default>Blue</button>
    <button type="toggle" toggle-value="red">Red</button>
</div>
<output class="show-colors">I am affected by the colors cycle</output>

/* for each color */
:is(.show-colors, button.grape):toggle(colors: grape) {
    background-color: rebeccapurple;
}

Demo (by Bramus)