Components
Input message
Use with caution: Candidate- 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
Maturity
- Guidance
- Examples, usage, code usage, content considerations, and accessibility considerations are all complete.
- Research
- VFS team conducted research on this component which is linked from this page.
- Stability
- Component has been in production for more than 3 months with no significant issues found.
- Adoption
- Multiple teams have adopted this component.
Accessibility
- Accessible use of color
- Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).
- Accessible contrast
- Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3). Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
- Keyboard interactions
- Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions. All interactive elements can be selected and activated using the keyboard.
- Content zoom tested
- Component has been tested with the display set to 400% at 1280px viewport width to ensure that the component does not have overlapping text or elements and all interactive elements still operate.
- Tested in screen readers
- Tested with screen readers to ensure there are no issues with reading order, spelling, dynamic content, and interactive elements.
Code assets
- Variations
- Storybook includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)
- Responsive
- Component depicted in all responsive breakpoints.
- Interactive states
- Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).
- Tokens
- All design attributes (color, typography, layout, etc.) are available as tokens.
- Internationalization
- Describes i18n attributes.
Visual assets
- Variations
- Sketch library includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)
- Responsive
- Component designed to work in all responsive breakpoints.
- Interactive states
- Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).
- Tokens
- All design attributes (color, typography, layout, etc.) are available as tokens.
Legend:
- Complete
- Incomplete
- Not applicable