How to Build a Privacy Page with Toggle Buttons in React
In this lesson, we will be finishing the Settings page by completing the privacy pane.
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Composing Layouts in React course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Composing Layouts in React, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

[00:00 - 01:52] Hey everybody, we're on our last section of our settings page and today we're gonna finish it up. We're gonna handle this privacy pane and these buttons and then we will be done. So just like always, let's go ahead and refactor out this profile pane into its own component just to make things a little bit easier to pay attention to to focus on this lesson and once again don't forget to fork. So just like I did before we're just gonna copy everything and then take out the parts we don't need. So in our source let's create profile and call profile panel, profile pane, whatever you like and we just need this everything from the padbox inside the padbox and that's it. And then we're gonna change this to profile panel and that now we can just get rid of the things we don't need in here. Perfect, let's go ahead and let's go ahead and import this in.
[01:53 - 02:35] Oops, that's too... We're gonna copy and paste from your notes that you do it correctly. There you go.
[02:36 - 04:16] Let's remove the things that we don't need anymore. Awesome. Okay, so... So I've gone ahead and I've stuck down this while I've pasted from my notes. I 've gone ahead and stubbed out this privacy section. Just gave it a little bit extra just because we've already handled this in the profile panel where we had a header and we had a sub label so let's go ahead and just copy that same area and then just below is that's where our form section is. Now in our mockup we have this cool little like toggle group this toggle component. I think it's awesome right now I'm not gonna worry about trying to build that let's just use some check boxes here just for just to make it a little easier. So let's just build one of those for now. So let's replace this form section here. I got rid of one too many components. There's that input.
[04:17 - 07:21] So in this case we're doing we have this label the input is going to be on the other side so instead of putting inside the label we're actually going to put it outside and it says available for hire with this little sub label. By the way we're using gonna be using a lot of warm it some in this lesson and so just use any warm it's some generator you want if you or you can just copy it straight out of my notes whatever you'd like to do. Now first thing we want to do is tackle this this label here we want the this available for hire and the sub label to be stacked on top of each other. So let's go ahead and readjust from there. So now we have a stack as a label and we're using the HTML4 for this ID and we're putting a small gutter in between. Then the other thing we need to do is we need to put everything in line and have this first section stretch out and then have this final checkbox be on the very end. So let's go ahead and import our in line component again into this. And there we go. So now we have this in line and we're also going to be using a pad box around it. So in line it's centered we're going to put a pad box around this each and one of these toggle groups. We're going to put a large padding on top but none to the outside because we want it right up against this padding and then we want the large gutter in between them and we want this first item to stretch and this time because it's the first item we can just say start and this we've already handled and this input gets put all the way to the end because it this first stack gets stretched.
[07:22 - 14:06] Now we could copy this over and over and over again for each one but once again this is a great opportunity to create a custom component that does all this for us. So let's refactor this out and we'll create a toggle group function called toggle group takes an ID a label a sub label and checked and it's going to be we're using that in line that we're using down below the stack the sub label and all that but instead of hard coding it we're going to put the label here's the first the sub label inside of here and then whether it's checked or not that will be be passed to the input and then whatever ID we pass into this toggle group we will use as both for the label and the input. And now we can just go ahead and implement all of the toggle groups all at once here and let's refactor this and so we got the first one we're saying it's these first viewer check this one is not and we're getting a couple different sub labels doesn't matter if they're the same we're just doing some more of it some here now even when you refresh you're gonna know that you're gonna get this error from from react this is because we're we're providing a check to this input but we're not providing an on change in all actuality you will also want to do an on change once you actually like wire this up but we're just trying to get the look and feel of it so don't worry about like wiring it up and this warnings like this for now so perfect we've got the privacy panel all taken care of the only thing left we need to do is well first we need to add some borders in between because if you notice there's borders in between but not around and this is something we've already handled before it's borders that are being used for layout purposes so we're actually going to do this on the parent component we're going to create this thing called the toggle paint and once again it adds a light gray border for all the direct children who have at least one other sibling and so I'm gonna be added to the start the block start so now this toggle group we can surround it with this toggle pane component and we've got those borders that we needed and there we go we're just down to this final stretch so what's what do we need to do I bet you could probably like tell me like you're probably yelling at me what this needs this is we need some padding and we need these to be in line with a gutter in between them so let's go ahead and add that so we're doing in line with the padbox large padding a large gutter and then we're gonna justify and so that the buttons come all the way to the end and then we just need to style these buttons well these buttons need to have two different styles one for the primary dark and then the light then they they also need to have a padding so let's do a button which is a style pad box we're gonna use it as a button with a padding of medium on top and bottom on large on the left and right then we have a border radius and then we're gonna do a little check if we provide the primary prop we're gonna have no border otherwise we'll have a solid black border if we and then the background will be black if primary otherwise it will be white and if we provide the primary the text color will be white otherwise it will be black so now we can just wrap each one of these buttons in our new capital B button and we want that saved to be our primary action so let's go primary and there we are it's simple as that and we now have pull this out a little bit wider here a full settings page we'll go back and forth and compare you can see just how awesome and how quick it was to lay out even with all the styling it is to just lay out a page like this give it give that amount to set in here so I want to thank everybody for following along getting this far congratulations and just keep practicing keep using the your your layout patterns here and I wish you the best of luck my name is Travis Wathmer you can always DM me you can find me at Travis Wathmer on Twitter and as well as on github under Jarvis 10 10 we'll just look at bedrock layouts and you'll find me there and thank you again and congratulations