Basic Input

<input type="email" placeholder="Email address">

There are also modifier classes for inputs that sit on a darker background:

<input type="email" class="input--light" placeholder="Email address">

As well as classes to indicate status:

<input type="email" class="valid" placeholder="Email address">
<input type="password" class="error" placeholder="Password">

Inline Validation Alerts

These inline alerts can be used to display form validation notices to users. Note that these require the input to be wrapped in a form__field container. The alert can be animated in by toggling the has-validation-alert class on the form__field wrapper.

Sorry, we were unable to subscribe you
<div class="form__field has-validation-alert">
  <input type="email" placeholder="Email address">
  <span class="input-validation-alert input-validation-alert--error">Sorry, we were unable to subscribe you</span>


  <option selected disabled>Select a cluster</option>
  <option>mt1 (us-east-1)</option>
  <option>eu (eu-west-1)</option>
  <option>ap1 (ap-southeast-1)</option>


<input type="checkbox" value="1" checked="checked" name="hello" id="hello">