Text inputs are essential UI elements that enable users to enter and interact with text-based information. They are widely used in forms for collecting data, performing searches, and completing various user interactions. Use text inputs to facilitate user input in structured formats such as usernames, descriptions, URLs, phone numbers, credit card details, emails, and addresses. Ensuring clear labels, proper validation, and intuitive formatting enhances usability and improves the overall user experience.
- 1.Label (Optional): a descriptive text that helps users understand what information is expected in the input field. It should be clear, concise, and placed near the input for better readability.
- 2.Optional indicator (Optional): a small indicator that signals the input field is not mandatory. It helps users know they can leave the field empty without causing validation errors.
- 3.Input action (Optional): an interactive element, such as an icon or button, inside the input field that triggers a specific action (e.g., revealing a password, opening a date picker, or searching).
- 4.Clear action (Optional): a small button, represented by an "X" icon, that allows users to clear the entered text quickly without manually deleting it.
- 5.Helper text (Optional): additional text placed below the input field that provides guidance, examples, or explanations to assist users in filling out the field correctly.
- 6.Container: the visual wrapper around the input field that provides structure, ensures accessibility, and helps differentiate the input from other UI elements.
- 7.Prefix (Optional): a visual element placed before or after the user input, like currency symbols or units, to help clarify the expected data.
- 8.Placeholder/Value: a short hint displayed inside the input field before any text is entered, offering a brief example or instruction on what type of data is expected. It disappears when the user starts typing. The value represents the actual content entered by the user. Unlike the placeholder, the value persists during interaction and is what gets submitted with the form.
Form inputs are essential UI elements that allow users to interact with digital products by entering or selecting data. Choosing the right input type and structure is key to designing efficient, user-friendly forms that support task completion and data accuracy.
A form input (also known as a form field) is used to capture user data. Common input types include text fields, date pickers, number fields, radio buttons, checkboxes, toggles, and dropdowns. Forms should always include a submission method, such as a submit button, link, or keyboard trigger, to complete the interaction.
Although input fields vary in type and purpose, they often share a common set of features:
- Placeholder: a short hint displayed inside the input field that describes its expected value or purpose.
- Size and max length: inputs can have both a visual size (width of the field) and a character limit that defines how much text can be entered.
- Prefix or suffix: some inputs include a visual element before or after the user input, like currency symbols or units, to help clarify the expected data.
- Helper text: additional information displayed below the field to guide the user in providing the correct input.
- Optional label: inputs that are not mandatory can be marked with an "Optional" tag to set clear expectations.
Most inputs can also present standard interactive or informative states:
- Disabled: this state prevents users from interacting with the field. It's typically used when a value is not applicable or editable under certain conditions or roles.
- Error: when a user enters invalid or incomplete data, the input shows an error state, often accompanied by a helpful message to guide corrections.
- Read-only: the input is visible, focusable, and hoverable, but not editable. This is ideal for fields with auto-calculated values. Unlike disabled fields, read-only inputs can still be submitted with the form and are part of the form data.
Text inputs, in particular, are commonly found in forms, search bars, and interactive fields that require text user input. Our text input component is highly configurable, allowing designers and developers to adapt it to different use cases while maintaining usability and accessibility. In this section, we will cover some key characteristics of our text input, so you can learn about its particularities and behavior.
On top of the clear content action, our text input supports another custom action, such as copying the data introduced or triggering a tooltip with helper text. This added flexibility allows teams to tailor the input's behavior to their specific use case, enabling more dynamic interactions directly from the input field.
The autosuggest feature in our text input provides users with real-time suggestions as they type, based on a predefined list of options. As the user enters characters, the input field dynamically filters and displays matching values in a dropdown, allowing for quick and efficient selection.
This feature is particularly useful for reducing input errors, speeding up data entry, and guiding users toward valid or commonly used values, especially in cases where the list of possibilities is large but predictable, such as country names, email domains, or product codes. It enhances usability by minimizing typing effort and improving overall form completion accuracy.
- Always use clear labels: ensure every text input has a visible, descriptive label that doesn't disappear as users begin typing. Avoid relying solely on placeholder text.
- Use placeholders as hints only: placeholders should provide examples or expected formats (e.g., "e.g., johndoe@email.com"), not serve as the primary field descriptor.
- Clarify field requirements: use an "Optional" tag next to labels to indicate when a field isn't mandatory, reducing user uncertainty.
- Provide helper text when needed: include contextual guidance below the input to help users provide the correct information, especially for complex or specific inputs.
- Support various states consistently: reflect focus, disabled, error, and read-only states with distinct, accessible visual cues.
- Apply appropiate alignment: It is recommended to use left alignment in general, except when there is a specific need for right alignment, such as in currency inputs or numeric fields, generally using a suffix.
- Provide a way to clear content: allow users to easily clear the input with a clear icon or button, especially useful for fields like search or filters.
- Use custom action icons appropriately: if adding custom icons inside the input (e.g., a calendar icon for date inputs or a search icon), ensure they're meaningful, accessible, and do not interfere with user input.
- Avoid distracting behaviors: don't introduce actions that reset, redirect, or submit forms unexpectedly from within a text field.
- Use prefixes and suffixes to add clarity: add visual cues like currency symbols (€), units (kg), or domain suffixes (.com) to help users understand the context of their input.
- Do not confuse with input content: ensure prefixes/suffixes are visually distinct and not editable to avoid confusion with the actual value being typed.
- Keep it minimal and functional: avoid decorative or unnecessary additions. Prefixes and suffixes should always serve a clear purpose.
- Use autosuggest for known data sets: ideal when users need to search or select from a large, predefined list (e.g., city names, users, tags). It enhances speed and reduces errors.
- Ensure accessibility: suggestions should be fully navigable using a keyboard and readable by screen readers. Users must be able to select options using arrow keys and Enter.
- Prioritize relevance in suggestions: filter and order suggestions logically based on the user's input to avoid overwhelming them with too many or unrelated options.
- Allow free input if appropriate: when the field accepts both suggested and custom entries, clearly indicate this behavior and validate accordingly.