TextField provides a
label prop, the field will be updated with a label
that is displayed over the text field until the user focuses the field. Then the label
will float above the field to remind users of what they are filling out. If the
also has a
placeholder, it will now be visible. Once the user blurs the field, the label
will float back down if there is no content to indicate that it has not been filled. Otherwise
the label will remain above the input.
When you want the text fields to take up less space, you can omit the
label prop and only
placeholder. This will shrink the height of the text field by
34px - 37px
(based on media size).
NOTE: It has been proven that it is normally better to always display labels even if it takes up more room as it makes it easier for the user to understand the content they have entered or are entering.
Text fields can be updated to provide additional visual cues by providing inline icons to be displayed with the field. These icons can either be displayed to the left or right of the field. The user can touch the text field or the icon to focus the text field.
The icon can also be displayed on the inner-left of the text field just like the password field toggle button.
passwordIcon prop may alternatively be supplied two separate icons by setting the prop as an object.
It should have two keys,
visible, with an element for each key's value.
When password is visible, the visible icon will load, and likewise the invisible icon will load when password is not visible.
Text fields can be disabled as well. This will update the field to have different styles that tone down the field to help show no interactions can happen.
Text fields can be updated to display a counter when the
maxLength prop has been specified. The
counter will update when the user types to display the remaining characters available for the field.
maxLength has been exceeded, the field will gain the error state.
Sometimes it is helpful to add additional information about a field for the user, so you can apply some
helpText that will appear below the field. The text should automatically wrap to be the
same size as the field. It is also possible to hide the help text until the user focuses the field by
The text field can gain the error state either by:
requiredand the user blurs the text field without adding any content
maxLengthprop is provided and the user types more characters than the length
errorprop is enabled.
When the text field gains the
error state via props or internally, it will attempt to display the
errorText prop and it will apply the error status color to the floating label, text field underline,
and the error text if it exists.
The text field can display help/error text along with a counter.
Errors and Error Text
TextField can be updated to automatically resize its width to be the size of its text content. It will
be a tiny bit off for some browsers (2-3 pixels) because of how they calculate text width, but it should be fairly
When the user types, the text field should automatically expand to match the text and when the user removes text, the width will shrink.
Blocked text fields are called the full-width fields in the material design spec. They are mostly used on
mobile devices along with the
Divider component. The blocked text field removes the underline and only
allows placeholder text to be displayed.
This is just a simple example showcasing a simple form using text fields and selection controls to submit some new item to an application. This example shows off two new features of the text field:
- custom sizing
- limiting the max rows for a multiline text field.
Text fields can be updated to use custom font sizes by either updating the
or the provided mixins. Once the styles have been created, you can use the
customSize prop to apply that
size to the field. By default, there will be a "title" text field included. See the SassDoc tab
for more information.
Mutliline text fields automatically grow to display all the content by default. In some cases, it can be helpful to allow it to
grown to a certain point and then stop growing. This can be accomplished by providing a