Text fields

Showcasing MICL text fields

Label text

Name

Label text

City

Multiline text field

Label text

Password Include an uppercase letter, a lowercase letter, and a numeric character

Text field Supporting text

€ Amount

City This input field is disabled

Text area

Label text

Weight kg Too heavy

Timestamp

NOK Amount* In Norwegian kroner

Enter at least twelve characters € Label text

City This input field is disabled

Multiline text field

Label text

City Incorrect spelling

Code example

<div class="micl-textfield-outlined">
  <label for="id0">Label text</label>
  <input type="text" id="id0">
</div>

<div class="micl-textfield-outlined">
  <label for="id1">Multiline text field</label>
  <textarea id="id1"></textarea>
</div>

<div class="micl-textfield-outlined">
  <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
  <label for="id2">City</label>
  <input type="text" id="id2" disabled value="Paris">
  <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
  <span class="micl-textfield__supporting-text">Disabled field</span>
</div>