Constraint Input


The user needs to supply the application with data but may be unfamiliar with which data is required or what syntax to use.


Only allow the user to enter data in the correct syntax.


Use when

Any system where structured data must be entered. Data such as dates, room numbers, social security numbers or serial numbers are usually structured. The exact syntax used for such data may vary per country or product. When the data is entered using an unexpected syntax, the data cannot be used by the application. The user may be familiar with the data but may not know the exact required syntax. The user strives for entry speed but also wants it to be entered correctly. Cultural conventions determine what the user expects the syntax to be. For example, dd/mm/yy is usual in Europe while mm/dd/yy is used in the United States.


Present the user with fields for each data element of the structure. Label each field with the name of the data unit if there can be doubt about the semantics of the field. The field does not allow incorrect data to be entered. Avoid fields where users can type free text. Additionally, explain the syntax with an example or a description of the format. Provide sound defaults for required fields, fields that are not required should be avoided or otherwise marked as optional. When optional fields are used, the consequences for the user must be explained.


The main idea is avoid entering incorrect data by not making it possible to enter wrong data. By showing the required format the chances of errors are reduced because the user is given complete knowledge. However, because the user now has to give multiple data inputs instead of one, more time is needed to enter the data. The solution reduces the number or errors and increases satisfaction but the performance time may go down.

More Examples

This snapshot is from the date selection at Entering the date is spit up in three input areas. Each of the input fields allows only valid entries. Entering an invalid date becomes impossible.

plml logo


2 comments have been added to this pattern

Tomek, 5th December 2007
The one with combobox is a nightmare. Maybe it looks good in theory but not in practice. As a regular user I spent a lot of time filling such date fields when looking for a flight or a car. It is a nightmare - sometimes the combo list needs to be scrolled, it changes values when I try to scroll the page, often looses values when going back. The one with a calendar view is slightly better. What I always wanted is a quick input field, where I can just paste the dates (start and end in one field!).
Maybe some web guru will see my crying beg here and lead the developers to create some 'productivity friendly' web interfaces...
felix, 18th December 2007
I agree this pattern is not great with power user. It would be great to find a solution that suits both kind of user for large audience.

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below