Conditional classes (class:name) in Svelte

Introduction

Conditional classes let you add or remove CSS classes based on a condition. This helps change styles easily without extra code.

You want to highlight a button only when it is clicked.

You want to show an error style only if a form input is invalid.

You want to toggle a dark mode style based on user preference.

You want to add a class when an item is selected in a list.

Syntax

Svelte

<element class:name={condition}>

The name is the CSS class you want to add.

The condition is a JavaScript expression that returns true or false.

Examples

Adds the active class only if isActive is true.

Svelte

<button class:active={isActive}>Click me</button>

Adds the hidden class when isVisible is false.

Svelte

<div class:hidden={!isVisible}>Content</div>

Adds the error class if hasError is true.

Svelte

<p class:error={hasError}>Warning!</p>

Sample Program

This Svelte component shows a button that toggles an active class when clicked. The button text and style change based on the isActive state.

It uses class:active={isActive} to add the class only when isActive is true.

ARIA attribute aria-pressed improves accessibility by indicating the toggle state.

Svelte

<script>
  let isActive = false;
  function toggle() {
    isActive = !isActive;
  }
</script>

<button class:active={isActive} on:click={toggle} aria-pressed={isActive}>
  {isActive ? 'Active' : 'Inactive'}
</button>

<style>
  button {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border: 2px solid #333;
    background-color: white;
    color: #333;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: background-color 0.3s, color 0.3s;
  }
  button.active {
    background-color: #007acc;
    color: white;
  }
</style>

Important Notes

You can use multiple conditional classes on one element.

Use clear and simple conditions for readability.

Remember to add accessible attributes like aria-pressed for toggle buttons.

Summary

Conditional classes add CSS classes based on true/false conditions.

Use class:name={condition} syntax in Svelte.

This helps style elements dynamically without extra JavaScript.