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
Props
<InputZIP>
label
= 'ZIP code'
string
The default label associated with the input field. Should always be supplied to meet accessibility best practices.
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 ''.