InputPhone proactively eliminates errors by restricting and formatting data to align with user expectations and business requirements.
Best practices
- Restrictions – numeric characters only
- Mobile keyboard – Tel (numbers only)
- Label – always included, presents clear description of anticipated data
- Placeholder – (+1) shows that a US phone number is anticipated. The prefix persists as the user types to keep context front-of-mind
- Mask – (+1 (000) 000 - 0000) data formats as a user types
- ‘Smart’ value – ok as pre-fill inputs, avoid as placeholders
Variants
Priority
Development
import InputPhone from '@nerdwallet/react-formatted-input/input-phone';<InputPhone />;Props
<InputPhone>
label
= 'Phone number'
string
The default label associated with the input field. Should always be supplied to meet accessibility best practices.
placeholder
= '+1'
string
String to override the default placeholder text, which is "+1".
value
= ''
string | number
In general all input components should be controlled, which means their value is passed into the component, and state is maintained within the React component as opposed to using refs from the DOM.
Although generally required, default to ''.