Inputs
Search the component library

Inputs

v2.0.0
Download UI Kit v2.1.0

This component defines the standard visual style for form elements.

Download UI Kit v2.1.0

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.

Basic single line text inputs.

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.

Focused Error is the focused version of the error state.

Error with info text is used when additional details about the error are necessary. Note that space for one line of explanation is built into the input so no shifting is necessary.

Single Line Text

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

Text inputs in the fancy style.

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

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

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.

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 and Optional labels.

Example using (optional) label in a form.

Information/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.

Info 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, information and error text may appear simultaneously, with error text following the informational.

Error text.

Simultaneous display of info 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.

Show/Hide password feature in the fancy input style.

And in the basic input style.

Redlines

Single Line Text

Basic Style

Dimensions36px tall
3px border radius
Spacing14px horizontal padding
6px vertical space between field and label
Active1px solid Concrete (#c7c7c7) border
White (#ffffff) background
Basic UI Text (Charcoal) for the value
Small UI Text in Medium Gray for the label
Place holders are Basic UI Text, Concrete (#c7c7c7)
FocusLabel is Digital Pearson Blue
Border is 1px solid Digital Pearson Blue
Digital Pearson Blue shadow with 5px blur
DisabledValue is Concrete (#c7c7c7)
Fill color is Moonlight (#e9e9e9)
ErrorLabel is Strawberry Red (#db0020)
Border is 1px solid Strawberry Red (#db0020)
Error text is Small UI Text in Strawberry Red (#db0020)
Error text is 3px below the field
Focused ErrorStrawberry Red (#db0020) shadow with 4px blur
ReadonlyNo 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 (#c7c7c7)
Value is Charcoal
Placeholder text is Concrete (#c7c7c7)
Underline is 1px solid Concrete (#c7c7c7)
FocusLabel is Digital Pearson Blue
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
ReadonlyNo underline or other decoration
Value is 8px below the label
DisabledValue is Concrete (#c7c7c7)
Underline is 4px solid Concrete (#c7c7c7)
ErrorLabel and error text are Strawberry Red (#db0020)
Error text is 3px below the underline
Underline is 1px solid Strawberry Red (#db0020)
Focused ErrorUnderline is 4px solid Strawberry Red (#db0020)
Underline is 7px below value

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

Fancy Style

SpacingLabel is 8px above value
Value is generally 10px above the underline
IconsDropdown icon is the dropdown-open-18 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 (#c7c7c7) in most cases
Selected radios have an inner circle filled with Medium Gray in most cases
Focused radios use Digital Pearson Blue (#047A9C) borders
Disabled radios use a Moonlight (#e9e9e9) fill color
Disabled but selected radios have an inner circle filled with Concrete (#c7c7c7)

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 (#c7c7c7) in most cases
Selected checkboxes have a Medium Gray check mark in most cases
Focused checkboxes use Digital Pearson Blue (#047A9C) borders
Disabled checkboxes use a Moonlight (#e9e9e9) fill color
Disabled but selected checkboxes have a Concrete (#c7c7c7) 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

Changelog

2.0.0

Change design to align with new brand

1.0.0

Initial version