Components

Forms

Documentation, examples, and uses for collapsing elements on WOL

General Rules

  • Form elements should maintain the right-angled corners of the general Wiley Online Library aesthetic
  • Try to keep form labels above the inputs where possible
  • Valdation messaging should appear below the input where possible

Form controls

Form controls should retain the browsers default functionality and appearence should be tweaked as little as possible to fit in with the overall look and feel of Wiley Online Library.

Input sizing

Sometimes a form can be secondary to a page's intended user experience, space can be limited, or you may want to draw the user's eye to an important feature like an email sign-up or registration form. To do this, you can have small, default or large inputs.

Readonly inputs

Add the readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

Validation

Feel free to use the browser default validation messaging. If required, below is an example of various custom validation states. Note that the validation messaging will reflow the content.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.