Material UI Tutorial #8 - Radio Buttons

Key Takeaways

okay then so the next thing i want to add to this form are radio buttons and that's going to offer the user a way to select a category so i've already searched for the radio component right here on material ui and if we scroll down this is what these radio buttons are gonna look like so we can see we have a disabled option right here then some standard options this is the code that they provide we're gonna do something similar to this later on but to begin with i want to show you the basic way to create a radio component so the first thing to do as always is import the component we need so import radio from material ui core radio and then down here below the text fields i'm just going to output a couple of radio components so let me do this radio self closing and then we also give this a value and basically we give this a value because ultimately when a user selects a radio button we want to store the value of that radio button whatever they've selected somewhere so that's what this is kind of used for so the value is equal to hello in this case and then let's do another one and the value is going to be goodbye okay so if i save this then preview in the browser then it's going to look something like this we have two radio buttons we don't see any text but that's because we've not used labels at the minute the value is not a label the value is just a property on this radio button if i inspect this and come over here we can see we have an input right here and the value is hello on this input that's where the value goes okay all right then so this thing right here is a radio button this is a radio button and they can both be selected now in our case i don't want a user to be allowed to select multiple radio buttons at once because that kind of defeats the object of choosing a category i don't want it to be in a work category but also in a to do's category for example i just want them to choose one single category and this isn't allowing me to only let the user choose one now the way we do this is by using a radio group and a radio group is something that surrounds different radio buttons to group them together so that a user can only choose one of those options now the radio group is a component so i need to import it first of all at the top so import radio group from forward slash call forward slash radio group and then down here what we can do is surround these things with the radial group component so let me do that i'm going to say radio group and then at the bottom i'll place the closing tag like so and scoot those in so if i save this now and preview we can only select now one of these at a time because they're grouped together and when we have a group of radio buttons the idea is that a user should only be able to select one of those otherwise we'd use checkboxes where they can select multiple different things but radio buttons ideally should only be where a user selects one of them so that solves this problem now they do look a little bit different as well and we get this massive oval hover effect but don't worry that's going to go later on now we could use radio buttons like this but instead there's a better way to use them and that's to kind of embed them in what's known as a form control label and this gives us a way to create a label which kind of wraps around the control the radio button so that's what i'm going to do so right here i'm going to delete those and instead i'm going to use a component called form control label if i click on this it's going to auto import it at the top for me you can see right here it's grabbed it it has destructured it but it doesn't matter it's still going to work so down here form control label the first thing i'm going to do with this is give this a control property okay so let me just close off this form control label now this control property is basically the type of control that we want this label for and in our case it's going to be the radio components so this is all we do we place our radio component inside the form control label but the good thing about this is is that we can add now a label to this input and this for example is going to be money that would be a category right and if i save this and preview now we can see it's styled nicely we have the label on the right however it won't let me select anything at the minute we'll come to that later on because this needs a value and i'm going to set that equal to money so basically when a user selects or checks this radio button this is the value that is associated with that radio button and if we save this now and try to select now it works okay so it needs that value prop all right so that is a form control label now ideally we want a few of these because we have a few different categories so the second one i'm going to do is going to be for to do's and then down here it's going to be reminders and then below that it's going to be work so we have four different categories and we need to change the labels for each one of these as well so let's do that work finally and now if we save this it should look all right cool and each of these has a different value and we can only select one at a time cool so this is working but we now want to store whatever value a user selected in some kind of state don't we so let's create some more state for this i'm going to go to the top and below these i'm going to say const and we're going to call this category and a function set category to change this set that equal to use state now what we're going to do is set an initial value and this initial value is going to be one of these values right here money to do's reminders of work and when we set that initial value basically what we're going to do is pass it into this radio group later to say that look this initial value should be the one that's auto checked when we first come on the page so if i set this equal to for example to do's then i want it to be where a user first comes onto this create page and this to-do's one is initially checked by default because that's the first value that we hard-coded right okay so how do we link up this value with the radio group well i can say value first of all and set that equal to category so that was the piece of state and that's equal to to-do's and that's what sets this as the default active radio so if i refresh it's always going to be to do's when we refresh now if i try to click on this it's not going to let me change it anymore and that's because this value now is always to do's based on this category state so we need a way to update that category whenever we select a different value and we can do that by using the on change handler so we'll set this equal to a function which takes in the event object and inside this function we're going to use set category to update the state and we want to update it to the event.target so that will be whatever radio button we select and then the value of that so that's either going to be money to do's reminders or work so let me save this and preview in a browser now we can select any of these now what i want to do is output that value at the end so let me output the category right here as well save it and preview over here let's go to the console so we can see this enter in any old rubbish and then change this to reminders submit and we can see now we get reminders right here as well as these other two things awesome so there is one more thing i want to do and that's to add a label to this section so each one of these has a label but i want a little label above this section to say look this should be the category you choose so how am i gonna do that well in order to do this the first thing we have to do is import a couple of things so i'm importing two things we have a form label right here so this is a generic label that we can use to apply a label to different form sections if you like and then we have a form control which is kind of like a wrapper for a certain section a certain control area of the form so what's gonna happen is this form control is going to wrap a label with this section so it associates the label with these things so then let me come down here and flesh this out so above the radial group first of all i'm going to do the label so form label like so and by the way we don't use the form control label here because this is a generic label it's not going next to or wrapping a particular control this is just to label a particular section of the form so all we need to do right here is say note category and that is our form label now i want to associate this with this i want to put it into the same context if you like and to do that all we have to do is wrap everything inside a form control component which is the other thing we just imported so let me do that as well form control like so and then i put the closing tag at the very bottom down here and scoot these things in like so now i'm also going to apply a class to this so class name is equal to classes dot field and that is the field class we created earlier right here and all this does is apply some margin to this section of the form now so if we save this and preview we can see now we have this category and everything should hopefully still work let me choose one of these enter in a load of rubbish press submit and yep everything works so the next step is to submit this form and store our data somewhere and to do that we'll be using json server so we'll set that up in the next lesson