Input Styling and Form Validation Example

These design standards are in place to ensure the inputs used in forms within your app are consistent with brand guidelines and accessibility standards

These inputs are demonstrated below in a form example with validation.

Placement

There are no hard rules for the placement of inputs; you will often use them to construct forms that need to be filled out and submitted.

The form will provide feedback for validation failure and required fields, but does not force a particular layout.
Bootstrap or similar flexible grid layout systems can be used to make responsive forms.

Behavior

The behavior of each input and its changes between states can be seen in the examples below.

The validation button when clicked will provide feedback on the state of the form, including providing error messages.

Input Instructions

All inputs will need the appropriate class assigned from the list below.

Radio Buttons: ila-radio
Checkboxes: ila-checkbox
Standard Inputs (text, tel, pass, etc): ila-input
Calendar: ila-calendar
Search: ila-search
Dropdown: ila-select
Text Area: ila-textarea

Form Validation Feedback

CSS is provided for the error states/feedback look and feel. You'll need the appropriate JavaScript or server side logic to apply the classes for your form/input validation.
You can press the button at the bottom to see an example.

Relevant CSS Class:
ila-form-errors-off:
ila-form-errors-on:
ila-validation-feedback-on:
ila-validation-feedback-off:
ila-error-message-on:
ila-error-message-off:

At the top of your form provide a box to show a list of form errors
<div class="ila-form-errors-off" id="div1">
 <span>Please correct the following errors before submitting:</span>
 <ul>
  <li>Populate your feedback for validation in this unordered list</li>
 </ul>
</div>

Any element you wish to validate wrap in this manner
<div class="ila-validation-feedback-off" id="div2">
 <span class="ila-error-message-off" id="msg1">⚠ This field is (required/out of range/missing/etc).</span>
 <!--Your form control here -->
</div>

Examples

Feedback area for the top of the form(press button at bottom to see this)

Radio Buttons:

Checkboxes:

Inputs:

Calendar Select:

Search Select:

Select Dropdown:

Text Area:

Standard File Upload

Disabled File Upload

Toggle Button

-->