classList

classList toggles element classes from an object of class names and boolean values.

Syntax

<div classList={{ active: state.active }} />

Value

• Type: Record<string, boolean | undefined>

Object whose keys are class names and whose values control whether each class is present.

Behavior

• Each key is treated as a class name.
• Keys can contain multiple space-separated class names, which are toggled individually.
• Truthy values add the class and falsy values remove it.
• Updates are applied per class rather than replacing the whole class attribute.
• classList works through normal DOM prop assignment, including prop spreads and <Dynamic> when it renders an intrinsic element.
• If both class and classList are reactive, updates to class can overwrite classes managed by classList.
• SSR output merges class, className, and classList into the emitted class attribute.

Examples

Basic usage

<div
  classList={{
    active: state.active,
    editing: state.currentId === row.id,
  }}
/>

Dynamic class name

<div classList={{ [className()]: classOn() }} />

Related

• class