First Behavior

This guide shows the simplest useful behavior and explains the three main parts: declarations, lifecycle, and events.

HTML

<button class="card">Click me</button>

Behavior

behavior .card {
  count: 0;
  @aria-pressed:= count > 0; // @aria-pressed is bound to count > 0

  construct {
    // runs once per element
  }

  on click() {
    count += 1;
  }
}

What to notice

• Declarations live at the top. They set initial state and bindings.
• construct runs once when the behavior binds to an element.
• on blocks attach event handlers.
• Selector scope works like CSS: only .card elements get this behavior.

Troubleshooting

• Nothing happens? Make sure the selector matches an element in the DOM.
• Using auto-mount? Ensure the behavior script runs after the element exists.
• If you’re binding attributes, check that your expression is valid.

Learn more

• Syntax Reference for the full CFS grammar.

Notes from the creator

Some problems require new solutions. Others just require confidence.