Skip to content

InputSSNLastFour

Status: Stable

Latest released: March 2020

Current version: v9.9.14

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

= 'Last 4 digits of SSN'

string

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


onChange

Function

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