This component defines the standard visual style for form elements.
Usage Guidelines
Every instance of a form element should come from this component. See the sections below for information about when to use each type of form.
Features
Inputs come in two styles, Fancy and Basic. Most situations should use the basic style, fancy inputs are reserved for high-touch pages where it’s important to emphasize the Pearson brand (such as Sign In or Account Creation).
Never mix the two styles on the same page.
Text inputs in the fancy style.
Text inputs in the basic style.
Normal is the normal state of the form element.
Focus is initiated when the user interacts with the field.
Disabled state is a form input that is unavailable for interaction.
Read only indicates that a field is active, but not editable.
Error is when the field’s content has some sort of error.
Error (focused) is the focused version of the error state. Note that in almost every case an error state should be accompanied by explanatory text. See the Informational/Error Text section section for more details.
Text inputs may contain placeholder text as an aid to help guide users on the required format and content.
Fancy single line text inputs.
Basic single line text inputs.
The fancy input style has an animation on focus.
These inputs only come in the basic style (fancy inputs should not be used in forms that need to collect this much information).
These inputs may optionally be resized vertically to allow for variable amounts of input.
Multiple line input with a placeholder.
Multiple line input with a value. Note this input has the handle for vertical resizing.
The select input allows a user to choose one of many predetermined options.
A default value can be set for the select element if it’s recommended for most users. Bear in mind that a user can easily overlook a preselected item, so use caution when doing so.
The popup will follow the browser default style.
Closed and opened select in the fancy style.
Closed and opened select in the basic style.
Radio buttons are for when the user must choose a single item out of several options.
Choose radios over selects when you want the user to carefully consider the options and need to expose all available options.
If there are only two mutually exclusive options, consider using a single checkbox. For example, use a checkbox for “I agree” instead of two radio buttons for “I agree” and “I don’t agree.”
Various radio button states.
Checkboxes are for times when the user needs to make one or more binary choices about a related item.
Unlike radio buttons, where a group of radio buttons represents a single choice, each check box in a group represents a separate, independent choice.
When there is more than one option but only one can be selected, use a radio button instead.
Various checkbox states.
Labels are always required in order to satisfy accessibility requirements.
Use the label to indicate whether a given field is required or optional.
Only label in the minority case (for example, if 6 fields are required and 2 are optional, only indicate the optional fields).
Required and Optional labels.
Example using (optional) label in a form.
Additional instructions or context for an input may appear below the field. Prefer this over placeholder text for any information that all users should be able to access.
Informational text for both fancy and basic styled inputs.
Any fields that have an error should explain the error with additional text below the field. In this case it is colored red and paired with an error state on the form.
If necessary, informational and error text may appear simultaneously, with error text appearing last.
Error text.
Simultaneous display of informational and error text.
The password input includes a show/hide option to turn off obfuscation. The value is hidden by default but may be revealed in lower security settings to make it easier for a user to type the intended password.
Note the show/hide control is slightly different than the standard link style with the underline appearing on hover/focus. This is to mesh with the fancy form style better.
Show/Hide password feature in the fancy input style.
And in the basic input style.
The Phone number with country code input is made up of two parts that operate together to provide a phone number value:
Fancy input style.
And in the basic input style.
Fancy input style dropdown.
Underline is 4px solid Digital Pearson Blue
Change design to align with new brand
Initial version
Inputs