---
layout: docs
title: Text fields
description: Text fields allow users to input text and select text.
group: material
toc: true
---
Text fields usually appear in forms.
Users may enter text, numbers, or mixed-format types of input.
## Basic text fields
**Most of the details about basic text fields are covered in Components/Forms documentation. Please refer to [this page]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/forms/) for more examples.**
## Floating label text fields
When the user engages with the text input field, the floating inline labels move to float above the field.
**N.B.** Implementation of floating label text fields requires `material.js` or `material.min.js`. Floating label also requires the pairing `label` and `.form-control` placed in the same `.floating-label` as its first two children.
{% capture example %}
{% endcapture %}
{% include example.html content=example %}
### Sizes
Change sizes using `.floating-label-lg` and `.floating-label-sm`.
{% capture example %}
{% endcapture %}
{% include example.html content=example %}
### Usage
Implementation of floating label text fields requires `material.js` or `material.min.js`.
It is recommended to run the following JavaScript code after the document is ready or a floating label text field is added dynamically to a page, so the floating label will get the correct initial state based on whether a particular floating label text field has value or not.
{% highlight js %}
$('.floating-label .custom-select, .floating-label .form-control').floatinglabel();
{% endhighlight %}
{% capture example %}
{% endcapture %}
{% include example.html content=example %}
## Text field boxes
Text field boxes increase text field identifiability and scannability by using a transparent rectangular fill to enclose the label and input text.
{% capture example %}
{% endcapture %}
{% include example.html content=example %}
### Sizes
Change sizes using `.textfield-box-lg` and `.textfield-box-sm`.
{% capture example %}
{% endcapture %}
{% include example.html content=example %}
### With floating labels
Text field boxes can be combined with floating labels.
{% capture example %}
{% endcapture %}
{% include example.html content=example %}
Sizes can also be set by adding `.floating-label-lg/sm` classes.
{% capture example %}
{% endcapture %}
{% include example.html content=example %}
## With icons
Icons describe the type of input a text field requires. They are displayed to the left of the text field.
{% capture example %}
{% endcapture %}
{% include example.html content=example %}
`.input-group-icon` can also work with floating label text fields and text field boxes:
{% capture example %}
{% endcapture %}
{% include example.html content=example %}