Standard form elements
This is an example of guidance text to give supplementary information to the user about completion of the form.
Form field variants
Form field action states
Some value here
Form state Visual indicators
Something may have gone wrong

Please correct the error
This is a success message
 

Styleguide notes


Form elements


Usage

The form elements display an example of all possible permutations of the form styles, including: disabled, read only, invalid and uneditable.

Forms can be used with fixed dimensions or stretching to fill the full width of the containing div. All form elements must be displayed in a vertical structure and not floated in a horizontal manner to prevent issues at lower screen sizes. The only exception to this is checkboxes with simple labels.


Interaction

Forms can also be colour coded to give extra feedback to the user during validating. Please bear in mind those with colour blindness and do not implement instructions in colours that could be hidden from those users.


CSS and media queries

Form styles are borrowed from Twitter Bootstrap, however they have been customised heavily to remove a large amount of unwanted styles to reduce code bloat. The examples above should demonstrate every permutation available with the existing form styles.


Use of Javascript

N/a


Component variants

N/a