All language subtitles for 2. TextField Overview

The text field component is pretty integral to the next two pages that we're going to be building both

the contact page as well as the Free Estimate page.

That means we need to definitely be comfortable with it and make sure that we're aware of all of the

functionality that it has to offer us let's start then by going over to the material UI documentation

and we'll walk through all the options.

I'm here on the material UI documentation page under components inputs and text fields text field is

a very straightforward piece of functionality because all you're doing is allowing your user to enter

some text into your application.

You can see here they have three different main variants.

The standard variant.

He filled a variant in the outlined variant and if we scroll down here below it gives us an example

of some of the props that we can use with the text field component notice up here.

This first one this is marked as required and that is thanks to a required prop here.

It is disabled thanks to a disabled prop.

This is a password field so the text is being hidden like a password.

This box I cannot click in so it's only it's read only I cannot edit the text and this is a number so

I can increment or decrement that but I cannot enter any actual text it's important to note some of

the terminology here because we have the default value which is a value that is giving us an example

of the values that can be put into this text field while this name here house is password and when I

click on it that goes up to the top.

That is our label.

So if we open it up and we show the source for this we can see we're really just using the text field

component and we're setting a label here and that sets that name.

That text here is going up to the top or in this case as required if we get rid of this.

You can see that required does jumped down.

So I think that that is the label there.

Yeah.

Label of required and then the label of disabled so you can see how if we had no text in here this would

be sitting in there.

So this is the label and then the value is the actual text put inside and we can say a default value

and then this text underneath this is our helper text.

So if we scroll down you'll see on some of these we'll find one.

So here help or text some important text on the text field with a default value of default value.

The label of help or text so you can scroll up you'll see and that would be this option right here.

The default value of default value but the label of help or text is the label and the actual help or

text of some important text.

So this right here is the actual help or text set using the helper text prop right.

They're all on just our text field we also always want to provide an I.D. to our text field and to make

sure that it is unique because that will be passed along to some of the underlying input components

and make sure that it is properly set up for some of the accessibility features we can continue down

now.

And here you see an example of how they have validation built into the text field component.

This is thanks to the error prob and you can see if we show the source here that if you set the error

prop of true onto a text field then you automatically get this red styling both for your help or text

the line and the label.

And while they do provide the error prop to us to determine whether or not that is true or false the

actual error handling and setting True or false for that value will be left to us.

So we'll be going over different ways to do that.

They are actually very simple if we can continue it will hide the source and underneath here we have

the multi line input and this is important because remember on our Contact Us page we have that message

input and that is a multi line input.

So this is how we do that and it is simply with a mealtime line.

Prop if we come and open up the source here you'll see the we have a couple different options and so

this first one has a multi line prop of true actually all of these will have the multiplying prop of

true but this also has a rose max of 4 OK.

So this is the first option here.

So this has a maximum number of rows of four.

So if I just start typing random in here you see now are on the second row.

We have a third row of text and we have a fourth row.

But now if I continue you see the scroll bar and we're never gonna have more than four lines of text.

Now all right.

Megan scroll down.

Let's take a look at the second one.

It has multiple line has just a place holder.

But it does not have a maximum number of rows.

So let's see this one.

I think it should just keep growing no matter how much text we put on in here.

Yeah.

You can see that it's just going to keep adding more and more rows as many as we like.

If we do not set the rows Max prop so it will just go infinitely that last example then is when we set

a fixed number of rows.

So here we set a rows a value of four.

And so this guarantees that we always have the large size whereas this we can go and get rid of all

this and it will go down to one up to four.

But this one will always stay at four no matter how much text we have inside of it.

So it'll stay at four but then see we have the scroll bar.

So it continues sitting at four and does not grow let's continue now and I'll come down to hide the

source and you can see here an example of how they can use the select prop to turn the text field into

a dropdown.

This is actually a selection window.

So here you can select different currencies.

And this is actually all done just by setting your text field component with the select prop of true.

You can see this is definitely a versatile component just like the menu and list components that we've

seen before we can go ahead and close out of that source and we'll continue.

And here they give us an example of how you can use icons here on your text fields.

And if we actually keep scrolling this input adornments they say this is the easiest way to add a icon

or a prefix or a suffix to your input and they actually give it an example of how you can use this icon

to create an action.

So this adds a little secondary action where we can hide or view the password all within the text field

material UI component we can open up the source here to take a look at how they do this.

And let's scroll on down and they actually use a different set of components.

So you'll see in here they have this is a good example.

They have the text field component.

OK.

But then they have the input props.

So these are props passed down to the underlying input component within the text field component text

field component is kind of a wrapper on top of a few other components.

That gives us a little more functionality.

And to that input component they're passing the problem start adornment.

And this prop is a component which they are importing the input adornment and components.

So this is a specific component for this purpose passed to the start adornment or end adornment props

on the input component.

So now this is a little convoluted but you just try and think through it see input props and we're passing

down an input adornment in here.

They just have the kilogram but we can see if we scroll down this time we see an end adornment prop

feeding the input adornment component with a position of end.

Previously we had the position of end as well for end adornments but then on our star adornment we had

the position of start.

So that determines where are adornment is appearing.

And here you can see how they set up that visibility icon by checking a value to see whether or not

the password should be shown.

And if that's true then render one version of the icon otherwise render the off version of that icon

so all you really need to keep in mind here we'll go back up to the example that gives it to us on the

text field right here.

So if you have a text field component then you need to just pass the input prop to your text field and

to the input props prop you'll pass an object with these start adornment prop set to the input a dormant

component with whatever adornment you need.

And that is how you are able to create all of these different text fields.

So this has the input adornment at the end.

So a position of end with the end adornment prop whereas these are using the start adornment prop also

with the input adornment component.

But let's scroll down.

I think that that one you've got that and if you need to use icons you can always just come back up

here and and check the source for this and make sure that you have that correct.

But we won't be really needing that.

So we'll come on down and here it gives an example of how you can change some of the layout options

for the text field and the most important in my opinion that we will actually be using is the full width

prop so you can open this up and it is just the prop of full width set to true and that'll just make

sure that your text field is spanning 100 percent of the space available to it.

You can also set the margin prop to either none dense or normal for these different effects here giving

you a bit of different spacing between the elements in your input Becky Bond scrolling down though and

here is saying the component can be controlled or uncontrolled and that simply means whether or not

your value for the text field is coming from a state value or whether the component itself is managing

the value.

So here these text fields are going to be controlled.

So if I go ahead and I start changing one of these values you see that it is controlled by a state value.

And since all of these inputs are controlled by the same state value they all change their values in

real time together however if we were to come to one of these uncontrolled form fields we can type in

anything we want here and none of the other fields are affected.

And that is because they are not controlled by any value except the value from their own component.

There are different times when you might need to use the uncontrolled versus controlled but for our

purposes we'll just be using the controlled version because we need the value to be coming from the

state so that we can then grab that state value which contains the input value and use that later to

send it off in the message.

So we'll need to use the controlled version but we can scroll down and here it tells you that the text

field component is made of all these other components that you can go in and customize however much

you need to get the exact look that you're going for.

And we actually will be going in and doing a bit of customization for our inputs so we'll get a good

idea of how to use this.

And under here it continues to show you the underlying input component.

And then here it shows us the color prop that we can use to change the highlight color.

So there's that highlight color when it's focused but we will be customizing all the colors for our

inputs.

So again I think that will cover all of that.

And here it just gives us even more examples even in an example of a Google Maps looking input all built

with the material UI components that really is everything that we need to know for our text field because

although this is a very diverse component that is obviously very powerful our implementation of it in

this application is relatively simple.

So it shouldn't be too difficult.

I think that the bulk of the work will actually come from styling and customizing the inputs as well

as setting up the validation that will take just a little bit of work.

So let's head over to the next video where we'll get started setting up the contact us page and then

we'll get into wiring all of this up.

So I will see you over there.