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.