Textfields

Text fields consist of a label and a line. When activated, the label moves upwards and reduces in size.

First Name

Search Field

Multi-line Text Field

0 / 500

Float logic uses :focus and :not(:placeholder-shown).

<div class="input-container">
  <input class="input-line" placeholder=" ">
  <label>Floating Label</label>
</div>