Summary  
The chapter explains how the x-bind directive enables dynamic binding of HTML attributes to component state using expressions, automatically updating those attributes in the DOM when data changes.

General domain of usage  
Interactive web interfaces

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPHN0eWxlPgogICAgICAuYWN0aXZlIHsKICAgICAgICBjb2xvcjogd2hpdGU7CiAgICAgICAgYmFja2dyb3VuZDogZ3JlZW47CiAgICAgIH0KICAgICAgLmluYWN0aXZlIHsKICAgICAgICBjb2xvcjogZ3JheTsKICAgICAgICBiYWNrZ3JvdW5kOiAjZWVlOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYKICAgICAgeC1kYXRhPSJ7IGlzQWN0aXZlOiBmYWxzZSwgY29sb3I6ICdibHVlJywgZm9udFNpemU6IDE4LCBpbnB1dFZhbHVlOiAnSGVsbG8hJyB9IgogICAgPgogICAgICA8YnV0dG9uCiAgICAgICAgeC1iaW5kOmNsYXNzPSJpc0FjdGl2ZSA/ICdhY3RpdmUnIDogJ2luYWN0aXZlJyIKICAgICAgICB4LWJpbmQ6c3R5bGU9Iidmb250LXNpemU6ICcgKyBmb250U2l6ZSArICdweDsgYmFja2dyb3VuZDogJyArIGNvbG9yIgogICAgICAgIEBjbGljaz0iaXNBY3RpdmUgPSAhaXNBY3RpdmUiCiAgICAgID4KICAgICAgICBUb2dnbGUgQWN0aXZlCiAgICAgIDwvYnV0dG9uPgogICAgICA8aW5wdXQKICAgICAgICB0eXBlPSJ0ZXh0IgogICAgICAgIHgtYmluZDp2YWx1ZT0iaW5wdXRWYWx1ZSIKICAgICAgICB4LWJpbmQ6cGxhY2Vob2xkZXI9ImlzQWN0aXZlID8gJ0FjdGl2ZSEnIDogJ1R5cGUgaGVyZS4uLiciCiAgICAgIC8+CiAgICAgIDxwPgogICAgICAgIDxzcGFuCiAgICAgICAgICB4LXRleHQ9ImlzQWN0aXZlID8gJ0J1dHRvbiBpcyBhY3RpdmUnIDogJ0J1dHRvbiBpcyBpbmFjdGl2ZSciCiAgICAgICAgPjwvc3Bhbj4KICAgICAgPC9wPgogICAgPC9kaXY+CiAgICA8c2NyaXB0CiAgICAgIHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9hbHBpbmVqc0AzLngueC9kaXN0L2Nkbi5taW4uanMiCiAgICAgIGRlZmVyCiAgICA+PC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

The `x-bind` directive in Alpine.js lets you dynamically bind HTML attributes to your component's state. This means you can update things like `class`, `style`, `value`, `placeholder`, `src`, and more based on your data, and any change in state will immediately update the attribute in the DOM.

You can use `x-bind` in two ways: either as `x-bind:attribute="expression"` or using the shorthand `:attribute="expression"`. For example, `x-bind:class="isActive ? 'active' : 'inactive'"` will set the `class` attribute based on the value of `isActive`. This is especially useful for toggling classes, styles, or any other attribute that should respond to user actions or changing state.

Common use cases for `x-bind` include:
- Dynamically toggling CSS classes to reflect state;
- Adjusting inline styles based on data;
- Setting input values or placeholders from your component's state;
- Updating image sources or link URLs in response to user interaction.

With `x-bind`, you can make your HTML highly reactive and interactive while keeping your markup clean and declarative.

What is a typical use case for the x-bind directive in Alpine.js?

Learn how to build lightweight, reactive user interfaces with Alpine.js using simple HTML-driven directives. Explore state management, event handling, and dynamic UI patterns without writing heavy JavaScript. Gain hands-on experience creating interactive components for modern web projects.

Get introduced to Alpine.js, its lightweight philosophy, and how it enhances static HTML with reactive behavior. Learn how to set up the library and prepare your environment.

Discover how Alpine.js manages state and updates the DOM automatically using its essential directives. Build dynamic interfaces with minimal JavaScript.

Handle user input and events using Alpine.js bindings. Build interactive elements through two-way data binding and conditional rendering.

Create practical UI components such as dropdowns, tabs, and modals using Alpine.js declarative patterns. Learn how small directives can power complex interactions.

Unlock more advanced Alpine.js capabilities for list rendering, reactive effects, and scalable component architecture.

x-bind for Attribute Binding

x-bind for Attribute Binding