Skip to main content
The classMap directive efficiently adds and removes CSS classes on an element by mapping property names in a ClassInfo object to truthy or falsy values. Only properties with truthy values are added as classes; falsy values cause the class to be removed.

​
Import

import { classMap } from 'lit/directives/class-map.js';

​
Signature

classMap(classInfo: ClassInfo): DirectiveResult

​
Types

interface ClassInfo {
  [name: string]: string | boolean | number;
}

​
Parameters

​
classInfo
ClassInfo
required
An object whose keys are CSS class names and whose values determine whether each class is applied. A truthy value adds the class; a falsy value (including 0, '', false) removes it.

​
Return type

DirectiveResult — an opaque value consumed by lit-html’s template engine.

​
Constraints

classMap must be used in the class attribute and must be the only dynamic expression in that attribute. Placing two classMap calls or another interpolation alongside it in the same class attribute will throw a runtime error.Static class strings written directly before or after the expression (e.g., class="base ${classMap(...)}") are allowed and preserved — the directive tracks which classes it owns and leaves the rest untouched.

​
Example

import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';

@customElement('my-button')
class MyButton extends LitElement {
  @state() private _active = false;
  @state() private _disabled = false;

  render() {
    const classes = {
      active: this._active,
      disabled: this._disabled,
      'has-icon': true,
    };

    return html`
      <button class="base ${classMap(classes)}">
        Click me
      </button>
    `;
  }
}
In this example:
  • base is a static class and is never touched by classMap.
  • has-icon is always present because its value is true.
  • active and disabled are toggled based on component state.

​
When to use

  • You need to toggle multiple classes based on component state or properties.
  • You want a clean, declarative alternative to string concatenation or ternary expressions in a class attribute.

​
When not to use

  • When you only need a single conditional class — a simple ternary expression is more readable: class="${this.active ? 'active' : ''}".
  • Outside of a class attribute — classMap will throw if placed elsewhere.

Build docs developers (and LLMs) love

Get started for freeTalk to us