Textfield Stable

Textfields are form inputs that let the user enter terms of text.

Textfield

<div class="textfield  js-textfield textfield-with-prefix">
  <input id="sampleInput2" type="text"  class="textfield__input"  >
  <label class="textfield__label" for="sampleInput2">Email</label>
</div>

Textfield valid state

<div class="textfield is-valid js-textfield textfield-with-prefix">
  <input id="sampleInput4" type="text"  class="textfield__input"   value="max.mustermann@mail.com">
  <label class="textfield__label" for="sampleInput4">Email</label>
  <small class="textfield__hint">We&#x27;ll never share your email</small>
</div>

Textfield invalid state

<div class="textfield is-invalid js-textfield textfield-with-prefix">
  <input id="sampleInput5" type="text"  class="textfield__input"  placeholder="sample@mail.com"  value="Test test">
  <label class="textfield__label" for="sampleInput5">Email</label>
  <small class="textfield__hint">Please enter valid email</small>
</div>

Textfield disabled

<div class="textfield is-disabled js-textfield textfield-with-prefix">
  <input id="sampleInput1" type="text"  disabled=""  class="textfield__input"  >
  <label class="textfield__label" for="sampleInput1">Disabled</label>
</div>

Textarea

<div class="textarea js-textarea ">
  <textarea class="textarea__input" row="1" ></textarea>
  <label class="textarea__label" for="textarea2">Your message</label>
</div>

Textarea valid state

<div class="textarea js-textarea is-valid">
  <textarea class="textarea__input" row="1" ></textarea>
  <label class="textarea__label" for="textarea3">Your message</label>
</div>

Textarea invalid state

<div class="textarea js-textarea is-invalid">
  <textarea class="textarea__input" row="1" ></textarea>
  <label class="textarea__label" for="textarea4">Your message</label>
</div>

Textarea disabled

<div class="textarea js-textarea is-disabled">
  <textarea class="textarea__input" row="1" ></textarea>
  <label class="textarea__label" for="textarea1">Disabled</label>
</div>