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.
In fact, the text fields component in MDL is similar to the button component; it is an enhancement of a standard html element to bring it inline with the overall Material Design aesthetic and specification. Once again, before we begin, you will need to include the MDL libraries—the stylesheets and the JavaScript—in your document’s head.
1 |
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"> |
2 |
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'> |
3 |
<link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css" /> |
4 |
<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 div with mdl-textfield and 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 mdl-js-textfield applies dynamic behavior through the JavaScript.
1 |
<form action=""> |
2 |
<div class="mdl-textfield mdl-js-textfield"> |
3 |
</div>
|
4 |
</form>
|
Within the 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.
1 |
<form action="#"> |
2 |
<div class="mdl-textfield mdl-js-textfield"> |
3 |
<input class="mdl-textfield__input" type="text" id="username"/> |
4 |
<label class="mdl-textfield__label" for="username">Username</label> |
5 |
</div>
|
6 |
</form>
|
That’s all there is to it; we have just built a basic text input field with MDL text field component!
Potential Issues
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 text, password, email, tel, url, and search. Applying the class to an input element of type color, date, or file might churn out a very odd result.
Additionally, the label text will appear equally strange if we also add placeholder text:
Floating Label
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 div container.
1 |
<form action="#"> |
2 |
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> |
3 |
<input class="mdl-textfield__input" type="text" id="username"/> |
4 |
<label class="mdl-textfield__label" for="username">Username</label> |
5 |
</div>
|
6 |
</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”.
1 |
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable"> |
2 |
<div class="mdl-textfield__expandable-holder"> |
3 |
<input class="mdl-textfield__input" type="search" id="site-search" /> |
4 |
<label class="mdl-textfield__label" for="site-search">Search</label> |
5 |
</div>
|
6 |
</div>
|
Then, we create a button outside outside the mdl-textfield__expandable-holder, using a label element pointing to the input.
Input Validation
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 email type, the entry must comply with an email format—it should contain @ 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: [A-Z,a-z]*.
Note: you can find common Regex patterns in HTML5Pattern, such as one for validating email, password, phones, postal codes, and dates.
1 |
<form action="#"> |
2 |
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> |
3 |
<input class="mdl-textfield__input" type="text" pattern="[A-Z,a-z]*" id="username" /> |
4 |
<label class="mdl-textfield__label" for="username">Username</label> |
5 |
</div>
|
6 |
</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.
1 |
<form action="#"> |
2 |
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> |
3 |
<input class="mdl-textfield__input" type="text" pattern="[A-Z,a-z]*" id="username" /> |
4 |
<label class="mdl-textfield__label" for="username">Username</label> |
5 |
<span class="mdl-textfield__error">Only alphabet and no spaces, please!</span> |
6 |
</div>
|
7 |
</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:
Wrapping Up
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!
