How to Design a Perfect React Material UI Form

hi or welcome back to this third video incomplete react material UI video series where we built an app from scratch by applying material UI components and concepts to a real-world project in this video we will create or design a material UI form with all common input controls like input text box radio button checkbox drop-down list date picker etc for form controls we have created reusable and extendable components you could use these same best practices from this video for designing your material UI form actually I don't know how to emphasize the importance of this video in this series but I am sure if you are looking for a best tutorial on Mui form this is it so base watch till the end of this video before starting this video I would like to thank for your paypal donations for my previous works in order to make more helpful and quality tutorials like this you can also support me through PayPal donation I have given the link in video description and inside the first comment of this video so here we have the final project from previous tutorial in this video we are going to design a form with validation containing almost all common input controls for this demonstration we'll be using employee details inside the application so back to the project here first of all let me add a new folder pages inside that I will have new folder called employees now let's add two components inside the folder employees and then employee form now let's define the functional component with this snippet RFC now let's do the same for this employees component also inside this component will be dealing with list of employees we'll be doing that in future videos and inside this employee form here we will design and validate before so this employees component will be a parent component for this employee form component so first of all let me display this employee form inside this employees here employee form let's add the corresponding import statement here from employee form we have to import employee form now let's show this employees component inside this app component here employees let's import that here we are showing this page header from AB component here page header will be different for different pages so let me cut this page and up from here and I will paste that inside this employees component here since we have multiple outer element here we have this one parent error here you know to avoid that we can wrap them inside react fragment now let me change this title here new employee page description will be something like our form design with validation now we have to import this page header and this icon up here imported man of this icon is there inside this app component let me cut that from here and pasting here now back to the application here so currently we are showing this page header from employees component now let's design the form inside this employee form component here in order to design the employee form we need a model with all of the employee properties for that I will be using the component state object for that will be using react hooks so mainly we have to import these two functions here use state and use effect let me explain how these two functions books if you want to define a component state property here you could do this constant and then here we have the tupple first of all here we have this tape variable X along with that we can have this function set X and we will initialize that by calling the function react function react hook function use state so this is a component state variable X if you want to initialize this variable you could do that by passing the value here let it be something five so this state object or variable will have the initial value five now this set X is a function which can be used to update the value of X suppose if you want to update the value to six you could do this just call the function set X and here we have to pass the updated or new value so this is how we can define component state object in react hooks now with this function use effect we can define side-effects for this state variable here for that we just need to do this this quality function use effect for this function we have two variables first of all we will have this callback function as a second parameter we can have this array okay now if you pass this state variable X here this callback function will be executed whenever the value of this variable changes if you want to execute something when value of exchanges you could do that inside this callback function here so that's why we are calling this as a side-effect function so this is how react hook works now let's define a state object for the form model so let it be values and then here we have the corresponding set function set values now we can initialize that by calling the function use state so this will be an object containing all of the properties for input controls inside the form that we are going to design so the form will be here form inside that we will be showing input controls for all of the properties inside this values object here now before adding input controls into this form I want to initialize this values object with default values for that I will be defining a property here Const and initial field values first of all we have ID which is corresponding to the primary key and then here we have the full name email mobile city and then we have gender default value will be mail corresponding to this property we will be having a group of radio buttons and then we have Department ID corresponding to this property we will be having a drop-down list containing list of departments inside the company when you select a department corresponding Department ID should be saved inside this property here after that we have higher date I will initialize that with today's date so we can call this date function here corresponding to this property will be having a date picker and finally we have this property is permanent for this property we will be having a check box so here we have defined all of the properties inside the form with the default values now let's initialize this state object with these default values here so I will pass the object here now let's start adding input controls inside the form here before that let me advocate here you want to show input controls in to grid columns so we can add this material UI grid here so this will act as the container inside that we need to create column we have discussed material UI grid in first video of this series all of the video links before this video and after this video will be the in video description and inside the first comment of the video once they are uploaded we want to spread this grid into two halves so excess is equal to 6 now inside this first column here we need an input control for full name for that we'll be using this material UI component text field so the documentation you could see various use of theif component here inside the application we'll be using this variation here with outlined so first of all we have to sell this property variant as outlined and we have to set the label as full name in order to populate this control value with the default value that we have passed here we have to set this property value we can access that from this state object values here since we have initialized this with the object initial field values so values full name like this we need one more input control for email address also so let me copy paste this control just below email values dot email so here we have the input controls corresponding to full name and email address as you might have guessed if we keep adding the stuff the controls like this all of them will be congested like this so we have to add custom CSS to align them properly we have discussed them in force and second video in depth for that we have been doing this first of all we will be defining a function use style here you can initialize that with material UI function make stars will be passing this function with single parameter theme from this function we just need to retrain an object so we just need this pair of parentheses and here we have the object inside that here we have this style root is equal to an object and we are going to apply this root style into this form component here so in order to apply that we could do this constant classes use stars function can be called now let's apply this root style to this form element here class name plus s dot root now with this style here we are going to apply margin and width for these input controls inside the form element in order to identify each of the control separately we should have a common class applied to all of these controls so here we have the depth corresponding to the text field for full name here so this class Mui form control hi Fandral will be there in all of the controls inside before so let me copy this cross here define a selector first four we will have this ant simple which refers to this parent root here we have discussed them in previous tutorials and inside this parent element if there is an element with this class we'll be applying these styles here which is equal to 80 percentage and then we have margin film dot spacing with 1 so margin from all sides will be applied with 8 pixel now back to the application that's it all of the controls will be shown in different lines with proper margin now before adding rest of the form controls let me add a container for the reform otherwise it would be shown as an outsider for this page so let's do that inside the parent component here employees will be enclosing the form with paper component from material UI we have discussed this component in previous tutorial now you could see the paper component here let's add some margin and padding for this control for that we can do the same like we have done inside the form component use style actually I would like to call this as you stars let's use the same convention across all of the components here so let me rename this use the shortcut press f2 let's update this as eustress hit enter so all of the occurrence of this function will be updated you could see that here now let me copy this from here and pacing here and instead of this roll will have this style page content and here we have the styles so first of all we have to apply the margin theme dot spacing of the range 5 and then we have padding spacing of the range 3 now let's create the variable process you can call the function use styles here now let's apply the class into this paper component class name is equal to classes dot page content sorry we forgot import mixed as here may Styles so that's it here we have applied both margin and padding for the control and now back to the form component here now if you check this input control inside the form let me enter some random text in it but nothing shows it's because of this attribute or property value here value inside this input control will be shown as per the property full name so whenever we input values into this control we have to update the value inside this state property full name also for that we can make use of this event on change here we will be calling a function handle input change now let's define this function up here this is a function with single parameter e which is the default event parameter in any HTML input element now I forgot to add one important property for these input controls here which is name ok now let me add that here name is equal to full name now inside this function we have to retrieve this name property and the value property of this control from this event variable e here for that we can use this destructive index like this name and then value we can retrieve this from this event parameter target property so inside this property Eid or target we will have the object corresponding to this input variable here from that we can retrieve name and value into these variables here now let's update this free name property inside these are values object here so that we can call this function set values so set values into the function I will just pass this object inside this values object we have these much properties and inside this handle input change function we just need to update the value of the input control from which this on change function is triggered so I will do name is equal to value so this will update the value of that particular property from which this on change even is triggered now in order to use the current value of other properties we can use this separator and then you could pass these values here so all of the other properties will be using the same value the value of input control from which unchanged is triggered will be updated with this statement here with this syntax the value inside this named variable will be used here so it will be full name in case of this input control and rest of the controls will also have this name property so it will update the respective property okay now let me save this back to the application here now let me check whether it is working or not yes it is working now inside this component we have some common course which can be reused in other forms inside this application also in that way we can reduce number of course we write and it will be helpful for testing purpose also let's look how we can separate common course in two separate react components so that inside this components folder here I will be creating a new file use form now let's define a functional component here now let me move this object into this component here we have to impose this react hook function use state into this component we have to pass this initial field values okay now from this function we will return an object containing reusable variables or functions so values then set values now let's call this use form function inside this component here use form into this we have to pass this initial field values and this function returns reusable variables and functions and we can access that with this destructive syntax here values then set values now let's move this function into this use form here let's return that here handle input change now this form should works as before yes it is now let's move this form component into the file here for that I will be defining one more component here so RFC I will name this function as form we don't need this imposed Ament let me remove that since we have to export more than one element from this file we can avoid this default and when we import them in the Stasi files we have to use this curly brace so import use form and form now let's create a form element like we have here form now let's use this component here form let me wrap the under element or grid with this new form now let me remove this previous HTML form from here now the elements that we have passed inside this form tag here can be accessed inside the component props parameter here so props and we can show all of those inner child elements like this props dot children now we have to apply the custom CSS that we have applied here so let me cut this from here and paste that here we have to import this mixed as function here material ui core from that we have to import make styles now let's call the function use stars here classes is equal to use styles now let's apply the class here class name is equal to classes root now let's remove this classes object from here back to the application it should works as before yes it is working from now onwards we can make use of this reusable course inside this file for designing rest of the forms inside this application otherwise you have to repeat this course in every component with for it could be also helpful when we want to make changes across all of the forms inside the application for example if you want to change the width of input controls you just need to change the width here then it will be reflected inside all of the forms inside the application now let's proceed with rest of the input controls for these controls here will be having input controls we have shown them here like this now let me show you how you can have a group of radio button for this gender property here that we can show inside this second grid column here so first of all you should have this wrapper for the control forum control inside that we have to show a label for this so form label it will be something like gender and just beneath that we have to show a group of radio buttons for that we have this component radio cube you can see various examples on using this control in documentation inside our application we need three radio buttons inside the group in order to show a single radio button we can have this form controllable first of all we can set the value here it will be something like male then we can have the control property here inside that you can have the actual radio button for that we can make use of this material UI component radio okay now let me show the label here label is equal to me don't worry with this multiple material UI component for a single property gender we will also move them into reusable components in a bit so here we have the gender male like this we have to have two more radio button so let me copy this and pissing below this is for female and finally we have the gender other forest of the categories so here we have radio buttons for agenda I want to show them in a single line for that we can set this property here it is similar to passing true here we can simplify that by just passing raw here now in order to update corresponding property gender when we make selections inside these are credit groups we have to have these properties value and unchanged here so let me copy this and paste in here we need name which is equal to gender so this name should be similar to the property that we have inside the values state since we are applying the value with the name property inside this handle input change here now value is equal to values dot gender now this should works as expected see the default value male is selected here for a single gender property here we have added multiple material UI component here like this we have to add multiple elements for date picker drop-down list etc so it would be better to move them into a separate components like we have done for form here it would be difficult to support a single element from these multiple lines of code here at the top here we have imported multiple elements here if we keep adding input controls like this the list of important elements will be huge so let's look how we can separate these form input controls into separate reusable component inside the application now first of all let me show you how you can move this text field control into reusable component now you may ask why do we want to move this control into a reusable component for this radio group here it's okay because it is using multiple components for a single property but if we convert this into reusable component in future if you have some changes to be applied we just need to change that in one place so let's do that here for that inside this components folder I will create a new folder controls now let's create the component for input controls as input dot J's now let's create the functional component here into this control we have to pass few parameters from the form so we have to have this probs parameter here to access those parameters here we can use this destructive syntax here first of all we need name label then value on change event we can extract these from this props here now let me cut this text field from here and pasting here throughout the application we'll be using this variant as outlined and we can access this label from the variable here label name value then on change even function now let's use this component input inside this form here so we just need to do this input select this autosuggestion here so that corresponding input statement will be added at the top but it's added from Madeira like oh this is a control inside material UI which is not what we want we want this input control that we have created inside this project so this is a problem while creating reusable component with general name like input form etc we can avoid this problem for now let me remove this input from here and I will add the exact impo statement here now into this control we have to pass name as full name then label value is an unchanged function which is handle input change sorry before go to import X field inside this input component here in order to do that just basically at the end of this component then use this shortcut called control then press P deed then select the autosuggestion that's it back to the application so now we are showing this full name input control from this reusable input component here now let's do the same for this input control also so we can do this input let me remove this text field from here we don't need this variant and we can pass this on change even here now let me show you how you can make a reusable component for this radio group here let's create a new component radio group let's create a functional component with single parameter props let's access all of the properties that sent from our form component then for this radio group we will have an array called items and we can extract these properties from props parameter here before designing the control here let's call this function inside this component here so first of all let's add the import statement here and we have to import radio group and here let's create an array containing gender items it will be an array inside that we have to have objects corresponding to each radio button inside the radio group so here we have the object for male first of all we have this ID property the title male let me duplicate this two times this is for female and other category now let's use this component radio group here radio group but we have the same problem here also whether it is coming from our custom component here or it is from the actual material UI Co package in order to avoid this problem inside this controls folder here I will create one more file controls so this will be an object export controls and here we will define an object like this now let me add the import statement for radio group also Radio Group back to the employee form here now let's remove these imported men here so with this control object we can minimize that into 1 so inside the controls folder we have controls object let's import that here now we can access that like this controls input now let me copy this and pissing here now we can do the same for this radio group also radio group now we have to add name value and unchanged for this controller so so let me copy this and paste in here along with that we have to pass the label gender let's pass these are a gender items inside this property items now let me cut this radio group from here and we can paste that inside this radio group here in place of this label we can use the label that we have sent from v4 let's update these properties accordingly name value on change now in order to show these radio buttons inside this form controllable we can I trade through with these array items so that we can do this items dot map function can be called and such that we have this callback function with two parameters item and the index inside this function we just need to return this form control levels so I'll let me copy this and paste in here this value can be assigned from this ID property that we have inside the array gender items so we can do this item ID in same way let's update the label which is there inside this property title so item title now let's remove these controls from here now let's add missing import statement here we can use the shortcut just basically at the end of the component and use the shortcut hold control and press space select the corresponding autosuggestion now let's do the same forest of the components but for this radio group we have to do something different this custom component also has the same name to do group so you can do this we have to import radio group and you can use this alias mui radio group now instead of radio group you could use mui radio group continue adding missing imported men here and finally radio button now let me save this now let's check whether it is working or not here we have an error with import and export does not contain a default export in controls let's take that here so in order to avoid the problem i will define the constant here and at the end we can export that here export default controls now let's check whether it is working or not now back to the application boom now let me show you one benefit of reusable components inside this form i want to remove this auto suggestion from previously posted at us here in order to avoid this we have to set a property inside the form which is here we have defined that inside this usable component you know to avoid that we just need to set this property autocomplete as off now we don't have the auto suggestion here if we were using direct form element inside these form components here we have to do that in multiple places so this is the main benefit of using reusable components apart from that we can avoid these repeated import statement at the top now let's look how to add drop-down lists in material UI for that also we are going to create a separate control reusable component here select let's create the functional component here with single parameter props now let's extract all of the properties that send from the actual form so name the label value on change function options and we have to export these from props before design the component let's use this component select for that first of all we have to add that inside this controls object here so let's add the import statement here let's add the same here now back to the form here to add the drop down we could do this controls dot select name is equal to Department ID then we have label as Department value is equal to values dot Department ID on change is equal to handle input change hope you understood the logic behind this function handle input change we have defined this function inside this use form here all of the controls text field then radio group or radio button or drop down all of them have same input change parameter that is here e inside the parameter will have the name and value with respect to you whether it is input or radio button or select etc there are some exception for some controls we can discuss that in a bit now finally we have to add options in a practical application there will be a back-end API from which we can fetch all of the department's inside the application to simplify this tutorial just to focus on the material UI concepts I have not used any specific backhand API like asp.net corn or J's etc so for saving data inside the application will be using local storage so to first at us like this we'll be creating a service class so let's do that here I will be creating a new folder called services inside that we can have this employee service for now I will just define a function with hard-coded array of departments so we can call this function as get department collection in a practical application you will be accessing these datas from the backend API so here is the function inside that we just need to retrieve this array so here we have four departments with their proper ID now let's call this function inside the form component here so first of all let me add the import statement at the top inside this service file here we'll be adding multiple functions to fetch data from the backend or data storage so I will be importing all of them as employee service here now we can call that function here employee service get department collection now let's design this component select here first of all we have this form control variant is equal to outline as per the MEI documentation here you could see various dropdowns or select controls that we can have with the package inside our application maybe having these types of drop downs with outlined that we have done for text field or input controls for showing label we can have this control input label beside that you can have this property label now we can show this select control from material UI actually here also we have the same problem select which is similar to the custom component here select so we have to use a custom or alias for these controls so we have to import select and we have to import that as mu I select now let's use that here now let's pass all of those name label on change even etc we have to add the label property that we have already added here for the proper alignment for this control we have to add the same level here also so a label is equal to label now let's add the select control options here menu item first of all we will have this default option none sorry here we have a type of its own change first of the options are there inside these options so unless I trade through them sorry we have to use options I hope I have passed the same from this form here yes options dot map function can be called inside then we can have this callback function with single parameter item from this function we just need to return menu item here value is equal to item dot ID now inside this option we can show the title item dot title now we have to do one more thing when we render a collection of data from an array like this we have to add key property to this element here so key is equal to and it should be a unique value so we can use the ID that we have applied for the value here so item dot ID we have to do the same for this radio group also let me copy this and pasting here key is equal to item dot ID actually we don't need this index here so let me get rough that from here actually here we have a type of it's Department sorry Department ID now let's correct the same here also let me save this and back to the application boom so here we have added the material UI drop down list with all of the options that we have past now if you inspect this application here you could see a rare error here find domnode is deprecated in strict mode actually this is an error inside material UI library function which is using this function find dom node which is outdated or deprecated in strict mode to avoid this problem we can remove this strict mode inside our react application which is the inside the root javascript file index dot JS let's remove this strict mode from here now it should works as expected let me check the console here now we don't have any such deprecated error now let me give you a small challenge here let's try to create a reusable component for this checkbox property is permanent here for this hatted we could show a typical for this hat date in a bit before that let's try to show a checkbox for this is permanent property here you could see various examples on using checkbox component from material UI here let's pause this video and try that on your machine how did it go let me try the same inside this project here for that we have to create a component checkbox in here let's create the functional component with a single parameter props define the properties for this component name label on change value and we have to extract these from these props here first of all we have to have this component form control inside then we can have this form control level inside that we can specify the control for checkbox so control is equal to we can pass the component check box from material UI since both of them have same lis we have to use alias here so check box as Mui checkbox let's use that here Mui check box now let's pass rest of the properties here first of all we have name color of Silva color as primary instead of value for check box we will be having this property checked we can set that with the property value now we have unchanged event here in here for now we'll just pass this function unchanged and finally inside this form control level here we have to pass the label so label is equal to the label that we have passed from the form now we have to add this check box inside the controls object here so first of all let me add the impo statement here let's add the same check box here now back to the employee form we can add that here controls check box now let's pass those properties is permanent let me copy that from here the label it would be something like permanent employee then value values dot is permanent now let's pass this on change event now back to the application now let's check whether it is working or not so here we have the checkbox that we have added now let's try to check this checkbox here it's not working let's inspect that here you could see this error invalid probes check of type string supplied it's because of this on change even here into this unchanged even inside the check box we have passed this handle input change this function handle input change expect an event parameter with these values name and value inside this target property here in case of checkbox on change even parameter e there will not be this property value inside this object here instead there will be checked property so inside this component checkbox here we are going to format that event parameter into this format here containing this target property with this property name and value for that first of all we are going to define a separate function here convert to default event parameter for this function we have two variables name and value from this function we just need to return an object with single property target inside that we have to have two properties name which is equal to name that we have passed into this function here the same can be achieved by passing just the name here and value here now we will call this function before passing the event parameter into actual function handle input change here so here we have the default event parameter we can call the on change even it will be handled input change function that we have passed from this component here inside this we could call this function convert to default even better first of all we have to pass the name then property corresponding to the value which is the inside this property checked let's check whether it is working or not yes now it is working without any error if you have tried this silence like I have asked you might have done everything right except this unchanged even here finally let's look how we can create a date picker for this property heart date here so that let's create another component here date picker and here is the functional component as per this mu I documentation here you could have this native date picker using this text field by passing this type as date here inside this application will be showing date picker like this for that we have to install this package here this package the documentation is here I have given this link in video description first of all we have to install this package so let me copy this installation command from here let me open one more terminal here let's paste that here hit enter so here we have done with the main package installation along with that package we also have some dependent package here now let's install these packages make sure to enclose this version number here which is a condition for main package which has the major version number three that is what is mentioned here now let me copy this installation command from here let's paste that here hit enter so we have done with all of the installations I have given this link in video description let's design the date picker here first of all we have to have this main component Mui picker utils provider let's add the corresponding import statement at the top material UI because and we have to import Mui Pickers utils provider sorry here we have a typo let me correct that now into this component we have to pass this property UT's into this we have to pass this function eh functions utils which is from this dependent package so let me copy this and let's add the importing statement here date function utils now before adding the rest of the components let's add the probes parameter for this component and let's extract the variables that is passed from the actual form so name label value on change even function and then we can assign this with props now inside this component we can have this keyboard they picot make sure to import this here first of all we have to disable the toolbar then variant will be in line you could check these properties description inside the official documentation input variant as outlined and finally we have the label now let's add the format for the date first of all we will have the month then date then here now we have the name then value and here is the on change event now let's pass this on change even function here we don't need a separate close tag so let me remove that from here now let's use this date picker inside this employee form before that we have to add this date picker into this object here controls so that's it I will add the date because just about this checkbox so controls dot they pick up now let me copy paste these properties from checkbox let me copy this name from here hi date label will be hydrate let's update this value also hydrate now for this date because also for this unchanged event we can't expect this type of format for this event parameter now in order to do this conversion we have to have a function like we have done inside this checkbox so let me copy this and pissing that inside this component here so here we have the parameter from this event we have to call this function convert to default para into this we can pass the name from this property name instead of value there will be a property date for the selected date so actually this unchanged even of this date picker will be returning a date so that should be passed here let me save this back to the application let me select a date from here okay it is working fine while selecting a date from this picker you could see at the same time we have changed this date here with the help of unchanged event so that's all about date become now just beneath this email control here we have to add two more input controls for mobile and city it will be inside this fourth gear column here so let me copy this and paste in here twice first of all we have mobile and then we have city so city let me save this back to the application here now we have completed with input controls inside before now we have to add two more buttons for submit and reset operation so first of all we'll be adding a reusable component here button and here is the functional component for this component we have this single parameter props now inside this mùi documentation here you could see the various examples on using the button commonly used properties of buttons our variant color and then sighs - most of the buttons inside our application will be filled with a background color so we'll be using the variant content if you just want to have this outline here you could use outline variant and you could apply background colors like primary secondary then the default color and for this size property valid options are small medium large first of all let's extract the values that is passed from the component so first of all we have the text which is to be shown inside the button then size color variant on cake event function and we have to extract these values from this props here now let's use the material UI component button here since it has the same name as that of this component here let's use an alias name so here is the import statement we have to import button as Mui button and now let's use this here variant is equal to now let's apply these properties here and inside this button we can show the text now let me save this and back to this employee form here we have to show both submit button and reset button in a same row for that we can enclose them with a dip like this sorry we forgot to add this button in two controls object here first of all here we have the import statement let's add the same here back to the employee form now let's use that button here so controls button first of all we will be showing the submit button so we have to save this variant as contained then color as primary size will be large and finally we have the text it will be submit now back to the application let's look whether it is working or not so here we have the submit button now we can simplify some extra works for this button here throughout the application most of the buttons inside this application will be having the variant as contained so we can define the default value here with the help of this operator or operator then I will pass this here okay and we can remove that from here so if there is no value passed for this variant inside the props then it will be using this value here instead of single pipe operator you have to use double pipe here like this let's configure default values forests of the properties here by default size will be large then color will be primary now we can remove these properties since we are using the same default value here let me save this back to the application yes it works fine if there are properties other than these properties here we can access that with this other property here actually here we are you in destructive syntax from javascript these properties will have the value if the corresponding property is there inside these props rest of the properties will be there inside this object other to apply those properties inside this other object here we could do this we can just use this separator and pass other here now let me show you how you can pass the same from this form employee form here here we have a submit button but if you inspect this button the type of this button is button this property is from HTML button so we want to change this into submit for that I could do this type is equal to submit actually this type property is not the inside this component button here this property type can be accessed through this other property here and that will be separated here now let's check whether it is working or not now we have the type as submit in this way you could extend the properties or attributes path to this reusable components here you could do the same with these other properties for the reusable components that we have defined before finally let's add a reset button here so let me copy this and paste in here and the text will be reset I want to change this button color that can be passed with this property color here so color default okay so here we have the buttons for submit and reset operation now let's add some padding in between them you can do that inside this reusable component itself most of the time we need that margin so I will define this style here use styles you can call this function make styles inside that we have this callback function from that we just need to return this object for styling these components I'll be using classes attribute instead of class name I have discussed that in previous tutorial okay because with the custom style I just want to add imagine for the root element here I also want to remove this upper casing of the button text so it will be better to use the crosses attribute so I will do that here first of all we will have this style root for the margin margin is equal to C dot spacing of the range 0.5 so it's like 0.5 into 8 so for pixel and just beneath this we have the style for label so a label is equal to we just need to remove that upper casing so you could do this text transform is he none let's call the function here pluses is equal to use styles now let's apply the same here classes is equal to we need an object now we want to target rules applied to this mui button you could see that inside this documentation here just go through the API documentation here under CSS section you could see the rules applied to the element so this root style will be applied to the outer element and we want to apply this text transformation for the label so we want to focus this rule here label so root is equal to classes dot fruit then label is equal to classes dot label okay let me save this back to the application boom that's it so that's all about this video guys in this video we have designed a material UI form with all of the commonly used controls by applying some best practices and reusable components I was expecting I could cover the reform vibration inside the same video but if I do that this video will be much longer so I will be covering that in next video so in next video we will be covering validation form as a whole and also we will be doing things controlled real-time validation also and we'll be submitting this form to save these records into local storage if you found this video helpful please thumbs up this video and for more awesome videos like this please please subscribe to this channel core defraction please share this video with your friends and colleagues so that they can benefit from this have a nice day bye

Channel: CodAffection

Views: 84,367

Rating: 4.8734179 out of 5

Keywords: material-ui form, best practises for material ui form design, drop down list in material ui form, how to create material-ui form, Material Form with React-Hook, How to design beautiful material ui form, React Form with re-usable components, CodAffection, material ui form with datepicker

Id: -XKaSCU0ZLM

Length: 60min 33sec (3633 seconds)

Published: Mon Jul 13 2020