Form Elements
Input-Pan Card
Input - Pan Card allows users to enter, format and validate a Permanent Account Number (PAN). It supports standardized data entry across financial, taxation, and banking workflows.
Examples
Enter your 10-digit PAN
AccessibilityWCAG 2.1 Level AA Compliant
Features10 checks
- Minimum 44x44px touch target for mobile users (WCAG 2.5.5)
- 2px focus ring with 2px offset for keyboard navigation visibility (WCAG 2.4.7)
- Color contrast ratio of 4.5:1 for all text and borders (WCAG 1.4.3)
- Error states use both color and icons for colorblind users (WCAG 1.4.1)
- Proper ARIA attributes (aria-invalid, aria-describedby, aria-required)
- Screen reader announces validation errors and helper text
- Label properly associated with input via for/id attributes
- Monospace font for better character distinction
- Format guidance provided in placeholder and helper text
- Status icons have aria-label for screen reader users
When to use this component
✓Do's
- •Collecting PAN card numbers in government forms
- •KYC verification flows requiring PAN validation
- •Income tax related service applications
- •Financial service onboarding requiring PAN
✗Don'ts
- •For collecting Aadhaar numbers, use an Aadhaar Input.
- •For general text input, use Input.
- •For entering non-Indian tax identifiers, use Input component.
- •For displaying a PAN number , use masked text display.
Do's and Don'ts
✓ Do's
✓ Correct implementation shown
Validate PAN format (AAAAA0000A) in real-time as the user types.
✗ Don'ts
✗ Incorrect implementation shown
Don't accept PAN without format validation, it leads to processing errors.