Next up in our series learning the ins and outs of Material Design Lite (MDL) we’re going to look into the Text Fields component. A text field could be used on anything from a search form, a comment form or a contact form, and often we see it in conjunction with the button element.
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"> <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css" /> <script src="//storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script>
Let’s begin with some basics.
Basic Text Field
To implement the text field component, we start off with an empty
mdl-js-textfield classes, wrapped within a
form element. If you have been following our previous posts in this series, you should already be familiar with the class naming pattern in MDL. In this case, the
mdl-textfield class applies the visual enhancements from the CSS, while the
<form action=""> <div class="mdl-textfield mdl-js-textfield"> </div> </form>
div, we add an
input element (or perhaps a
textarea) and a label (which is required) along with the relevent class needed to apply the styles.
<form action="#"> <div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" id="username"/> <label class="mdl-textfield__label" for="username">Username</label> </div> </form>
That’s all there is to it; we have just built a basic text input field with MDL text field component!
It’s worth noting that the
mdl-textfield__input class we added to the
input element will only work well when applied to a text-based input type such as
search. Applying the class to an
input element of type
file might churn out a very odd result.
Additionally, the label text will appear equally strange if we also add placeholder text:
We can improve the input element with Floating Label. As the user is focusing on the input field the label will float upwards, out of the way of the cursor. The floating label is an increasingly common pattern in form design, particularly in the mobile landscape where limited space is of concern.
MDL has made it really easy to apply this design pattern. Back to the previous HTML code, we need to add the
mdl-textfield--floating-label class to the
<form action="#"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" id="username"/> <label class="mdl-textfield__label" for="username">Username</label> </div> </form>
Bingo! Our text input field should now be more visually pleasing with the floating label:
Expandable Input Field
The Expandable Input Field is yet another common design pattern which we can implement in MDL. We first see the input as an icon. Upon being clicked, it will expand into an input field. We usually find this design pattern applied to search inputs.
To make our previous input expandable, we need to add the
mdl-textfield--expandable class to the
div container. We also wrap the
input element and the label with a new
div with the
mdl-textfield__expandable-holder class attached. Following this workflow, we also change the
input type, the text label, as well as the related attributes to specify “search”.
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable"> <div class="mdl-textfield__expandable-holder"> <input class="mdl-textfield__input" type="search" id="site-search" /> <label class="mdl-textfield__label" for="site-search">Search</label> </div> </div>
Then, we create a button outside outside the
mdl-textfield__expandable-holder, using a
label element pointing to the input.
Security and sanitizing data are crucial where forms are concerned. We do not want our users to submit entries with incorrect or even malicious content. We therefore need to evaluate the user entry in the input field to comply with the input type. If the
input is of
@ and end with a TLD (top level domain).
Fortunately, MDL helps us out-of-the-box. We don’t have to add extra markup, or classes. Set the input with a proper type, and it will turn the underline red if the entry formatting does not adhere to the input type.
But we can also set our own formatting standard, and also provide a visual element that displays an error message. For example:
To display an error notification, we first need to provide limits to what users can enter in the
input element through the HTML
pattern attribute. The pattern attribute takes a Regular Expression (Regex) that will evaluate and validate the user input.
In this case, I would like the username input to be alphabetic, without spaces. Thus, we will specify the
pattern attribute with the following Regex:
Note: you can find common Regex patterns in HTML5Pattern, such as one for validating email, password, phones, postal codes, and dates.
<form action="#"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" pattern="[A-Z,a-z]*" id="username" /> <label class="mdl-textfield__label" for="username">Username</label> </div> </form>
Next, we add the error message below the label using a
span element with the
mdl-textfield__error. You might also need to apply style rules to adjust its position and the content alignment.
<form action="#"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" pattern="[A-Z,a-z]*" id="username" /> <label class="mdl-textfield__label" for="username">Username</label> <span class="mdl-textfield__error">Only alphabet and no spaces, please!</span> </div> </form>
We are all set! Now, the input should throw an error message below the input, and highlight it with red, if the user inputs numbers, special characters, or spaces. Give it a go:
As we have just discovered, the MDL text fields component makes it easy for us to implement engaging input fields with helpful design patterns like the floating label and expandable input field. We also discovered that it’s easy to add error message in case of incorrect formatting.
The next tutorial should be an exciting installment of this series. We are going to look into a rising star among UI elements, the Card. Stay tuned!
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post