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
() => {}