How to design an input field to avoid common mistakes?

Deep dive

To design an input field that is clear and user-friendly, it's essential to understand input fields structure, types, and how users can interact with them. 

When can you use input field UI in enterprise apps?

• Data entry: Customer names, order quantities, invoice numbers.

• Form completion: Employee onboarding forms, client feedback forms.

• Search and query: Database searches, filtering reports, querying specific datasets.

• User preferences: Notification settings, threshold definitions, report formats.

• Authentication: Username and password entry.

What is the input field design anatomy?

Input fields consist of several parts:

1. Container: Defines the area where users can input their data, providing visual boundaries.

2. Leading icon (optional): An icon placed at the beginning of the input field to symbolize the type of content expected.

3. Label: Describes the purpose of the field, guiding users on what information to enter.

4. Placeholder/input text: Placeholder text offers an example of the expected format, which disappears as users type their actual input.

5. Trailing icon (optional): An icon positioned at the end of the field, often used for actions like clearing the input.

6. Helper text/error text (optional): Provides additional instructions or feedback, such as error messages, to assist users in completing the field correctly.

Source

What input field types are there?

Input fields come in various types, each suited for specific data entry tasks: 

• Text fields: General-purpose fields for entering any kind of text, such as names or addresses.

• Number fields: Designed for inputting numeric data; they often limit input to numbers only and offer a numeric keypad on mobile devices.

• Email fields: Specifically for email addresses, these often include validation to ensure the entry is in the correct email format.

• URL fields: Used for entering web addresses, often providing validation to ensure the input is a valid URL.

• Password fields: Secure fields that mask the input with dots or asterisks for privacy, often including an option to show the password for verification.

• Date and time pickers: Specialized fields that allow users to select dates and times from a calendar or clock interface, reducing input errors.

• Telephone fields: Optimized for phone numbers, providing a numeric keypad and sometimes specific formatting for easier input.

• Search fields: Fields designed to facilitate searching, often including suggestions or autocomplete functionality.

• Color pickers: Allow users to select colors visually, usually through a color palette, eliminating the need to input color codes manually.

• Range sliders: Allow users to select a number within a set range by sliding a control, often used for settings like volume or brightness.

• File upload fields: Enable users to select and upload files from their devices to a server or application.

• Checkboxes: Allow users to select one or multiple options, useful for yes/no or multi-select scenarios.

• Radio buttons: Present a set of options from which users can select only one, ensuring a single choice among many.

• Dropdowns: Provide a list of options in a dropdown menu format, allowing users to select a single item from a longer list.

How to choose an appropriate input field size?

1. Ensure input fields match the button size height, typically 40 pixels.

2. Align sizes with your grid system for consistency.

3. Adjust sizes based on expected user input length.

4. Maintain input fields large enough for readability without crowding the interface.

5. Adapt sizes to the intended device, ensuring accessibility on mobile.

6. Keep input fields consistent across similar use cases within the interface.

7. Use padding to ensure text within input fields is not too close to field edges.

How do input fields states change with user interaction?

• Default: The field appears standard, ready for user input.

• Hover: The field subtly changes color or border when the pointer hovers over it, indicating interactivity.

• Focus: When clicked, the field highlights with a color or border change to show active input.

• Typing: As the user enters data, the field actively reflects the input with real-time updates.

• Entered: Indicates that the user has completed typing, often prompting validation checks.

• Error: Displays a color change and message when user input is invalid, helping correct errors.

• Confirmed: Indicates successful input with a positive color or icon, confirming correct data entry.

• Disabled: Grays out to indicate the field cannot be interacted with.

Source

What is the problem with underlined input field UX?

• Hard to spot: Users often confuse underlined fields with lines or lists, making them easy to overlook.

• Difficult to tap: The thin line makes it tricky to tap accurately, leading to frustration and errors.

Source

• Not user-friendly: Especially challenging for elderly or visually impaired users who may not recognize them as input areas.

• Can look disabled: They might seem inactive, confusing users about whether they can type in them.

Source 

What label positioning and styling should I choose for my project?

The placement of text field labels impacts usability and completion time. Here are three common styles:

• Top-aligned labels: The fastest and most user-friendly option. They allow users to see the label and field with a single glance and work well on mobile. However, they require more vertical space.

Source

• Left-aligned labels: Ideal for complex or unfamiliar data. They save vertical space but increase completion time due to the distance between labels and fields.

Source

• Right-aligned labels: The fastest for form completion, as labels are close to the fields, reducing eye movement. However, they can be harder to scan, especially in longer forms.

Source

What input field best practices can help users fill out fields faster?

Enable auto-complete and suggestions

Add features that help users by finishing their entries for them, like names or codes, making data entry faster.

Implement pre-fill information

Use information you already have, like someone's location or preferences, to automatically fill in fields and save time.

Provide contextual info

Show users helpful details, like balances or relevant data, right when they need it to make better decisions.

Include inline feedback

Set up forms to give immediate tips or corrections, so users can fix anything on the spot without hassle.

Simplify the process

Cut down on unnecessary questions and use smart tools to show only what’s needed, based on what users have already entered.

Should I avoid error messages under input fields?

Error messages under input fields are common but can cause usability issues:

• Mobile devices: Virtual keyboards may block the message.

• Assistive tools: Magnifiers and autofill suggestions can obscure the error.

• Visibility: Errors on the right of fields are often missed by users.

To improve accessibility, position error messages above input fields. This ensures they remain visible, though it may cause layout shifts as errors appear. For lengthy messages, use collapsible accordions instead of tooltips to maintain clarity and usability.

🤝 Credits

Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!

• The Anatomy of Input Field by Nick Babich

• Text fields & Forms design — UI components series by Taras Bakusevych

• Why You Shouldn’t Use Solid or Underlined Text Fields by UX Movement

📚 Keep exploring 

Never stop growing. Explore resources thoughtfully handpicked by Cieden’s designers.

• Text fields by Material design 3