InputPhone proactively eliminates errors by restricting and formatting data to align with user expectations and business requirements.
- 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
= 'Phone number'
The default label associated with the input field. Should always be supplied to meet accessibility best practices.
String to override the default placeholder text, which is "+1".
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 ''.