Attribute binding: Learn Alpine.js

Learn Alpine.js

Sign in Get started

Playing

07. Attribute binding

Transcript

00:00

So let's now talk about attribute binding. Sounds really boring but this is actually a really powerful feature of Alpine

00:06

that allows you to bind pretty much any attribute value based on an expression. Let's go ahead and look at a really simple example. So we're going to go ahead and pull in x data here. Just to initialize this we're not actually going to do anything inside of here

00:21

but let's go ahead and create out a span which can potentially have a bold class on it based on an expression. So by that I mean normally what we would do is we would apply a class directly to here. Let's say am I bold and let's go ahead and just create a really

00:39

quick inline style at the top here but you're probably going to be using a library like Tailwind or some other CSS framework. So if we go over and give this a refresh sure enough that is bold but what we can do is bind this conditionally.

00:54

So let's go ahead and try that now. For this we use x bind. We give the name of the attribute that we want to bind in and this will actually end up as an object.

01:04

The key for this is the thing that you want to bind in. So that's the class that we want to apply. The value is the expression. So for example we could say true.

01:14

That's always going to be bound in because of course we're just passing in true. Now again you see this flicker in here that's just because we need to wait for the library to load to be able to actually apply that class but again we'll deal with this kind of stuff later.

01:28

Now if I set that to false of course that's not going to bind that in and you can see we don't see any bold text. Now with this we can apply multiple classes as well even if we already have an attribute inside of this element with pre-existing classes.

01:43

So for example let's say that we had another class called blue and the color of this was blue. Let's go down. Let's apply this class directly into here.

01:55

Blue and we can have this blue and bold because xBind will as the name suggests bind this into the existing class set. So if we come over and give that a refresh that is now blue and bold. If we inspect this you can see that we get both of these in here

02:12

because of course it's just binding it in. Now we're dealing with an expression based on a hard-coded value here but what we probably want to do is have some kind of toggle for this. Let's go ahead and set xData to have a selected value

02:27

and just say that that's false for now. Now if this toggles we're gonna set this to selected. Let's get rid of that blue class as well because we're not going to need this for this example

02:38

and let's create a button in here and let's say xOnClick setSelected to true and we'll just say make it bold for example. So now we have a button which toggles some data with a class being bound in based on that data.

02:55

Let's go over give this a refresh, hit make it bold and there we go that class gets bound in and we see bold. Now this isn't the most useful example. It's probably rare that you would do anything like that.

03:06

So let's move on to something that's slightly more useful. Let's say that you had a form inside of here which could only be submitted once you had entered a value. So for example let's just kind of build this form out here

03:21

and this let's just say is some kind of name that we want to enter in. We're going to bind this potentially within the form itself to hold a name. So we know that that is xModel and name and let's create out a button in here to submit this.

03:40

So let's just say let's go and let's go and say type of submit of course. Okay so that is our form. What we want to do though is we only want to enable this button once we have entered some data.

03:56

Now to disable a button we just use the disabled attribute. Let's go over and that's disabled. Now when I type as I type so as soon as this actually has some kind of content I want to enable this.

04:13

How would we do that with Alpine? Well again we can use xBind in here and because we can bind pretty much any attribute we can bind the disabled attribute and we can bind that on the condition that name doesn't equal

04:28

or if it does equal an empty string. So if it does equal an empty string we're going to go ahead and make it disabled. Let's go over give that a refresh. Of course by default it's disabled but now as soon as we start typing you can see it enables.

04:43

So as long as this value is actually filled it's going to let us go ahead and submit this and of course we're just submitting this directly through at the moment and not handling this event. If we wanted to though we could go ahead and say x on submit and prevent the default behavior

05:00

and why don't we just alert this out. So let's just say hey and then output the user's name. Let's go over and there we go. Hey Alex.

05:10

Now let's look at binding in a slightly different piece of data and this is going to be the style attribute. Now why would you want to bind in the style attribute of an input or some kind of element on the page?

05:25

Well this works really nicely for progress bars. So let's build out a really simple progress bar. So again we're going to start with the x data in here and let's set the progress to 0 by default.

05:37

So of course that will go from 0 to 100. Let's create our native HTML progress element if my editor is actually going to allow me to fill this in and it's not. So let's go ahead and do that manually

05:48

and with this what we have let's just close that off real quick is a max value which is of course usually going to be 100 depending on what you're using this for and we're going to have some kind of text inside here as well

06:02

to represent the progress. So in this case we could actually create a span out inside of here and say x text and then we can actually output the progress in here with the percentage.

06:12

So let's do that now. Let's say progress and then after this let's say percent. So that's going to look something like this. Now at the moment it's at 0%

06:22

so it's just kind of bouncing back and forward depending on the browser that you're using but now we want a button down here to actually increment that progress bar. So we know how to do that.

06:32

We just add an x on click event handler and we just set the progress to increment this. Now I'm going to do this by a slightly higher value so let's just actually do this properly.

06:44

So we're going to set the progress to the progress current progress plus 5. So what that's going to do is actually increment that value but at the moment we're not doing anything with that value. The progress bar in here doesn't represent or bind in any kind of value that we have.

07:00

So what we can do is we can use x bind and we can bind in the value inside of here. We're not quite looking at the styling side of this yet. We'll do that in just a minute.

07:09

This is just to get us started. So we're going to bind the value of this which would normally look like this. So for example if it was 50% along it would look like the following obviously halfway but we're bringing back the x bind to actually bind the value based on the progress that we have.

07:27

We give that a refresh and start to increment it. Sure enough you can see that that increments all the way to the end until we hit the max value. So now that we know how x bind works let's move over to the next episode and actually look at a couple of practical usable examples including a better progress bar.

Episode summary

In this episode, we're diving into attribute binding with Alpine.js—and trust me, it's a lot cooler than it sounds! We start off by explaining how x-bind lets you dynamically bind attribute values to elements based on JavaScript expressions or data. That means instead of hard-coding things like class, disabled, or style, you can control them live based on your app's state.

To kick things off, we play with a simple example of conditionally applying a bold class to a span, and demonstrate how you can even combine multiple classes—something you'll appreciate if you're using utility CSS like Tailwind. We also set up a toggle button to switch a class on and off, showing how easy it is to connect Alpine's data with your UI.

We then look at a more practical example by building a form. Here, we use x-bind:disabled to keep the submit button inactive unless the user has typed in the input. As soon as you fill out the field, the button wakes up and lets you submit—super handy for real-world forms!

Next, we move on to binding the value attribute, taking on one of the most iconic UI elements: the progress bar! We show how to bind progress dynamically so the bar visually reflects changes to your data. By the end, you’ll see how to wire up events and bindings to make interactive interfaces without breaking a sweat.

Ready for more? In the next episode, we’ll build on these basics with a fancier, more practical progress bar and other real-world examples.

Episode discussion

No comments, yet. Be the first!