Text fields

There are two types of fields you can use. The text fields and the options you can use are listed below. NOTE* that additional elements like the <label> and <div class="helper-text"> should always be below the input or textarea.

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 menu. If you are looking for <input type="range"> take a look at sliders. Note* These elements are under construction.

Input

Helper text
mail

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

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

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

<div class="input icon">
  <input type="email" name="email" id="email" required>
  <label for="email">Email</label>
  <i class="material-icons">mail</i>
</div>
		
	

Text area

The text area works the same as the floating text fields

Helper text
        
<div class="textarea">
  <textarea id="textarea" required></textarea>
  <label for="textarea">Text area</label>
  <div class="helper-text">Helper text</div>
</div>
        
    

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