InputZip

Status: Stable

Latest released: March 2020

Current version: v9.9.7

Storybook
GitHub

InputZIP proactively eliminates errors by restricting data and input width to align with user expectations and business requirements.

Best practices

  • Restrictions – 5 numeric characters only
  • Label – always included, presents clear description of anticipated data
  • ‘Smart’ value – ok as placeholders or to pre-fill input
  • Help message – provides examples if needed (for example ‘e.g. 94117); don’t add examples as placeholders
  • Width – default decreased to reflect anticipated value

Variants

Priority

Development

import InputZIP from '@nerdwallet/react-formatted-input/input-zip';
<InputZIP />;

Props

<InputZIP>

label

string

The default label associated with the input field. Should always be supplied to meet accessibility best practices.

Default

'ZIP code'

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

Default

''