Text fields

Showcasing MICL text fields

search
search cancel
search cancel
search cancel
error Include an uppercase letter, a lowercase letter, and a numeric character
search Supporting text
€ credit_card
search cancel This input field is disabled
search cancel
kg error Too heavy
search NOK In Norwegian kroner
Enter at least twelve characters € cancel search
search cancel This input field is disabled
search error
search error 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>