# Input Aadhaar Input-Aadhaar field allow users to securely enter, format and validate their 12-digit unique identification number. They support user interaction by enabling standardized data entry in identity verification, government applications and secure onboarding workflows, ensuring a smooth and compliant user experience. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-input-aadhaar--introduction ## Variants documented in Storybook - AadhaarInput: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-input-aadhaar--aadhaarinput ## 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 Aadhaar. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Aadhaar Input — Aadhaar Number Input HTML: ```html
``` React: ```jsx import React from 'react'; const InputAadhaarExample1Demo = () => ( <>
error Please enter a valid 12-digit Aadhaar number.
); export default InputAadhaarExample1Demo; ``` Angular: ```html
``` ### 2. Introduction — Introduction HTML: ```html
Components

Input Aadhaar

Input-Aadhaar field allow users to securely enter, format and validate their 12-digit unique identification number. They support user interaction by enabling standardized data entry in identity verification, government applications and secure onboarding workflows, ensuring a smooth and compliant user experience.

Input Aadhaar Showcase

Source-backed examples covering standard Aadhaar 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 InputAadhaarExample2Demo = () => ( <>
Components

Input Aadhaar

Input-Aadhaar field allow users to securely enter, format and validate their 12-digit unique identification number. They support user interaction by enabling standardized data entry in identity verification, government applications and secure onboarding workflows, ensuring a smooth and compliant user experience.

Input Aadhaar Showcase

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

error Please enter a valid 12-digit Aadhaar 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 InputAadhaarExample2Demo; ``` Angular: ```html
Components

Input Aadhaar

Input-Aadhaar field allow users to securely enter, format and validate their 12-digit unique identification number. They support user interaction by enabling standardized data entry in identity verification, government applications and secure onboarding workflows, ensuring a smooth and compliant user experience.

Input Aadhaar Showcase

Source-backed examples covering standard Aadhaar 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
``` ## 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.