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
Default variation
Text field is required
Text field is required
Number field is required
Number field is required
Email field is required
Email field is required
Email field is required
Phone field is required
Phone field is required and pattern does not match
Pattern does not match
<div class="input my-1">
<label for="formInput-01" class="input__label">Text input</label>
<input type="text" id="formInput-01" class="input__field">
<div class="form__error-message">
Text field is required
</div>
</div>
<div class="input my-1">
<label for="formInput-02" class="input__label is-invalid">Text input w. required</label>
<input type="text" id="formInput-02" 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-03" class="input__label">Number input</label>
<input type="number" id="formInput-03" class="input__field">
<div class="form__error-message">
Number field is required
</div>
</div>
<div class="input my-1">
<label for="formInput-04" class="input__label is-invalid">Number input w. required</label>
<input type="number" id="formInput-04" 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-05" class="input__label">Email input</label>
<input type="email" id="formInput-05" class="input__field">
<div class="form__error-message">
Email field is required
</div>
</div>
<div class="input my-1">
<label for="formInput-06" class="input__label is-invalid">Email input w. required</label>
<input type="email" id="formInput-06" 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-07" class="input__label">Phone input</label>
<input type="tel" id="formInput-07" class="input__field">
<div class="form__error-message">
Email field is required
</div>
</div>
<div class="input my-1">
<label for="formInput-08" class="input__label is-invalid">Phone input w. required</label>
<input type="tel" id="formInput-08" class="input__field is-invalid" required>
<div class="form__error-message is-visible">
Phone field is required
</div>
</div>
<div class="input my-1">
<label for="formInput-09" class="input__label is-invalid">Phone input w. required and pattern</label>
<input type="tel" id="formInput-09" class="input__field is-invalid" pattern="61[0-9]{8}" required>
<div class="form__error-message is-visible">
Phone field is required and pattern does not match
</div>
</div>
<div class="input my-1">
<label for="formInput-10" class="input__label is-invalid">Phone input w. pattern</label>
<input type="tel" id="formInput-10" class="input__field is-invalid" pattern="61[0-9]{8}">
<div class="form__error-message is-visible">
<span>Pattern does not match</span>
</div>
</div>
<div class="input my-1">
<label for="formInput-11" class="input__label">Disabled input</label>
<input type="text" id="formInput-11" class="input__field" disabled>
</div>Usage guidelines
| Dos | Don'ts |
|---|---|
 Do give the field extra content with a helpful label, i.e. 'Email address'
|
 Don'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.
|
| Pattern |
pattern
|
Requires the input to match the pattern. No checking is performed if the field is empty. Apply to the input element, with type of tel. An example value would be [0-9]{8} which would mean you are looking to a sequence of 8 digits (such as 12341234) with no other characters. More information about patterns is available at MDN.
|