Input

Overview

Input fields are to be used inside a form and can handle a range of different input types including; text, date, email, number, password, search, tel, time and url. They can be in either a default, focus, disabled or error state. They can also have either a stationary or animated label.

Examples

Static variation

Example
External Link
Text field is required
Text field is required
Number field is required
Number field is required
Email field is required
Email field is required 
<div class="input my-1">
  <label for="formInput-1" class="input__label">Text input</label>
  <input type="text" id="formInput-1" class="input__field">
  <div class="form__error-message">
    Text field is required
  </div>
</div>
<div class="input my-1">
  <label for="formInput-2" class="input__label is-invalid">Text input w. vaildation</label>
  <input type="text" id="formInput-2" class="input__field is-invalid" required>
  <div class="form__error-message is-visible">
    Text field is required
  </div>
</div>
<div class="input my-1">
  <label for="formInput" class="input__label">Number input</label>
  <input type="number" id="formInput" class="input__field">
  <div class="form__error-message">
    Number field is required
  </div>
</div>
<div class="input my-1">
  <label for="formInput-3" class="input__label is-invalid">Number input w. vaildation</label>
  <input type="number" id="formInput-3" class="input__field is-invalid" required>
  <div class="form__error-message is-visible">
    Number field is required
  </div>
</div>
<div class="input my-1">
  <label for="formInput-4" class="input__label">Email input</label>
  <input type="email" id="formInput-4" class="input__field">
  <div class="form__error-message">
    Email field is required
  </div>
</div>
<div class="input my-1">
  <label for="formInput-5" class="input__label is-invalid">Email input w. vaildation</label>
  <input type="email" id="formInput-5" class="input__field is-invalid" required>
  <div class="form__error-message is-visible">
    Email field is required
  </div>
</div>
<div class="input my-1">
  <label for="formInput-6" class="input__label">Disabled input</label>
  <input type="text" id="formInput-6" class="input__field" disabled>
</div>

Usage guidelines

Dos Donts
do iconDo give the field extra content with a helpful label, i.e. 'Email address'
do-not iconDon't use the form field if the user needs to input data from a range of options. Instead, use the Dropdown Select form field.

Implementation guidelines

Name Attribute Description
Type text date email number password tel time url Change the type of Input.
Required required Requires a value to be selected - cannot be left blank. Apply to the input element.