Text field
Text fields provide a single-line input area for users to enter text. They are commonly used in forms and interfaces for data entry, such as names, emails, and other short inputs.
Last updated
Text fields provide a single-line input area for users to enter text. They are commonly used in forms and interfaces for data entry, such as names, emails, and other short inputs.
Last updated
Text fields are essential components for collecting short, structured inputs like usernames or emails in a form or interface. They focus on precision and clarity.
Use text fields when collecting short, structured data like names, emails, passwords, or addresses.
Ideal for login forms, search bars, and settings pages where concise input is required.
In registration forms or surveys where users need to enter short, specific pieces of information.
Use text fields when form validation is essential, such as for email or phone number formats.
When requiring short user input for querying data or filtering results, a text field is optimal for efficiency.
Avoid using text fields for multi-line or detailed input. A text area would be more appropriate for longer entries.
Do not use text fields when the input requires complex formatting, such as rich-text editing, since they support only single-line plain text.
Avoid text fields for date selection, numeric range selection, or other structured data inputs where a more specialized input component would improve usability.
If the user must input a large amount of data at once, such as long descriptions or comments, opt for a text area instead.
Label: Provides context for the input field by indicating what the user should enter.
Slot: An optional, swappable element that can be replaced with other components, providing flexibility for different types of content.
Icon Leading: Optional icon placed on the left side of the text field for visual cues (e.g., search or email icons).
Tag: A small element that provides additional context or metadata about the input (e.g., a required label or field type)
Placeholder Text: An example displayed inside the field before the user begins typing.
Count: Displays character count or input limit, helping users understand how much they can type.
Button: An optional button placed inside the text field for additional functionality.
Icon Trailing: Optional icon on the right side of the text field that may trigger actions (e.g., clear input or show password).
Support Message: Text that provides additional information, such as input validation or instructions.
Hint: Small additional information to assist the user in understanding what to enter.
Small
14
20
8
32
Medium
14
20
8
42
Large
16
24
8
50
Label Association: Ensure the text field’s label is clearly visible and associated using for screen readers.
Keyboard Navigation: Text fields should be focusable and operable with keyboard navigation, with a distinct visual indicator.
Clear Instructions: Placeholder text should be descriptive but not used as the main label. Always provide a clear label above the field.
Color Contrast: Make sure the text field, icons, and placeholder text meet WCAG standards for color contrast to assist visually impaired users.
Screen Reader Feedback: Provide character limits or error messages in a format that can be read by screen readers for real-time user feedback.
Log-in Forms: Use text fields for capturing user credentials like username and password.
Search Bars: Commonly used for entering search queries in search bars across websites or applications.
Short Input Forms: Ideal for forms requiring short inputs, such as first name, email, or phone number.
Filtering: Great for allowing users to enter filtering criteria, such as in a settings page or search filters.
One-Line Data Entries: Suitable for inputs where users need to provide single pieces of data, like postal codes or IDs.
