Bind HTML Classes

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.

Pass in your class object to the getter.

Your element renders like this.

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).

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

See Also

• Bind Inline Styles
• Anti-Patterns for Component Styling