1️⃣ TEXT FIELD — COMPONENT DOCUMENTATION

🧭 Appropriate Usage

Use When

• User needs to enter free-form text, numbers, email, password, name, or other simple inputs.
• Form fields require labels, placeholders, helper text, validation, or icons.
• You need a component that fits into standard forms.

Avoid When

• Long-form content → use Text Area.
• Users must choose from predefined options → use Select or Dropdown.
• Input is a code or verification → use OTP Field.
• Input has multiple parts (country code + phone) → use Phone Field.

🎨 Considerations

• Always use a visible label; never rely on placeholder as a label.
• Required fields must indicate but not rely on color alone.
• Leading/trailing icons must remain aligned and never overlap input.
• Helper text should guide, not repeat the label.
• Validation should not occur until the user interacts with the field.