Intro to UI Inputs

The most basic type of input is the single-line input. As the name suggests, single-line inputs allow users to type a single line. Some forms, such as signup forms requiring only users' names and email addresses, are built entirely with single-line inputs. They’re also suitable for collecting short answers such as addresses, passwords, occupations, and similar data.

If users need to enter longer-form answers, then multi-line inputs are a better option than single-line inputs. Multiple-line inputs initially look like single-line inputs but allow users to enter longer answers, expanding vertically to fit the text as needed.^[1]

They're an excellent option for compact layouts that still require users to enter large amounts of text, for example, when collecting feedback on a survey.

Like multi-line inputs, text areas allow users to enter more than one line. The only difference between these input types is that the text area has a fixed height and applies vertical scrolling when text exceeds the input's bounds.

The advantage of text areas over multi-line inputs is that text areas encourage longer responses with a larger initial size.

Text inputs serve as a versatile means of gathering various types of data, each tailored to its specific purpose. Password inputs are one such type that differs from regular single-line inputs because they hide the data being entered, usually with a series of dots or asterisks.

It’s a good idea to give users the option to reveal the password they’ve entered (turning it back into real characters) if they need to check whether they’ve typed the correct password.

Another special type of text input is the search input. Search inputs allow users to search the site's content (or beyond) and sometimes include auto-complete functionality to return the most common search results instantly. 

Search inputs are usually indicated with a magnifying glass icon, often accompanied by a placeholder or floating label. Placing the magnifying glass icon before the placeholder helps speed up recognition and more efficiently guides users.

Regardless of the type of text input, placeholder text can give users valuable insight or an example of information they're expected to enter. The placeholder text automatically disappears when the user starts entering their own content.

On complex and rarely used forms, disappearing placeholders are likely to strain users' short-term memory. If they get distracted, switch a tab, and then return to a form, they may not remember the hint. They'd need to remove what they've typed and click away from the input to see the placeholder text again.

To prevent such frustration, always use placeholders in combination with labels that provide an insight into what type of information users are expected to enter.

Calendar inputs or modal date inputs are text inputs with some extra formatting. While most calendar inputs allow users to enter a date manually, some also provide a calendar dropdown for picking dates.

Any time your users need to enter a date, schedule an appointment, book a flight, buy a movie ticket, etc., using a calendar input specifically makes it easier to complete. Calendar inputs should use masks and placeholders to indicate the format of the date to be entered.

Select inputs present users with a list of predefined options, allowing them to choose a single item from the list. Users can typically click on the dropdown to reveal the available choices and then select one.

This input type is beneficial for scenarios where there are limited, predefined choices, as it ensures data consistency and reduces input errors. Select inputs are space-efficient, as they only display one option until expanded, making them suitable for situations like choosing a country, state, or category. 

Action inputs consist of two key elements: an input field and a submit button. Their primary function is to validate and process the data entered by users to determine its correctness or relevance for a specific purpose. Designers employ these inputs when they need to examine data within a single input field.

You'll come across action inputs in various contexts. For instance, during online checkout, when users input a coupon code and click "Apply," or alongside the "Search" or "Send" buttons. They help save screen space and simplify the interaction process, reducing any potential difficulties or confusion for users.

Required inputs are most commonly indicated with an asterisk or with the word "required." Letting users know which inputs are required and which they can skip over makes filling out the form a smoother, faster process.

• Should the asterisk follow or precede the input's label? Putting it before the label may help users of left-to-right languages more quickly identify required inputs while scanning the form.
• Should the asterisk be red? Not necessarily, but red is often associated with something that grabs attention. You can use your brand color if it's contrasting enough. The only recommendation is to try to avoid pale gray that users may not even notice.^[2]

A study by Baymard reveals that 89% of users tend to enter numerical inputs in several different ways even if the placeholder shows the formatting example.^[3]

To prevent validation errors, use input masks when proper formatting matters (such as with phone numbers or dates). It not only displays the desired input format but also auto-applies the input as users are typing. It reduces cognitive load and confusion, so users don't need to worry and double-check if the phone number is valid when they enter "+" or use parenthesis "()."