Skip to content

InputSSN

Status: Stable

Latest released: March 2020

Current version: v9.9.14

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

= 'Social Security number'

string

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