# 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. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-input-pan-card--introduction ## Variants documented in Storybook - PanCardInput: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-input-pan-card--pancardinput ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Input Pan-Card. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Components

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.

Input Pan-Card Showcase

Source-backed examples covering standard PAN card input sizing and supporting actions.

CSS Class Reference

Quickly copy source-backed utility classes for input structure and state patterns.

Input Structure

Input Container ux4g-input-container
Field Shell ux4g-input
Native Input ux4g-input-input

State Classes

Default State ux4g-input-default
Error State ux4g-input-error
Success State ux4g-input-success
Warning State ux4g-input-warning
Disabled State ux4g-input-is-disabled

Size Classes

Small Input ux4g-input-sm
Medium Input ux4g-input-md
Large Input ux4g-input-lg
Extra Large Input ux4g-input-xl
``` React: ```jsx import React from 'react'; const InputPanCardExample1Demo = () => ( <>
Components

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.

Input Pan-Card Showcase

Source-backed examples covering standard PAN card input sizing and supporting actions.

error Please enter a valid 10-character PAN number.

CSS Class Reference

Quickly copy source-backed utility classes for input structure and state patterns.

Input Structure

Input Container ux4g-input-container
Field Shell ux4g-input
Native Input ux4g-input-input

State Classes

Default State ux4g-input-default
Error State ux4g-input-error
Success State ux4g-input-success
Warning State ux4g-input-warning
Disabled State ux4g-input-is-disabled

Size Classes

Small Input ux4g-input-sm
Medium Input ux4g-input-md
Large Input ux4g-input-lg
Extra Large Input ux4g-input-xl
); export default InputPanCardExample1Demo; ``` Angular: ```html
Components

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.

Input Pan-Card Showcase

Source-backed examples covering standard PAN card input sizing and supporting actions.

CSS Class Reference

Quickly copy source-backed utility classes for input structure and state patterns.

Input Structure

Input Container ux4g-input-container
Field Shell ux4g-input
Native Input ux4g-input-input

State Classes

Default State ux4g-input-default
Error State ux4g-input-error
Success State ux4g-input-success
Warning State ux4g-input-warning
Disabled State ux4g-input-is-disabled

Size Classes

Small Input ux4g-input-sm
Medium Input ux4g-input-md
Large Input ux4g-input-lg
Extra Large Input ux4g-input-xl
``` ### 2. Pan Card Input — PAN Card Input HTML: ```html
``` React: ```jsx import React from 'react'; const InputPanCardExample2Demo = () => ( <>
error Please enter a valid 10-character PAN number.
); export default InputPanCardExample2Demo; ``` Angular: ```html
``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.