Review Input

The review input pattern displays information that a user previously entered into one of various inputs. The information is not editable and provided for review only. The default elements are a label and a plain-text representation of the user submission. Use a caption outside of the container to communicate contextual information about the field or a link when it won't fit in the interface.

Usage

Label

What's this?

Submission

Caption for more context, e.g. "You cannot edit this information".

Standard

Used to display information captured through via Text Input, Select, Button Group or Radio Buttons.

<div class="p-review-input__container">
      <div class="p-review-input__label">Label</div>
      <a href="" class="p-review-input__icon-link"><i class="p-review-input__icon-link__icon icon icon--question"></i>What's this?</a>
      <p class="p-review-input">Submission</p>
    </div>
    <p class="c-text-content-caption--normal">
      Caption for more context.
    </p>

Copy

Label

What's this?

Submission

Show

Caption for more context, e.g. "You cannot edit this information".

Secure

Used to display sensitive information captured through the secure variant of the Text Input component. By default, bullets will display in place of the input characters. The 'Show/Hide' toggle allows the user to view their input.

<div class="p-review-input__container">
      <div class="p-review-input__label">Label</div>
      <a href="" class="p-review-input__icon-link"><i class="p-review-input__icon-link__icon icon icon--question"></i>What's this?</a>
      <div class="p-review-input--secure">
        <p class="p-review-input">Submission</p>
        <a class="p-review-input__secure-toggle">Show</a>
      </div>
    </div>
    <p class="c-text-content-caption--normal">
      Caption for more context.
    </p>

Copy

Label

What's this?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Euismod nisi porta lorem mollis. Neque volutpat ac tincidunt vitae semper.

Caption for more context, e.g. "You cannot edit this information".

Multiline

Used to display information captured via Text Areas or Checkboxes. Checked options will display as a bulleted list items in this pattern.

<div class="p-review-input__container">
      <div class="p-review-input__label">Label</div>
      <a href="" class="p-review-input__icon-link"><i class="p-review-input__icon-link__icon icon icon--question"></i>What's this?</a>
      <p class="p-review-input p-review-input--multi-line">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Euismod nisi porta lorem mollis. Neque volutpat ac tincidunt vitae semper.</p>
    </div>
    <p class="c-text-content-caption--normal">
      Caption for more context.
    </p>

Copy

Design Environment

Avoid combining active and review fields on a single form, unless the review fields can be made active by toggling other options in the form. Review fields may appear with active buttons or button groups that allow the user to move forward in their task or go back to make changes. In addition to within the review container, links may also be included on the page for navigational purposes (e.g. Back to top).

Microcopy

The toggle for the secure input will always include the eye open or closed icon and/or the "Show" and "Hide" link, and submitted content will appear exactly as it was entered in the input field. Follow the microcopy guidelines for links and labels.