Bind HTML Classes

AVAILABLE API VERSIONS
Available in LWC API v62.0 and later

Manipulate a component or an element’s class list easily using its class attribute. You can use class object binding instead of string concatenation to generate complex class names.

Here’s an example that evaluates multiple classes on an element.

1<template>
2  <h1>Class Object Binding Demo</h1>
3  <div class={computedClassNames}>Evaluate some classes here</div>
4</template>

Pass in your class object to the getter.

1import { LightningElement } from "lwc";
2
3export default class extends LightningElement {
4  position = "left";
5  fullWidth = true;
6  hidden = false;
7
8  get computedClassNames() {
9    return [
10      "div__block",
11      this.position && `div_${this.position}`,
12      {
13        "div_full-width": this.fullWidth,
14        hidden: this.hidden,
15      },
16    ];
17  }
18}

Your element renders like this.

1<div class="div__block div_left div_full-width">Evaluate some classes here</div>

Class Binding Considerations

In LWC API v62.0 and later, use an array or an object to bind multiple styles to an element’s class attribute.

An array is evaluated based on its individual items based on class object binding semantics. For example, if you pass in ["highlight", "yellow"], the element renders class="highlight yellow".
An object is evaluated based on class object binding semantics. LWC iterates over the enumerable string properties on the object, excluding symbols and properties on the proto-chain. It applies the classes with the keys associated with a truthy value. For example, if you pass in { highlight: true, hidden: false }, the element renders class="highlight".

In LWC API v62.0 and later, booleans, numbers, and functions are removed instead of converted to a string. For example, if you pass in true, false, or 10, the element renders class="". LWC ignores all other values, like primitive and complex objects.

To render a boolean or numerical value as a string, such as class="false" or class="1", convert the value to a string using String(value).

Before LWC API v62.0（equivalent to LWC OSS v7.0.0), the class attribute rendered booleans, numbers, functions, arrays, and objects differently. See LWC v7.0.0: Class object binding.

Note

Class Binding Examples

These examples show the differences between LWC API v62.0 and previous versions.

Type	Example	Output in LWC API v62.0	Output in LWC API v61.0
String	`"note highlight"`	`class="note highlight"`	`class="note highlight"`
Boolean	false	`class=""`	`class="false"`
Number	10	`class=""`	`class="10"`
Function	`() => {}`	`class=""`	`class="() => {}"`
Array	`["note", "highlight"]`	`class="note highlight"`	`class="note,highlight"`
	`[false, 'note', null]`	`class="note"`	`class="false,note,"`
	`['block', { note: true }, ['highlight']]`	`class="block note highlight"`	`class="block,[object Object],highlight"`
Object	`{block: true, hidden: false, 'note highlight': true }`	`class="block note highlight"`	`class="[object Object]"`

See Also

Release Preview

This release is in preview. Features described here don't become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can't guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.