Radio Button

3 minutes
Share the link to this page
Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.


Hello in this video I am going to show you the radio button. So the radio button on like the checkbox can have only one selected title you think you have a group of radio buttons, only one of them can be selected for the checkbox, you can have multiple checkboxes, and they are independent of the other checkbox. So for example, I've left this checkbox in text item here to add a radio button. Really simple add in any way that you want to have it's a an array of children or directly on the child processes exactly the same, and the radio and a few properties that we actually you know, absolutely need in here, but before we do them, we need to create an integer, integer group and we can call it one the actual group value doesn't matter as long as you keep track of it accordingly.

And this will be the group have a set of radio buttons, the allows, you know to keep track of class left 130 select No the other current one in that group. So in here, we need to set a value something. This is basically what that you know, radio button represents some same point, just keep it simple, then we need to have value. And this is going to be this group right here. And a few other properties, I recommend as an extra task that you modify the active color we're going to be dealing with on change in on change, you need to put t and this is essentially just a template variable which just means that you know the value could be a number restrict it to the man so it's you know, it's pretty flexible and unchanged. We are going to, first of all just print t we can see what's happening.

Then we need to do set date three then we need to do this with add this the checkboxes I mean the radio button will not get selected properly. So in here, we need to sell that equals two and that's it. So if I was to duplicate this and the only change is the value so this is another radio button now to go step further, I don't know what size 123 So those are three different group radio button that the rest of it stays the same. You know, if it's part of the same radio group, then you keep saying the value keep saying on changed. So if I caught reload this and see we got three radio buttons the first one selected by select the second one, it prints out two. And you also notice first multi select if I press the first one second will be selected and it prints out one plus the third one same thing between save free button select the third one in Again, it doesn't change any value because it hasn't changed and to this doesn't go off.

So one will always be on at any given time that the difference between a radio button, I mean, the radio button and a checkbox. And you will morphologically have some sort of text as I've got here next to the check box for each radio button so the user knows white radio button represents. You probably have these maybe in sort of a column for recommend as an extra test the premium the column form and add a text widget next to each one so you can provide some extra information. If you have any questions, feel free to shoot me a message. And as usual, I look forward to seeing you in the next video.

Sign Up


Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.