Inputs
Search the component library

Inputs

v2.2.1

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.

Fancy single line text inputs.

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.

Text inputs in the basic style.

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

Dimensions36px tall
3px border radius
Spacing14px horizontal padding
6px vertical space between field and label
Active1px solid Concrete border
White background
Basic UI Text (Charcoal) for the value
Small UI Text in Medium Gray for the label
Place holders are Basic UI Text, Concrete
FocusLabel is Medium Gray
Border is 1px solid Digital Pearson Blue
Digital Pearson Blue shadow with 5px blur
DisabledValue is Concrete
Fill color is Moonlight
ErrorLabel is Medium Gray
Border is 1px solid Strawberry Red
Error text is Small UI Text in Strawberry Red
Error text is 3px below the field
Error (focused)Strawberry Red shadow with 4px blur
Informational TextSmall UI Text in Charcoal
3px below the field
Read onlyNo input box
Basic UI Text in Charcoal
8px below label

Fancy Style

SpacingLabel is 8px above value
Value is 10px above underline in most cases
Value is 7px above underline when focused or disabled
TypographyLabel is Small UI Text
Value and placeholder text is Basic UI Text
Error text is Small UI Text
ActiveLabel is Concrete
Value is Charcoal
Placeholder text is Concrete
Underline is 1px solid Concrete
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 onlyNo underline or other decoration
Value is 8px below the label
DisabledValue is Concrete
Underline is 4px solid Concrete
ErrorLabel is Concrete
Error text is Strawberry Red
Error text is 3px below the underline
Underline is 1px solid Strawberry Red
Error (focused)Underline is 4px solid Strawberry Red
Underline is 7px below value
Informational TextSmall UI Text in Charcoal
3px below field

Multiple Line Text

SpacingLabel is 6px above input
Value has 14px horizontal padding, 9px vertical padding
TypographyLabel is Small UI Text
Value and placeholder text is Basic UI Text
StatesFollow the styles defined for the Basic Single Line input for each state

Select Inputs

Basic Style

Dimensions and SpacingSelect box is 36px tall
Label is 6px above input
14px of horizontal padding
TypographyLabel is Small UI Text
Value is Basic UI Text
BehaviorActivating the select should use the default browser popup
StatesFollow the styles defined for the Basic Single Line input for each state
IconsUse the dropdown-open-sm-24 icon

Fancy Style

SpacingLabel is 8px above value
Value is generally 10px above the underline
IconsDropdown icon is the dropdown-open-sm-24 icon
TypographyLabel is Small UI Text
Value and placeholder text is Basic UI Text
BehaviorActivating the select should use the default browser popup
StatesFollow the styles defined for the Fancy Single Line input for each state

Radio Buttons

SpacingOption value 10px right of the radio icon
Multiple options are separated by 14px of vertical space
TypographyOption value is Basic UI Text
IconsUnselected radios use the radio-button-off-18 icon
Selected radios use the radio-button-on-18 icon
StatesRadio border is Concrete in most cases
Selected radios have an inner circle filled with Medium Gray in most cases
Focused radios use Digital Pearson Blue borders
Disabled radios use a Moonlight fill color
Disabled but selected radios have an inner circle filled with Concrete

Checkboxes

SpacingOption value 10px right of the checkbox icon
Multiple options are separated by 14px of vertical space
TypographyOption value is Basic UI Text
IconsUnselected checkboxes use the checkbox-off-18 icon
Selected checkboxes use the checkbox-on-18 icon
StatesBox border is Concrete in most cases
Selected checkboxes have a Medium Gray check mark in most cases
Focused checkboxes use Digital Pearson Blue borders
Disabled checkboxes use a Moonlight fill color
Disabled but selected checkboxes have a Concrete check mark

Password Input

SpacingShow/hide link is 10px above the underline in the fancy style
Link is 14px from the right edge in the basic style
TypographyLink is Basic UI Text in Digital Pearson Blue
FocusHovering 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

Spacing4px between dropdown and country code
4px between country code and input
Flag is 8px below label and 10px above dropdown
SizesThe max height for the Dropdown before scroll bars are available is 250px
Standard flag sizes are 20px wide by 10px tall
DropdownUses standard dropdown component
BehaviorChoosing a country in the dropdown updates the country code displayed next to the input

Changelog

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