InputSSN

Status: Stable

Latest released: March 2020

Current version: v9.9.12

Storybook
GitHub

InputSSN proactively eliminates errors by restricting and formatting data to align with user expectations and business requirements.

Best practices

  • Restrictions – 4 numeric characters only; default width decreased to reflect anticipated value
  • Mobile keyboard – Tel (numbers only)
  • Label – always included, presents clear description of anticipated data
  • Placeholder – (0000) shows that only the last 4 digits of SSN are anticipated
  • Mask – (0000) gets replaced with user’s data as they type
  • ‘Smart’ defaults – Never use
  • Help message – provides additional info; don’t add guidance as placeholders

Variants

Priority

Development

import InputSSN from '@nerdwallet/react-formatted-input/input-ssn';
<InputSSN />;

Props

<InputSSN>

label

string

The default label associated with the input field. Should always be supplied to meet accessibility best practices.

Default

'Social Security number'