Input message

Contributors

Liz Lantz (VSA Authenticated Experience Team)

Examples

Informational

Success

Warning

Error

Mock-ups

• Mock-up demonstrating an update to existing settings. First fieldset is interactive.
• Mock-up demonstrating use case of a Veteran who has never updated their settings.
  • All field sets are interactive
  • Last fieldset demonstrates error state
• UXPin design specs

Usage

When to use this variation

This message pattern is a mobile friendly, in-line way to communicate information about inputs. It was developed to entice users to take an action on an optional input, and has 4 states:

• Success (green) communicates the successful update of information, via an API call
• Warning (yellow) draws attention to an input, usually before an API call is made.
• Error (red) communicates the failure of an update of information, via an API call
• Information (blue) draws attention to an input, usually before an API call is made.

When to consider something else

If you need to tell the Veteran they’ve missed a required field on an application, or they’ve entered data in the wrong format, use the current error pattern instead.

How to use Input Messages

• Keep message content short.
• Use the feedback icons from the design system.
• Use the success, warning, error states on forms that don’t require the user to click a button to submit the form.

Other input message styles

Error messages

• When a user is filling out an online application, use the current error pattern when a user has
  • missed a required field
  • entered data incorrectly

Code usage

Radio inputs for notification settings

Accessibility considerations

• Icon needs to have alternative text (use sr-only text or an aria-label) so screen readers have an equivalent understanding of the purpose/nature of the message.

• When the message changes after a user interacts with an input, use aria-live="polite" to announce the change.

Research

• No research conducted as of 8/16/21.
• Internal usability study with colleagues who are also Veterans planned for late Aug/early Sept 2021.
• External study planned for notification settings post-MVP Oct/Nov 2021.

Component checklist