InputSSNLastFour

Status: Stable

Latest released: March 2020

Current version: v9.9.12

Storybook
GitHub

InputSSNLastFour 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 InputSSNLastFour from '@nerdwallet/react-formatted-input/input-ssn-last-four';
<InputSSNLastFour />;

Props

<InputSSNLastFour>

label

string

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

Default

'Last 4 digits of SSN'

onChange

Function

Change handler required to access the four SSN digits being supplied to the input component.

Default

() => {}