# Text field
## Overview
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.
{% embed url="" %}
## When to use
* 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.
## When not to use
* 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.
## Types
## Anatomy
1. **Label:** Provides context for the input field by indicating what the user should enter.
2. **Slot:** An optional, swappable element that can be replaced with other components, providing flexibility for different types of content.
3. **Icon Leading:** Optional icon placed on the left side of the text field for visual cues (e.g., search or email icons).
4. **Tag:** A small element that provides additional context or metadata about the input (e.g., a required label or field type)
5. **Placeholder Text:** An example displayed inside the field before the user begins typing.
6. **Count:** Displays character count or input limit, helping users understand how much they can type.
7. **Button:** An optional button placed inside the text field for additional functionality.
8. **Icon Trailing:** Optional icon on the right side of the text field that may trigger actions (e.g., clear input or show password).
9. **Support Message:** Text that provides additional information, such as input validation or instructions.
10. **Hint:** Small additional information to assist the user in understanding what to enter.
## Styles
## States
## Size
| Size | Text (px) | Icon (px) | Corner (px) | Container Height (px) |
| ------ | --------- | --------- | ----------- | --------------------- |
| Small | 14 | 20 | 8 | 32 |
| Medium | 14 | 20 | 8 | 42 |
| Large | 16 | 24 | 8 | 50 |
## Accessibility
* **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.
## Example
* **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.
