(upbeat music) We all know that filament is extensive on form fields. There are a number of options to choose from. Yet, sometimes we'll have to reach out for a custom form field. In our case, when we click on Return Book, we would like the users to enter a rating, but not using a radio button or a select. We would like to display stars. And when the user who was over the second, third, fourth star,

We would like to display stars. And when the user who was over the second, third, fourth star, we would like to give a rating that way, just like we see in a lot of apps. So let's create that custom form field right now. Open Terminal, use the command, PHP, Artisan, Make Filament Form field. I would like to call it rating. Okay, it's created successfully. We should have a rating component

Okay, it's created successfully. We should have a rating component and a rating view as well. A lot of work is already done here for us. The way in live wire, we use a public property and in Alpine, we bind an input or something with the state. That's what we need to do here as well. This statement here sets a state property and entangles it with getStatePath. This statePath here is the field name

and entangles it with getStatePath. This statePath here is the field name that we give while creating the form field. I'll show you what that is. So for now, let's just test it with a simple input text field. Input type equals text. And yeah, X model is state. So let's say we have an input like this. Now let's use this rating form field, wherever we want,

So let's say we have an input like this. Now let's use this rating form field, wherever we want, which is in the book users table, instead of the, yeah, select right here. Let me remove this and use the new rating field that we just created. So when we save make rating, this is the statePath I was talking about. GetStatePath gets rating right now. Let me also make it require.

GetStatePath gets rating right now. Let me also make it require. Okay. Now instead of submitting the form, let's just DD and see what we get. I will comment this out and I will say DD data. So we should get the rating right here or whatever we enter in the input field right here, we should be able to see. So let's go refresh, return book.

we should be able to see. So let's go refresh, return book. We see the input field. Let me type something here, submit. Yeah, as you can see, rating is something. It's as simple as that. Now we make the UI happen. So let's go to the blade view and instead of our text input, let's add radio buttons here, put type equals radio, X model is state,

and instead of our text input, let's add radio buttons here, put type equals radio, X model is state, and five of these radio buttons start rating from one to five. So let's use or loop. Yeah, I equals one, I less than or equal to five, I plus black and four. And we would like to see and the value of this, just put it in the new line, value will be I perfect. Let's wrap this inside a label. So we are able to see what the number is,

Let's wrap this inside a label. So we are able to see what the number is, what the rating is. Let's use a span here. And let me just use dollar I so that we can see it. Also, we want all of this to appear next to each other. So let me wrap the whole thing inside a div with flex box. Not here, close the div after four and div plus flex.

Not here, close the div after four and div plus flex. Let's see what this gives us refresh, return book. And yes, we have one, two, three, four, five, let me just check three, submit, we see the rating as three. Now, instead of the numbers here, let's show the star icon and also hide these radio buttons at the same time. In tailwind, there's a very useful utility,

and also hide these radio buttons at the same time. In tailwind, there's a very useful utility, which is SR only. So what it does is it sets the position absolute, it does all the things where you would like to not show this input, but it exists because we should be able to check the radio button and screen readers will still be able to see it, but it's hidden from the normal user. Let's do this and also replace the number with X,

but it's hidden from the normal user. Let's do this and also replace the number with X, hero icon, S star, we don't need any of this. Let's just remove, right? All we need is a star, but yeah, okay. Let's see what this gives us first. Fresh return book. Yeah, we don't have any colors or nothing, but if we click on the fifth star and submit, it's working. Let's work on the UX.

but if we click on the fifth star and submit, it's working. Let's work on the UX. Now, I will add some styles, all the colors to the label here. So we will start with text gray 200. So let the stars be of this very light color instead of gray we used slate, right? So yeah, text slate 200 and on hover, we would like to see text amber 400, hover. Yeah, it would also be great if the star could, you know,

we would like to see text amber 400, hover. Yeah, it would also be great if the star could, you know, scale a little bit and cursor pointer. Another thing is if I check this input, so if this label has a checked input, it would be great to see a much darker star. So I will use the has checked variant and set the text to amber 500. Let's see what this looks like. Refresh return book.

Let's see what this looks like. Refresh return book. Yeah, we're almost there. So if I click on this, you see a darker shade, four is selected, submit. Yeah, we see four. But definitely when we hover over any star, the general behavior is that all the previous stars also change their color. So here let me just put these in new lines

also change their color. So here let me just put these in new lines so that it's more readable. So here I will give it a pure class and say that if its pure is hovered, then make this text also as amber 400. Okay, let's see what this gives us. Fresh return book. You see what's happening? It's working but in the reverse order.

You see what's happening? It's working but in the reverse order. And this is how the pure class in our Tailwind works. It uses one of the features in CSS where you can change the style of one element based on its previous element. So if I'm hovering on this, all the next ones can get affected, but not the previous. So we use a simple trick here.

but not the previous. So we use a simple trick here. Instead of flex row, as an instead of flex in the normal direction, we change this to flex row reverse. Okay? And now, yeah, it's on the right, but we have the behavior exactly the way we want. Let's just put it on the left using w fit, which means I'm just restricting the width

Let's just put it on the left using w fit, which means I'm just restricting the width to as much as needed, which will put it in the left. So, okay, that's great. Hope it is working great, but check is still not. We use the same peer feature. So we will say peer has checked. So if the peer of this label has an input that is checked,

So we will say peer has checked. So if the peer of this label has an input that is checked, then set the text to amber 500. This should work. Fresh return book. This does work. So let's set the rating to maybe two submit. Oh, and we see four, yes. Though we changed the appearance flex row reverse, we didn't change the values here, which is very wrong.

Though we changed the appearance flex row reverse, we didn't change the values here, which is very wrong. So let me do this in the reverse order. I equals five. I greater than one. I'm minor. Fresh. So this should give us four now. Four. And this should give us one.

Four. And this should give us one. All right, that's great. Let me just remove the DD from here. Delete. Remove the comments. Things should work as expected. Refresh. Return book. Let me check how much rating it has right now.

Return book. Let me check how much rating it has right now. If we go to books, the moonlit mascara. Yeah, it's right here. So it has four stars. I'm sorry, let me just make it one star just so that we are able to see the difference. I will give it one star and save. Not good. Submit.

Not good. Submit. Yes, request place successfully, et cetera. Go back to books. And yes, the average is reduced now. So this means it's working.