Input Best Practices

Inputs may seem simple at first glance, but styling, versatility, stateful behavior, and frequent use make them one of the most complex components in any design system. When well designed, they allow users to input data in a way that is quick, easy, and correct.

Common Input types

There are many different types of inputs that can be used to collect data. Pick the right one depending on your question, requirements, and expected answer.

Single-line text field: These are used for shorter written responses. They allow users to enter and edit one line of text. If the text becomes longer than the field, the input line automatically scrolls left.

Single-line text field example (image from UI Prep)

Text area: These are used for longer written responses. They are taller than text fields and allow users to add multiple lines of text by wrapping overflow onto a new line. Text areas have a fixed height and scroll vertically when the input becomes longer than the field.

Text area example (image from UI Prep)

Drop-down menu: These are used when there are multiple predefined options a user can select from. These options are selected from a menu that appears when the field is clicked into. Once an option is selected, it can be seen in the input field. This is best used when there are 5 or more options to choose from.

Drop-down menu example (image from UI Prep)

Checkbox: These are used when there are one or multiple predefined options a user can select from. They allow users to make multiple selections in an exposed list. Checkboxes are best used when there are 4 or less options to choose form.

Checkbox example (image from UI Prep)

Radio buttons: These are used when there are one or multiple predefined options. They allow users to make a single selection in an exposed list. Radio buttons are best used when there are 4 or less options to choose form.

Radio button example (image from UI Prep)

Tip: Always list checkbox and radio button options in a vertical line for easier scan-ability and selection accuracy.

Input Field Height

The height of your input should match the height of your primary button to maintain visual rhythm and hierarchy. For example, If your base unit is 8px, then the shared height for both your input field and button could be 32px or 40px. Learn more about sizing and spacing here.

Input field height example (image from UI Prep)

Input Field Length

The length of your input field can vary depending on where and how it is being used. In general, all input fields in a form should be the same length. However, the lengths can also vary to afford what the length of the answer should be. For example, an input field for a credit card number should be long, while the input field for the CVV number should be short.

Input field length example (image from UI Prep)

Labels

Labels should be short, clear, and easy to read. Each label should be no more than 1–2 words, plainly describing what is being asked. The words themselves should use a contrasting typography from the input text and sentence case (only first letter of first word is capitalized) for easier scanning and readability.

Label example (image from UI Prep)

Alignment

Input field labels can either be vertically aligned or horizontally aligned depending on the type and purpose of the form.

Vertically aligned: Vertical alignment is more common and recommended for most form use cases. It has the fastest completion rate because of the easy, top-to-bottom reading pattern, and is able to accommodate labels with varying lengths.

Vertical alignment example (image from UI Prep)

Horizontally aligned: This alignment is best used when a form is very long (ie. internal data base), or a slower completion rate is desired (ie. asking very sensitive data). It reduces vertical space and slows completion time because of the Z-shaped reading pattern. The major drawback to this alignment is that the connection between label and field can be difficult to see, especially with horizontal-left aligned labels.

Horizontal alignment example (image from UI Prep)

Placeholder text

Placeholder text is the text often seen inside of an input field in the default state. In general, it’s best not to use placeholder text at all. At its best it shows repetitive information, at its worst, it hides important information and reduces accessibility.

Due to the nature of being a placeholder, placeholder text is replaced by the user with input text. This is problematic when placeholder text is being used as the label or hint text. Once the field is filled in, the user can no longer see the information to help them complete or review their answer.

Placeholders can also hurt accessibility in forms. They can be confused with input text, be difficult to see due to the lighter color, are skipped by automatic translators, and are often undetected by assistive technology (ie. page readers). Learn more here.

Placeholder text example (image from UI Prep)

Icons

Icons are commonly used in input fields but can have different meanings depending on the individual icon and its position.

Aesthetic icons: Many icons are used purely for aesthetic reasons. They are a visual representation of the label and have no state or functionality associated with them. These can typically be found on the left side on the input, inline with the input text.

Aesthetic icons example (image from UI Prep)

Actionable icons: Some icons are actionable and add functionality to your input. For example, chevron, clear, show, hide, info, or voice input all serve a purpose and change how users can interact with the input field. These are typically found on the right side of the input, either inline with the the input text or the label text.

Actionable icons example (image from UI Prep)

Feedback icons: These icons indicate if an action was successful or not. Using feedback icons in addition to color is important for accessibility, as people with colorblindness may not be able to tell the different between red and green and will rely on the icons for feedback.

Feedback icons example (image from UI Prep)

States

Inputs fields have different states to communicate to the user what is currently happening and what they should do next. These states are shown with various visual cues including text, icons, and color.

Default: The default state shows an empty input field using default styling to indicate it has not been answered and is ready to be interacted with.

Default example (image from UI Prep)

Active: The input field becomes activated when clicked into. This is shown with a highlighted boarder and caret to indicate to the user they should start typing their answer.

Active example (image from UI Prep)

Filled: An input field is filled once the answered has been added and the input field has been clicked out of. This is shown with the boarder returning to its default color and the answer appearing in dark text. This indicates that the input has been completed and the user can continue on to the next question.

Filled example (image from UI Prep)

Error: When an answer is incorrect or missing, the input field shows an error message. This message is communicated with color, icons, and descriptive text to flag the issue. This indicates to the user they should review their answer make a correction.

Error example (image from UI Prep)

Success: When an answer is correct, the input field can show a success message. This message is communicated with color, icons, and sometime text. This indicates to the user they can continue to the next question or step.

Success example (image from UI Prep)

Disabled: An input can be disabled due to certain requirements or restrictions. This is shown with an empty, grayed out input field, to indicate it can not be interacted with.

Disabled example (image from UI Prep)

View only: An input can be view only due to certain requirements or restrictions. This is shown with a filled in, grayed out input field, to indicate it can not be interacted with.

view only example (image from UI Prep)

Assistance

There are many way to provide additional assistance to help users fill out forms faster and more accurately. Below are a few common methods.

Hint text: Use hint text above or below your input field to provide users with helpful information. For example, how to format their answer.

Hint text example (image from UI Prep)

Auto Format: Automatically format a user’s input as they type to help them add the correct values, review their answers, and avoid formatting errors. For example, a phone number.

Auto format example (image from UI Prep)

Auto complete: Suggest answers based on partial inputs as they are being typed to save users time and reduce formatting or spelling errors. For example, a street address.

Auto complete example (image from UI Prep)

Default values: Pre-fill text fields with the most likely answer when the input is expected to be the same for >90% of your users. For example, language based on geo-location data.

Default values example (image from UI Prep)

Advanced Input Functionality

Additional functionality can be added to inputs depending on the type and amount of information being collected. Below are a few examples of commonly used advanced functionality.

Multi-select text field: Multi-select text fields allow users to enter multiple, individual inputs. Once an input is entered it is displayed as a chip and the user can start typing their next input. For example, when adding multiple team members.

Multi-select text field example (image from UI Prep)

Drop-down search: Contextual search functionality should be added to a drop-down menu when there are more than 25 options. As a user types into the field, available options are filtered to show the search results. For example, when selecting from a long list of countries.

Drop-down search example (image from UI Prep)

Date picker: Date pickers can allow users to select a single date, or date range from a calendar view. This view shows all available dates and allows the user to toggle between months. For example, when setting an event date(s).