Form Elements
Input-Textfield
Input - Text Field allow users to enter, edit and submit information such as names, emails, passwords or search queries. They support user interaction by enabling data input in forms, searches and workflows, ensuring a smooth and efficient user experience.
Examples
Label
Description
Label
Error message
Label
Verified
Label
Check value
Label
Description
Label
Description
AccessibilityWCAG 2.1 Level AA Compliant
Features9 checks
- Minimum 44px touch target height (WCAG 2.5.5)
- 2px focus ring with 2px offset for keyboard navigation (WCAG 2.4.7)
- Color contrast ratios meet 4.5:1 for text and placeholders (WCAG 1.4.3)
- Semantic HTML input element with proper type attributes
- aria-invalid attribute for error states
- aria-describedby linking to helper and error text
- Proper label associations (when used with Label component)
- Error messages announced to screen readers
- Clear visual error indicators (not relying on color alone)
Visual States & Sizes
Complete matrix of all sizes and states as specified in the Figma source file.
Sizes
S, 32px
Label
Description
M, 40px (Desktop)
Label
Description
L, 48px (Mobile)
Label
Description
XL, 56px
Label
Description
States (Size M)
Default
Label
Description
Error
Label*
Error message
Success
Label
Verified
Warning
Label
Check this value
Disabled
Label
Description
Read-only
Label
Description
With Leading Icon
Label
Description
With Prefix + Trailing
Label
Description
When to use this component
✓Do's
- •Collecting single-line text, numbers, emails, or phone numbers
- •Form fields that need validation feedback
- •Search inputs with placeholder guidance
- •Fields requiring specific input modes (numeric, tel, email)
✗Don'ts
- •For entering multiple lines of text - use a Textarea instead.
- •For selecting from predefined options - use a Select or Radio Buttons.
- •For making a boolean choice - use a Checkbox or Switch.
- •For creating or editing rich text - use a dedicated rich text editor
Do's and Don'ts
✓ Do's
Always pair inputs with a visible label and helpful placeholder text.
✗ Don'ts
Don't use placeholder as the only label, it disappears on focus and fails WCAG 1.3.1.
✓ Do's
Please enter a valid 12-digit Aadhaar number
Show specific, actionable error messages below the field.
✗ Don'ts
Invalid input
Don't use vague error messages, tell the user exactly what to fix.