class:__
Several ways to set CSS classes on an element. Each form can be a plain value or a function/signal — class bindings are reactive. To remove a class, set it to false, null or undefined.
# Forms
| form | what it does |
|---|---|
| class="a b" | sets the whole class attribute to the string (replaces any existing value) |
| class={["a", cond && "b"]} | array form — falsy entries are dropped, the rest are added |
| class={{ a: true, b: false }} | object form — adds keys with truthy values |
| class:a={truthy} | namespace form — toggles just the a class based on the value |
| class:my-ns={{ a: true }} | nested object form — identical behaviour to the object form above; the my-ns part is ignored at runtime and only there so you can organise multi-class bindings |
# Object form caveat
When you swap the object on a class={...} binding, classes that were on the previous object but not on the new one are not removed — object forms add and update, they don't sweep. To clear a class, set its value to false explicitly.
# CSS classes
The different ways to set CSS classes