Inputs Questions or Comments?

Inputs

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

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.

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.

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

Dimensions
  • 36px tall
  • 3px border radius
Spacing
  • 14px horizontal padding
  • 6px vertical space between field and label
Active
Focus
Disabled
Error
Focused Error
Readonly

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
Readonly
  • No underline or other decoration
  • Value is 8px below the label
Disabled
Error
Focused Error

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

Fancy Style

Spacing
  • Label is 8px above value
  • Value is generally 10px above the underline
Icons
  • Dropdown icon is the dropdown-open-18 icon
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
  • Unselected radios use the radio-button-off-18 icon
  • Selected radios use the radio-button-on-18 icon
States

Checkboxes

Spacing
  • Option value 10px right of the checkbox icon
  • Multiple options are separated by 14px of vertical space
Typography
Icons
  • Unselected checkboxes use the checkbox-off-18 icon
  • Selected checkboxes use the checkbox-on-18 icon
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

Changelog

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