Examples

A Mask component renders a controlled input field that applies formatting to the input value when the field is blurred.

Code

React

Passing a mask prop into the TextField component with a valid value will enable formatting to occur when the field is blurred. To "unmask" the value, you can import and call the unmaskValue method.

Review Storybook for React guidance of this component.

Style customization

The following CSS variables can be overridden to customize Input/Form components:

Form components

This component uses a text field and its styles, which can be customized by the following variables:

Accessibility

Please note that USWDS and others recognize some accessibility issues with masked input fields:

• It can be difficult to recover from errors without good form validation and feedback to users, particularly if special characters are disallowed and ignored, or replaced. USWDS

  You are leaving design.cms.gov.

  You're about to connect to a third-party site. Select CONTINUE to proceed or CANCEL to stay on this site.

  Learn more about links to third-party sites.

  ContinueCancel

General accessibility guidance

• Keep your form blocks in a vertical pattern. This layout is ideal from an accessibility standpoint, as limited vision can make it difficult to scan from left to right.
• Use helpful hint text. Provide hint text that helps users understand what they need to input.
• Avoid placeholder text. Most browsers' default rendering of placeholder text does not provide sufficient contrast.

Accessibility testing

General accessibility testing

• Text inputs work on mobile devices. On mobile devices and tablets, text inputs should work in both portrait and landscape orientation with no loss of functionality.
• Text inputs remain functional when the screen is magnified. When you zoom to 200%, the text area remains visible and functional.

Keyboard testing

• The text field is accessible via keyboard navigation. Using only a keyboard, you can navigate to the text field, type in it, and navigate away from it.
• Focus indicators are clearly visible around text inputs. When you use a keyboard to tab into a text input, you see an indicator around the input field.

Screen reader testing

• Fields and labels are read in the same order that they appear on the page. When you use a screen reader and navigate through input fields, you hear each text field and label announced in the same order in which they appear on the page (e.g., left to right and top to bottom for English pages).
• Screen reader announces field purpose. When you use a screen reader and navigate to a text input, you hear that the purpose of the input is to type in text. For example, “Edit, blank. Type in text.”
• Screen reader announces field labels and instructions. When you use a screen reader and navigate to a text input, you hear the label or instructions that appear above the text area. (For example, “Enter first name.”)

From USWDS’ text input accessibility tests.

Component maturity