Forms
Form inputs can be used without having to add any additional classes. With the exception of checkboxes and radios, they will always default to 100% width of their parent.
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>
</div>
Select
<select>
<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>
</select>
Checkbox
<input type="checkbox" value="1" checked="checked" name="hello" id="hello">