The Text Input: Fundamental User Data Capture
The Text component is a core input field for users to enter alphanumeric characters, numbers, or symbols within your application or website.
Features
Discover the key features of the Text component.
Versatile Data Entry
Text allows versatile data entry, enhancing user interaction by accommodating various types of input such as text, numbers, or symbols. Users can conveniently input information, improving usability and efficiency in completing tasks.
Clear Entry Field
The input field provides a clear space for users to enter text, ensuring a focused and unobstructed interface. With a clean and easily accessible input field, users can input text effortlessly, enhancing the overall user experience and reducing friction in data entry tasks.
Customizable Design
Tailor text input styles to match interface seamlessly, ensuring consistency and alignment with your brand's visual identity. Customize text input components to suit different design themes or preferences, enhancing overall interface appeal and user experience while maintaining a cohesive design language.
Anatomy
Field Label
A descriptive label positioned above the input field, informing users of the data required.
Input Field
The area where users can enter their text.
Left Icon
An optional icon positioned at the left of the input field, which can signify the type of data to be entered.
Right Icon
An optional icon positioned at the right, often used for additional functionalities like showing or hiding password text.
Help Description Label
A label that offers supplementary information or guidance related to the data input.
Example Use Cases
Data Entry Forms
Incorporating text input fields in data entry forms for capturing user information such as name, email, address, or other personal details.
Search Boxes
Implementing text input fields as search boxes to enable users to enter search queries and retrieve relevant results from databases or content repositories.
Messaging Interfaces
Integrating text input fields in messaging interfaces for composing and sending text messages, chat messages, or comments.
Filter and Filter
Including text input fields in filter and search functionalities to allow users to refine or narrow down search results based on specific criteria.
Password Fields
Using text input fields with password masking functionality to securely capture user passwords or authentication credentials.
Numeric Inputs
Configuring text input fields to accept only numeric input for capturing numerical data such as dates, phone numbers, or quantities.
Guidelines for Usage
When incorporating the Text component into designs, consider the following guidelines to ensure usability, accessibility, and consistency:
Size and Length: Determine the appropriate size and length of text input fields based on the expected input length and user context. Use shorter input fields for concise inputs and longer fields for more extensive inputs.
Placeholder Text: Provide descriptive placeholder text inside text input fields to indicate the expected input format or provide instructions to users. Ensure that placeholder text is clear, concise, and disappears when users start typing.
Label Alignment: Align text input field labels consistently with the corresponding fields to maintain visual clarity and aid users in understanding the purpose of each input.
Error Handling: Implement clear error messages and visual indicators to notify users of input errors or validation issues, such as incorrect formats, missing required fields, or invalid characters.
Input Validation: Validate user input in real-time or upon form submission to prevent errors, ensure data accuracy, and improve the overall user experience. Highlight invalid inputs and provide guidance on how to correct them.
Accessibility: Ensure that text input fields meet accessibility standards by providing sufficient color contrast, keyboard navigation support, and screen reader compatibility for users with disabilities. Use appropriate HTML attributes and ARIA roles to enhance accessibility.
Responsive Design: Design text input fields to be responsive and adapt to different screen sizes and devices, ensuring optimal usability on desktops, tablets, and smartphones.
Sizes
.input-large
A larger size for the component, ensuring it stands out and is easily noticeable, often used for primary actions or important interactions to draw user attention.
.input-extra-large
The largest size for the component, making it highly prominent and easy to interact with, often used in high-impact areas or for very important actions.
States
.input :enabled
The default state where the component is fully interactive and ready for user actions. It appears normal and invites interaction.
.input :hover
The state when a user places their cursor over the component, indicating it is ready for interaction and often visually changes to show responsiveness.
.input :focus
The state showing that the component is currently selected or active, highlighted for user awareness and accessibility purposes, often with a border or shadow.
.input: success
The state indicating a successful action or positive result, often highlighted with a specific color like green or an icon like a checkmark to reinforce the success message.
.input: error
The state indicating a problem or error, usually highlighted with specific colors like red and icons such as an error symbol to signal an issue that needs resolution.
.input: *disabled
The state where the component is visible but non-interactive, indicating it is not available for use. It often appears faded or greyed out to signal its inactivity.
Best Practices vs. Common Pitfalls
Do:
Use appropriate icons to guide users effectively about the type of information required in the input field.
Provide clear and informative field labels to facilitate seamless data entry.
Utilize help description labels to offer additional guidance or information to prevent errors.
Don't:
Overload the input field with too many elements, which might distract or confuse the user.
Ignore the usage of states, as they provide essential feedback and facilitate a dynamic user experience.
Use the extra-large input size indiscriminately; it should be reserved for specific instances requiring emphasis or focus.