Text fields

There are numerous text fields you can use. The text fields and the options you can use are listed below. NOTE* that the label should always be below the input.

If you are looking for a date or time picker take a look at pickers. if you need to use <select> take a look at . If you are looking for <input type="range"> take a look at sliders. Note* These elements are under construction.

Floating input

The floating input is most commonly used for forms.

The star is automatically added by required fields but can easily be turned off.

		
<div class="floating-input">
  <input type="url" id="example">
  <label for="example">Url</label>
</div>

<div class="floating-input">
  <input type="text" id="disabled" disabled>
  <label for="disabled">Disabled</label>
</div>
		
	

Floating dense input

Compared to the "floating input" the floating dense input is a bit smaller.

		
<div class="floating-dense-input">
  <input type="url" id="example7">
  <label for="example">Url</label>
</div>

<div class="floating-dense-input">
  <input type="text" id="disabled" disabled>
  <label for="disabled">Disabled</label>
</div>
		
	

Single line-textfield

The single line text fields can also have an icon. These are more commonly used when used in a tight area.

email
cloud
		
<div class="single-input icon">
  <input type="text" id="example17">
  <label for="example17">Icons</label>
  <i class="material-icons">cloud</i>
</div>

<div class="single-input">
  <input type="text" id="disabled" disabled>
  <label for="disabled">Disabled</label>
</div>
		
	

Single dense line text field

The single dense line-text fields can also have an icon but are smaller than "single line-textfields". These are more commonly used when used in a tight area.

email
cloud
		
<div class="single-dense-input">
  <input type="text" id="example">
  <label for="example">Example</label>
</div>

<div class="single-dense-input">
  <input type="text" id="disabled" disabled>
  <label for="disabled">Disabled</label>
</div>
		
	

Multi-line text field

The textarea works the same as the floating text fields

Settings

Variable Options Result
$textfield-off-color Variable / color Changes the color of label, border bottom and icon when text field isn't active
$textfield-on-color Variable / color Changes the color of label, border bottom and icon when text field is active
$textfield-disabled-color Variable / color Changes the color of label, border bottom and icon when text field disabled
$textfield-required-color Variable / color Changes the color of the required star
$textfield-error-color Variable / color Changes the color of invalid fields

Resources