small input size when data validation uses a 5-digit ZIP format.
medium input size when validating against a stricter data set, such as the 9-digit format.
Use the default (
large) input size when the user must confirm or enter data containing County, State, and ZIP code.
Consider user pain points when choosing a ZIP code input field size.
- To reduce cognitive load, use the 5-digit pattern which supports a mental model that widely exists.
- Specific validation of numeric values 0–9, spaces, and dashes.
- Let the user pick the ZIP code and county/state option from an autocomplete option. In some use cases the ZIP code alone is ambiguous because some ZIP codes are in more than one county.
- Display the option the user selects from the autocomplete option list
- Error prevention clearly indicates the user needs to enter a valid ZIP code before moving to the next item.
- A small-sized input field works for a 5-digit ZIP code but hides a 9-digit format.
- A medium-sized input field accommodates a 9-digit ZIP format but hides additional data such as county and/or state.
- Some users' browsers auto-populate the 9-digit ZIP code, including the dash. This interaction can be problematic when using the small input field.
- ZIP codes are not always consistent. They may not reflect the current geography, which can lead to problems when services rely on the accuracy of the ZIP code.