📝 Text Field — Documentation

Update

🧭 When to Use / When Not to Use

Use When

• Users need to input free text, email, password, number, or custom data.
• The input is part of a form that requires labels, validation, and helper text.
• You need consistent behavior across mobile and desktop.

Avoid When

• User must pick from limited options → use Select / Dropdown.
• Input is yes/no → use Switch.
• Input is long, multi-line → use Text Area.
• Input needs masked/structured formatting → use Input Mask Component.

🎨 Considerations

• The label must always be visible; placeholder is not a label.
• Error and success states must be explicitly triggered by validation.
• Icons should not replace user-provided affordances (e.g., search icon does not remove label).
• Description text should guide, not repeat label.
• Required fields must visually denote “required,” but not rely solely on color.