Learn Alpine.js
Playing
06. More inputs

Episodes

0%
Your progress
  • Total: 2h 10m
  • Played: 0m
  • Remaining: 2h 10m
Join or sign in to track your progress

Transcript

00:00
We've already covered an example of an input type of text, email, whatever you have a standard input. Now we're going to look at things like checkboxes, radio buttons, selects, e.g. drop downs, all that good stuff that you're probably going to use inside of your app.
00:14
So let's get started and we'll look at a checkbox. So I'm going to create out some X data in here. We'll leave it empty just for now. Let's define the checkbox out.
00:23
Let's go ahead and create that out there. Again, we're going to get rid of the name and ID because we're not actually building a real app. And what we want to do is bind this to a piece of data and see what this turns up as. So let's go ahead and say X model and let's just say agreed.
00:36
So this checkbox is just going to be whether we agree to some kind of thing or not. By default, of course, that's going to be false. Now, before we do this, actually, let's take a look at what value we get when we actually submit a input type of checkbox through.
00:54
So either to just the browser or the server. So let's just go ahead and set this name to agreed, get rid of the ID, and let's create a submit button in here or button type of submit. And let's just say submit.
01:07
So let's go over and give this a refresh. Let's check it, hit submit, and you can see we get agreed on. Now, if this wasn't agreed and we submitted it, so let's get rid of that in the query string quick, we would get nothing.
01:22
So how does this handle inside of Alpine? Let's take a look. So again, we're going to bring this back to X model. We're going to output our X text as agreed.
01:36
And let's see what this gives us. So let's click it. And there we go. We actually get a true or a false value rather than an on or an empty value.
01:45
So that's really, really useful. So for example, now what we can do that we have a Boolean back, we can use an X show to say, well, if the user has agreed, say you have agreed. Let's go over.
01:59
And there we go. When we click it, we get that back. Super simple. Otherwise, what we would have to do is potentially compare this to a string value.
02:06
So it makes it a lot easier that behind the scenes, this is being bound to a true or a false value, e.g. a Boolean. To take the example of checkboxes a little bit further, let's go and just create another example out from scratch here.
02:19
So most of the time when you're working with checkboxes, they're just going to be individual things that you want to check. But sometimes these relate to a list of things. For example, if you're building a data table or some kind of list of items you want to check off,
02:33
you're going to have multiple things in here. Let's see how this gets handled within Alpine. Again, let's bring X data in here just to initialize this and not do anything just yet. And let's create out several inputs with a type of check.
02:46
And let's set the name here to record 1 and the ID to record 1. And let's go ahead and just copy this down twice. So we'll change this to record 2, obviously. And down here, let's change this to record 3.
03:03
Great. So what we want to do is have a list of things that have been checked. So we've got three things in here. And we want to output which of these has actually been checked.
03:12
So let's go up to X data and let's pull in records instead. Now, this is going to be represented as an array. If we have multiple checkboxes in here, we want these to be represented as which ID we have basically selected or which value we've selected, which we'll get to in just a minute.
03:31
So let's go ahead and say X text and records. And at the moment, we're just going to end up with three checkboxes and nothing being output. But what we can actually do in here is we can bind these and use X model multiple times. So we can bind this to records.
03:48
We can do exactly the same thing for record 2 and record 3. And then as long as we assign a value to each one of these, so let's go ahead and say value 1, value 2, and value 3. Let's just fix that up.
04:05
What we should now see is each of them being chosen. So for example, if these are a list of users that you want to perform an action on, like delete them or update them, you can now just do multiple of these. Make sure this is an array.
04:21
And then you get back an array of all of the values that have been selected. You don't actually need the name and the ID on here as a unique factor. So if we get rid of these, that's still going to work in exactly the same way. They don't determine how this works.
04:36
And you can see it still works. So let's kind of dive into this a little bit more and look at a more practical example of this. So let's just say users. Let's just say this was a list of users that we wanted to delete.
04:47
And this was Alex, this was Billy, and this was Mabel. Let's go over and it will look a little bit messy at the moment, but that's fine. So let's say that this was a form now and we wanted to submit this. So X on submit and then console log which values need to be deleted.
05:07
Obviously, that would go through to an API or something like that. Let's create a method out in here. I'm going to keep this in line. In fact, let's move this down.
05:15
It does tend to get a little bit messy. So let's pull this down real quick and we can pull that down as well. And let's just call this delete users. And then we're going to go ahead and console log first of all on this users.
05:33
And we'll just say delete users. So that's going to give us the values that we actually want to delete once we've selected them. Let's go ahead and create out a button in here with the type of submit and just say delete. So now what we do is we just bring up our console and records is not defined yet.
05:51
So of course, this just needs to change over to users. And there we go. So if I click Alex and Billy, we delete. Well, we haven't done a prevent.
06:02
So let's do that now. Let's choose Alex and Billy again. And there we go. So we've got a object now with one and two.
06:11
So when we send this down to our API, that's going to contain the values one and two within an array. So we know which ones to delete. Because Alpine is reactive, what we could also then do is if we had an initial object of users,
06:26
that we were working with, we could remove them from that list. We're not going to go into that now because we'll look at more examples like that a little bit later. For now, we just want to kind of focus on the actual form functionality. Okay, I'm going to go ahead and comment all of this out here.
06:42
And let's move on to look at drop downs. So let's imagine that we had a select inside of here and options to choose a plan to subscribe to. So we're going to have an option in here for, for example, yearly. And let's give the value of this to yearly.
06:58
And we also might want a monthly option as well. So again, change this to monthly. Now inside of our select, you pretty much guess what we need to do. We are just going to go ahead and attach or we can do this in X data.
07:12
We're just going to go ahead and attach a plan value to either an empty string or a default. Let's change this to an empty string first, just to see what happens inside of here. And let's use X model to hook this up to plan. Selects are pretty simple because they only have one selectable value.
07:30
This does work with multiple selects as well. But let's take a look at that a little bit later. So now when we choose this, it's just going to work as we would expect. Now let's actually output the value of what we have chosen.
07:44
So just output plan. At the moment, this is nothing. But yet we have a yearly option inside of here. What we'd probably want to do is have an empty option in here saying,
07:53
please choose if we wanted to have that by default. And then when we do select this, you can see we get the value back in here. And of course, when you submit this, you can send through the plan to your API or do whatever you want with it.
08:07
Now to make things a little bit friendly, what you could do is have X text in here to actually output an expression. We can have two back ticks, use interpolation to say you've chosen the plan. Plan.
08:24
Plan. There we go. And that doesn't work at the moment. But of course, we could fix that up with an X show or an X if.
08:31
And when we change this, you can see that changes. Now, again, what we could do is attach X show to say, well, if a plan has been selected, show this text. So now it will only show when we've actually chosen something.
08:43
When we go back to please choose, it disappears. Now, again, we have two way data binding here. So if you wanted a default option to be selected and you didn't want a please choose default, you could just set this to monthly, for example,
08:58
and that would go ahead and hook that up automatically. So if we give this a refresh, you can see monthly is already selected. And therefore, we see you've chosen the monthly plan. OK, so hopefully that makes sense in terms of select.
09:11
Let's finish off by looking at radio buttons. So again, we're going to go ahead and output some data in here. And let's say we're going to work again with plans. So we'll use exactly the same example, but just work with radio buttons,
09:25
which is perfectly acceptable. So let's go ahead and say plan monthly like we did before. Let's create an input type of radio out in here. And you would use radios usually if you wanted to style these up
09:37
in a slightly better way rather than having a drop down to choose a plan, which is often not very good user experience. So we're going to go ahead and say name plan in here. Let's set the value in here to monthly.
09:48
So pretty much the same as the drop down, just different. And we're going to say X model plan. And again, we can duplicate that down. Change this to yearly.
09:57
And that's pretty much it. So again, let's bring back the text that we had in here. Paste this in. And that should just work.
10:05
Let's go over. And there we go. Works in exactly the same way, minus the fact that it's really, really badly styled.
10:12
So that should have given you a good grasp on inputs. There is loads more over on the Alpine documentation if you want to dive into this a little bit more deeply. But this should be enough to get you going with what you want to build.

Episode summary

In this episode, we go beyond simple text inputs and dive into working with different kinds of form controls: checkboxes, radio buttons, and select dropdowns. We start by exploring how checkboxes behave, both in traditional HTML forms and when used with Alpine's x-model. You'll notice how Alpine simplifies things by automatically turning checkbox values into booleans, making your code easier to work with.

Next, we tackle multiple checkboxes—a common pattern when you have lists, like users you need to update or delete. We look at how you can bind several checkboxes to an array in Alpine, so you always know which items are selected. This includes seeing how the selected values can be sent to an API, and a practical example using users that you might want to delete in bulk.

From there, we shift focus to select dropdowns. You'll learn how to bind a selection to a piece of state, set up default options, and conditionally display messages when a choice is made. It's a straightforward approach that makes your code readable and maintainable.

Finally, we look at radio buttons—another classic form element. You'll discover how similar they are to dropdowns in terms of data binding, but with the flexibility to style things how you like for better user experience.

By the end of this episode, you'll have a solid understanding of how to use these various input types in your Alpine-powered forms, and you'll be ready to apply them to more complex interactions in your own projects. If you want to know even more, check out Alpine's docs for the full set of input tricks!

Episode discussion

No comments, yet. Be the first!