Inputs
Search the component library

Inputs

v2.2.2

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

  • Single collection of all basic form styles
  • Text, Textarea, Select, Radio, Checkbox, Field Labels (required vs. optional)
  • Guaranteed compliance with Accessibility requirements

Input Types

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.

Input States

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.

Single Line Text

Text inputs may contain placeholder text as an aid to help guide users on the required format and content.

Basic Single Line Input
Fancy Single Line Input

Fancy single line text inputs.

Basic single line text inputs.

The fancy input style has an animation on focus.

Multiple Line Text

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

Multiple line input with a placeholder.

Multiple line input with a value. Note this input has the handle for vertical resizing.

Select

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.

Basic Select Input
Fancy Select Input

Closed and opened select in the fancy style.

Closed and opened select in the basic style.

Radio Buttons

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.”

Radio Button Input

Various radio button states.

Checkboxes

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.

Checkbox Input

Various checkbox states.

Labels

Labels are always required in order to satisfy accessibility requirements.

Required/Optional

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/Optional Label

Required and Optional labels.

Example using (optional) label in a form.

Informational/Error Text

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
Error Text

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.

Specialized Inputs

Password

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.

Password Input

Show/Hide password feature in the fancy input style.

And in the basic input style.

Phone number w/ country code

The Phone number with country code input is made up of two parts that operate together to provide a phone number value:

  • Dropdown for selecting country
  • Form field for inputting the phone number
Phone Number Input

Fancy input style.

And in the basic input style.

Fancy input style dropdown.

Redlines

Single Line Text

Basic Style

Dimensions
  • 36px tall
  • 3px border radius
Spacing
  • 14px horizontal padding
  • 6px vertical space between field and label
Active
Focus
Disabled
Error
Error (focused)
Informational Text
Read only

Fancy Style

Spacing
  • Label is 8px above value
  • Value is 10px above underline in most cases
  • Value is 7px above underline when focused or disabled
Typography
Active
Focus
  • Label is Concrete
  • Underline is 4px solid Digital Pearson Blue

  • The underline should animate out from the center of the input once the user clicks into the field
Read only
  • No underline or other decoration
  • Value is 8px below the label
Disabled
Error
  • Label is Concrete
  • Error text is Strawberry Red
  • Error text is 3px below input field and 4px to the right of the warning icon
  • Underline is 1px solid Strawberry Red
  • Icon: warning-sm-18
  • Icon is 1px below the input field
Error (focused)
Informational Text

Multiple Line Text

Spacing
  • Label is 6px above input
  • Value has 14px horizontal padding, 9px vertical padding
Typography
States
  • Follow the styles defined for the Basic Single Line input for each state

Select Inputs

Basic Style

Dimensions and Spacing
  • Select box is 36px tall
  • Label is 6px above input
  • 14px of horizontal padding
Typography
Behavior
  • Activating the select should use the default browser popup
States
  • Follow the styles defined for the Basic Single Line input for each state
Icons

Fancy Style

Spacing
  • Label is 8px above value
  • Value is generally 10px above the underline
Icons
Typography
Behavior
  • Activating the select should use the default browser popup
States
  • Follow the styles defined for the Fancy Single Line input for each state

Radio Buttons

Spacing
  • Option value 10px right of the radio icon
  • Multiple options are separated by 14px of vertical space
Typography
Icons
States

Checkboxes

Spacing
  • Option value 10px right of the checkbox icon
  • Multiple options are separated by 14px of vertical space
Typography
Icons
States

Password Input

Spacing
  • Show/hide link is 10px above the underline in the fancy style
  • Link is 14px from the right edge in the basic style
Typography
Focus
  • Hovering or focusing the link changes it to Ink Blue and adds an underline
  • Any browser default focus indicator is also preserved

Phone number w/ country code

Spacing
  • 4px between dropdown and country code
  • 4px between country code and input
  • Flag is 8px below label and 10px above dropdown
Sizes
  • The max height for the Dropdown before scroll bars are available is 250px
  • Standard flag sizes are 20px wide by 10px tall
Dropdown
Behavior
  • Choosing a country in the dropdown updates the country code displayed next to the input

Changelog

2.2.2

  • REPLACED: The warning icon from font format to sketch file
  • SPECIFIED: Redline for error message and the warning icon

2.2.1

  • ENHANCED: The accessibility of the error message for color blind users by adding an icon in front of the error message under the input field

2.2.0

  • ADDED: Phone number input

2.1.0

  • CHANGED: Icon for select input
  • ADDED: Feature links

2.0.1

  • FIXED: Some images had disabled labels that don’t match the actual design

2.0.0

Change design to align with new brand

1.0.0

Initial version