Skip to content

InputPhone

Status: Stable

Latest released: March 2020

Current version: v9.9.14

Storybook
GitHub

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 ''.