# Application & Submission / Government Form Government form with validation patterns including auto-save, inline errors, steppers, various input types (text, select, radio, checkbox, slider, toggle). **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-application-submission-government-form--desktop ## Pattern variants - Desktop: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-application-submission-government-form--desktop - Desktop Workspace: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-application-submission-government-form--desktop-workspace - Card: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-application-submission-government-form--card ## When to use this pattern Use Application & Submission / Government Form when building citizen-facing flows that match the described government journey. Combine components such as cards, forms, tables, buttons, and status indicators as shown in Storybook. ## 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 Application & Submission / Government Form. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Card — Form - Default State HTML: ```html

check_circle Saved 3:14 PM

Eligibility
Personal
3
Documents
4
Submit

Personal information

Please enter your details. We use this to verify your application.

From Aadhaar · Update via UIDAI open_in_new

Full name

Mobile number

Email address

Aadhaar number *

Enter your 12-digit Aadhaar number

State of residence

Your marital status

Single

Divorced or widowed

Married

Single

Divorced or widowed

Married

Brief reason for application (optional)

Annual Income (Lakh ₹) * ₹3.2 Lakh

Receive application status updates via SMS

I confirm the above information is accurate and authorise verification. *

``` React: ```jsx import React from 'react'; const ApplicationSubmissionGovernmentFormExample1Demo = () => ( <>

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

{/* Navigation Links */}

{/* Actions */}

search

{/* Mobile Menu */}

{/* Card Layout: Purple BG + Centered White Card */}

{/* Auto-save Status Bar */}

check_circle Saved 3:14 PM

{/* Stepper (from Journey Progress Indicator pattern) */}

Eligibility
Personal
3
Documents
4
Submit

{/* Form Header */}

Personal information

Please enter your details. We use this to verify your application.

{/* Aadhaar Link */} From Aadhaar · Update via UIDAI open_in_new {/* Form Fields */}

{/* Full Name */}

Full name

{/* Mobile Number */}

Mobile number

{/* Email Address */}

Email address

{/* Aadhaar Number */}

Aadhaar number *

Enter your 12-digit Aadhaar number

{/* State of Residence */}

State of residence

{/* Marital Status (Radio Inline) */}

Your marital status

Single

Divorced or widowed

Married

Single

Divorced or widowed

Married

{/* Brief Reason (Textarea) */}

Brief reason for application (optional)

{/* Annual Income Slider */}

Annual Income (Lakh ₹) * ₹3.2 Lakh

{/* SMS Toggle */}

Receive application status updates via SMS

{/* Confirmation Checkbox */}

I confirm the above information is accurate and authorise verification. * {/* Actions */}

{/* Footer Branding */}

); export default ApplicationSubmissionGovernmentFormExample1Demo; ``` Angular: ```html

check_circle Saved 3:14 PM

Eligibility
Personal
3
Documents
4
Submit

Personal information

Please enter your details. We use this to verify your application.

From Aadhaar · Update via UIDAI open_in_new

Full name

Mobile number

Email address

Aadhaar number *

Enter your 12-digit Aadhaar number

State of residence

Your marital status

Single

Divorced or widowed

Married

Single

Divorced or widowed

Married

Brief reason for application (optional)

Annual Income (Lakh ₹) * ₹3.2 Lakh

Receive application status updates via SMS

I confirm the above information is accurate and authorise verification. *

``` ### 2. Card — Form - Inline Error HTML: ```html

check_circle Saved 3:14 PM

Eligibility
Personal
3
Documents
4
Submit

Personal information

Please enter your details. We use this to verify your application.

From Aadhaar · Update via UIDAI open_in_new

Full name

Mobile number

Email address

error Enter a valid email address (e.g. you@example.com).

Aadhaar number *

Enter your 12-digit Aadhaar number

State of residence

Your marital status

Single

Divorced or widowed

Married

Single

Divorced or widowed

Married

Brief reason for application (optional)

Annual Income (Lakh ₹) * ₹3.2 Lakh

Receive application status updates via SMS

I confirm the above information is accurate and authorise verification. *

``` React: ```jsx import React from 'react'; const ApplicationSubmissionGovernmentFormExample2Demo = () => ( <>

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

{/* Navigation Links */}

{/* Actions */}

search

{/* Mobile Menu */}

{/* Card Layout: Purple BG + Centered White Card */}

{/* Auto-save Status Bar */}

check_circle Saved 3:14 PM

{/* Stepper (from Journey Progress Indicator pattern) */}

Eligibility
Personal
3
Documents
4
Submit

{/* Form Header */}

Personal information

Please enter your details. We use this to verify your application.

{/* Aadhaar Link */} From Aadhaar · Update via UIDAI open_in_new {/* Form Fields */}

{/* Full Name */}

Full name

{/* Mobile Number */}

Mobile number

{/* Email Address - Error State */}

Email address

error Enter a valid email address (e.g. you@example.com).

{/* Aadhaar Number */}

Aadhaar number *

Enter your 12-digit Aadhaar number

{/* State of Residence */}

State of residence

{/* Marital Status (Radio Inline) */}

Your marital status

Single

Divorced or widowed

Married

Single

Divorced or widowed

Married

{/* Brief Reason (Textarea) */}

Brief reason for application (optional)

{/* Annual Income Slider */}

Annual Income (Lakh ₹) * ₹3.2 Lakh

{/* SMS Toggle */}

Receive application status updates via SMS

{/* Confirmation Checkbox */}

I confirm the above information is accurate and authorise verification. * {/* Actions */}

{/* Footer Branding */}

); export default ApplicationSubmissionGovernmentFormExample2Demo; ``` Angular: ```html

check_circle Saved 3:14 PM

Eligibility
Personal
3
Documents
4
Submit

Personal information

Please enter your details. We use this to verify your application.

From Aadhaar · Update via UIDAI open_in_new

Full name

Mobile number

Email address

error Enter a valid email address (e.g. you@example.com).

Aadhaar number *

Enter your 12-digit Aadhaar number

State of residence

Your marital status

Single

Divorced or widowed

Married

Single

Divorced or widowed

Married

Brief reason for application (optional)

Annual Income (Lakh ₹) * ₹3.2 Lakh

Receive application status updates via SMS

I confirm the above information is accurate and authorise verification. *

``` ### 3. Card — Form - Multi-field Error HTML: ```html

check_circle Saved 3:14 PM

Eligibility
Personal
3
Documents
4
Submit

Personal information

Please enter your details. We use this to verify your application.

error

3 fields need your attention. Fix them to continue. Jump to error

From Aadhaar · Update via UIDAI open_in_new

Full name

Mobile number

error Mobile number must be 10 digits.

Email address

error Enter a valid email address (e.g. you@example.com).

Aadhaar number *

error Aadhaar must be 12 digits.

State of residence

Your marital status

Single

Divorced or widowed

Married

Single

Divorced or widowed

Married

Brief reason for application (optional)

Annual Income (Lakh ₹) * ₹3.2 Lakh

Receive application status updates via SMS

I confirm the above information is accurate and authorise verification. *

``` React: ```jsx import React from 'react'; const ApplicationSubmissionGovernmentFormExample3Demo = () => ( <>

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

{/* Navigation Links */}

{/* Actions */}

search

{/* Mobile Menu */}

{/* Card Layout: Purple BG + Centered White Card */}

{/* Auto-save Status Bar */}

check_circle Saved 3:14 PM

{/* Stepper (from Journey Progress Indicator pattern) */}

Eligibility
Personal
3
Documents
4
Submit

{/* Form Header */}

Personal information

Please enter your details. We use this to verify your application.

{/* Error Summary Alert */}

error

3 fields need your attention. Fix them to continue. Jump to error

{/* Aadhaar Link */} From Aadhaar · Update via UIDAI open_in_new {/* Form Fields */}

{/* Full Name */}

Full name

{/* Mobile Number - Error State */}

Mobile number

error Mobile number must be 10 digits.

{/* Email Address - Error State */}

Email address

error Enter a valid email address (e.g. you@example.com).

{/* Aadhaar Number - Error State */}

Aadhaar number *

error Aadhaar must be 12 digits.

{/* State of Residence */}

State of residence

{/* Marital Status (Radio Inline) */}

Your marital status

Single

Divorced or widowed

Married

Single

Divorced or widowed

Married

{/* Brief Reason (Textarea) */}

Brief reason for application (optional)

{/* Annual Income Slider */}

Annual Income (Lakh ₹) * ₹3.2 Lakh

{/* SMS Toggle */}

Receive application status updates via SMS

{/* Confirmation Checkbox */}

I confirm the above information is accurate and authorise verification. * {/* Actions */}

{/* Footer Branding */}

); export default ApplicationSubmissionGovernmentFormExample3Demo; ``` Angular: ```html

check_circle Saved 3:14 PM

Eligibility
Personal
3
Documents
4
Submit

Personal information

Please enter your details. We use this to verify your application.

error

3 fields need your attention. Fix them to continue. Jump to error

From Aadhaar · Update via UIDAI open_in_new

Full name

Mobile number

error Mobile number must be 10 digits.

Email address

error Enter a valid email address (e.g. you@example.com).

Aadhaar number *

error Aadhaar must be 12 digits.

State of residence

Your marital status

Single

Divorced or widowed

Married

Single

Divorced or widowed

Married

Brief reason for application (optional)

Annual Income (Lakh ₹) * ₹3.2 Lakh

Receive application status updates via SMS

I confirm the above information is accurate and authorise verification. *

``` ### 4. Card — Form - Success HTML: ```html

done

Application sent!

We will review and contact you within 3 working days.

``` React: ```jsx import React from 'react'; const ApplicationSubmissionGovernmentFormExample4Demo = () => ( <>

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

{/* Navigation Links */}

{/* Actions */}

search

{/* Mobile Menu */}

{/* Card Layout: Purple BG + Centered White Card */}

{/* Success Badge */}

done

{/* Success Heading */}

Application sent!

We will review and contact you within 3 working days.

{/* Actions */}

{/* Footer Branding */}

); export default ApplicationSubmissionGovernmentFormExample4Demo; ``` Angular: ```html

done

Application sent!

We will review and contact you within 3 working days.

``` ### 5. Desktop — Form - Default State HTML: ```html

check_circle Saved 3:14 PM

Eligibility
Personal
3
Documents
4
Submit

Personal information

Please enter your details. We use this to verify your application.

From Aadhaar · Update via UIDAI open_in_new

Full name

Mobile number

Email address

Aadhaar number *

Enter your 12-digit Aadhaar number

State of residence

Your marital status

Single

Divorced or widowed

Married

Single

Divorced or widowed

Married

Brief reason for application (optional)

Annual Income (Lakh ₹) * ₹3.2 Lakh

Receive application status updates via SMS

I confirm the above information is accurate and authorise verification. *

``` React: ```jsx import React from 'react'; const ApplicationSubmissionGovernmentFormExample5Demo = () => ( <>

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

{/* Navigation Links */}

{/* Actions */}

search

{/* Mobile Menu */}

{/* Full Screen Layout */}

{/* Auto-save Status Bar */}

check_circle Saved 3:14 PM

{/* Stepper (from Journey Progress Indicator pattern) */}

Eligibility
Personal
3
Documents
4
Submit

{/* Form Header */}

Personal information

Please enter your details. We use this to verify your application.

{/* Aadhaar Link */} From Aadhaar · Update via UIDAI open_in_new {/* Form Fields */}

{/* Full Name */}

Full name

{/* Mobile Number */}

Mobile number

{/* Email Address */}

Email address

{/* Aadhaar Number */}

Aadhaar number *

Enter your 12-digit Aadhaar number

{/* State of Residence */}

State of residence

{/* Marital Status (Radio Inline) */}

Your marital status

Single

Divorced or widowed

Married

Single

Divorced or widowed

Married

{/* Brief Reason (Textarea) */}

Brief reason for application (optional)

{/* Annual Income Slider */}

Annual Income (Lakh ₹) * ₹3.2 Lakh

{/* SMS Toggle */}

Receive application status updates via SMS

{/* Confirmation Checkbox */}

I confirm the above information is accurate and authorise verification. * {/* Actions */}

{/* Footer Branding */}

); export default ApplicationSubmissionGovernmentFormExample5Demo; ``` Angular: ```html

check_circle Saved 3:14 PM

Eligibility
Personal
3
Documents
4
Submit

Personal information

Please enter your details. We use this to verify your application.

From Aadhaar · Update via UIDAI open_in_new

Full name

Mobile number

Email address

Aadhaar number *

Enter your 12-digit Aadhaar number

State of residence

Your marital status

Single

Divorced or widowed

Married

Single

Divorced or widowed

Married

Brief reason for application (optional)

Annual Income (Lakh ₹) * ₹3.2 Lakh

Receive application status updates via SMS

I confirm the above information is accurate and authorise verification. *

``` ### 6. Desktop — Form - Inline Validation Error HTML: ```html

check_circle Saved 3:14 PM

Eligibility
Personal
3
Documents
4
Submit

Personal information

Please enter your details. We use this to verify your application.

From Aadhaar · Update via UIDAI open_in_new

Full name

Mobile number

Email address

error Enter a valid email address (e.g. you@example.com).

Aadhaar number *

Enter your 12-digit Aadhaar number

State of residence

Your marital status

Single

Divorced or widowed

Married

Single

Divorced or widowed

Married

Brief reason for application (optional)

Annual Income (Lakh ₹) * ₹3.2 Lakh

Receive application status updates via SMS

I confirm the above information is accurate and authorise verification. *

``` React: ```jsx import React from 'react'; const ApplicationSubmissionGovernmentFormExample6Demo = () => ( <>

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

{/* Navigation Links */}

{/* Actions */}

search

{/* Mobile Menu */}

{/* Full Screen Layout */}

{/* Auto-save Status Bar */}

check_circle Saved 3:14 PM

{/* Stepper (from Journey Progress Indicator pattern) */}

Eligibility
Personal
3
Documents
4
Submit

{/* Form Header */}

Personal information

Please enter your details. We use this to verify your application.

{/* Aadhaar Link */} From Aadhaar · Update via UIDAI open_in_new {/* Form Fields */}

{/* Full Name */}

Full name

{/* Mobile Number */}

Mobile number

{/* Email Address - Error State */}

Email address

error Enter a valid email address (e.g. you@example.com).

{/* Aadhaar Number */}

Aadhaar number *

Enter your 12-digit Aadhaar number

{/* State of Residence */}

State of residence

{/* Marital Status (Radio Inline) */}

Your marital status

Single

Divorced or widowed

Married

Single

Divorced or widowed

Married

{/* Brief Reason (Textarea) */}

Brief reason for application (optional)

{/* Annual Income Slider */}

Annual Income (Lakh ₹) * ₹3.2 Lakh

{/* SMS Toggle */}

Receive application status updates via SMS

{/* Confirmation Checkbox */}

I confirm the above information is accurate and authorise verification. * {/* Actions */}

{/* Footer Branding */}

); export default ApplicationSubmissionGovernmentFormExample6Demo; ``` Angular: ```html

check_circle Saved 3:14 PM

Eligibility
Personal
3
Documents
4
Submit

Personal information

Please enter your details. We use this to verify your application.

From Aadhaar · Update via UIDAI open_in_new

Full name

Mobile number

Email address

error Enter a valid email address (e.g. you@example.com).

Aadhaar number *

Enter your 12-digit Aadhaar number

State of residence

Your marital status

Single

Divorced or widowed

Married

Single

Divorced or widowed

Married

Brief reason for application (optional)

Annual Income (Lakh ₹) * ₹3.2 Lakh

Receive application status updates via SMS

I confirm the above information is accurate and authorise verification. *

``` ### 7. Desktop — Form - Submission Error HTML: ```html

check_circle Saved 3:14 PM

Eligibility
Personal
3
Documents
4
Submit

Personal information

Please enter your details. We use this to verify your application.

error

3 fields need your attention. Fix them to continue. Jump to error

From Aadhaar · Update via UIDAI open_in_new

Full name

Mobile number

error Mobile number must be 10 digits.

Email address

error Enter a valid email address (e.g. you@example.com).

Aadhaar number *

error Aadhaar must be 12 digits.

State of residence

Your marital status

Single

Divorced or widowed

Married

Single

Divorced or widowed

Married

Brief reason for application (optional)

Annual Income (Lakh ₹) * ₹3.2 Lakh

Receive application status updates via SMS

I confirm the above information is accurate and authorise verification. *

``` React: ```jsx import React from 'react'; const ApplicationSubmissionGovernmentFormExample7Demo = () => ( <>

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

{/* Navigation Links */}

{/* Actions */}

search

{/* Mobile Menu */}

{/* Full Screen Layout */}

{/* Auto-save Status Bar */}

check_circle Saved 3:14 PM

{/* Stepper (from Journey Progress Indicator pattern) */}

Eligibility
Personal
3
Documents
4
Submit

{/* Form Header */}

Personal information

Please enter your details. We use this to verify your application.

{/* Error Summary Alert */}

error

3 fields need your attention. Fix them to continue. Jump to error

{/* Aadhaar Link */} From Aadhaar · Update via UIDAI open_in_new {/* Form Fields */}

{/* Full Name */}

Full name

{/* Mobile Number - Error State */}

Mobile number

error Mobile number must be 10 digits.

{/* Email Address - Error State */}

Email address

error Enter a valid email address (e.g. you@example.com).

{/* Aadhaar Number - Error State */}

Aadhaar number *

error Aadhaar must be 12 digits.

{/* State of Residence */}

State of residence

{/* Marital Status (Radio Inline) */}

Your marital status

Single

Divorced or widowed

Married

Single

Divorced or widowed

Married

{/* Brief Reason (Textarea) */}

Brief reason for application (optional)

{/* Annual Income Slider */}

Annual Income (Lakh ₹) * ₹3.2 Lakh

{/* SMS Toggle */}

Receive application status updates via SMS

{/* Confirmation Checkbox */}

I confirm the above information is accurate and authorise verification. * {/* Actions */}

{/* Footer Branding */}

); export default ApplicationSubmissionGovernmentFormExample7Demo; ``` Angular: ```html

check_circle Saved 3:14 PM

Eligibility
Personal
3
Documents
4
Submit

Personal information

Please enter your details. We use this to verify your application.

error

3 fields need your attention. Fix them to continue. Jump to error

From Aadhaar · Update via UIDAI open_in_new

Full name

Mobile number

error Mobile number must be 10 digits.

Email address

error Enter a valid email address (e.g. you@example.com).

Aadhaar number *

error Aadhaar must be 12 digits.

State of residence

Your marital status

Single

Divorced or widowed

Married

Single

Divorced or widowed

Married

Brief reason for application (optional)

Annual Income (Lakh ₹) * ₹3.2 Lakh

Receive application status updates via SMS

I confirm the above information is accurate and authorise verification. *

``` ### 8. Desktop — Form - Submission Success HTML: ```html

done

Application sent!

We will review and contact you within 3 working days.

``` React: ```jsx import React from 'react'; const ApplicationSubmissionGovernmentFormExample8Demo = () => ( <>

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

{/* Navigation Links */}

{/* Actions */}

search

{/* Mobile Menu */}

{/* Full Screen Layout */}

{/* Success Badge */}

done

{/* Success Heading */}

Application sent!

We will review and contact you within 3 working days.

{/* Actions */}

{/* Footer Branding */}

); export default ApplicationSubmissionGovernmentFormExample8Demo; ``` Angular: ```html

done

Application sent!

We will review and contact you within 3 working days.

``` ### 9. Desktop Workspace — Form - Default State HTML: ```html

1
Eligibility
Personal
3
Documents
4
Submit

check_circle Saved 3:14 PM

Section 2: Personal Details

Please provide your personal information as required for the certificate.

From Aadhaar · Update via UIDAI open_in_new

Full name

Mobile number

Email address

Aadhaar number

State of residence

Your marital status

Single

Divorced or widowed

Married

Brief reason for application (optional)

Annual Income (Lakh ₹) * ₹0

Receive application status updates via SMS

Accept terms and conditions *

Your personal details are used to verify your identity and ensure the accuracy of the income certificate generated. Linking with Aadhaar ensures government compliance and faster processing.

Aadhaar Card
PAN Card
Income Proof
Address Proof

``` React: ```jsx import React from 'react'; const ApplicationSubmissionGovernmentFormExample9Demo = () => ( <>

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

{/* Navigation Links */}

{/* Actions */}

search

{/* Mobile Menu */}

{/* Full-width Stepper Bar */}

1
Eligibility
Personal
3
Documents
4
Submit

{/* Workspace Content Area */}

{/* Auto-save Status Bar */}

check_circle Saved 3:14 PM

{/* Two Column Layout */}

{/* Left Column: Form */}

{/* Form Header */}

Section 2: Personal Details

Please provide your personal information as required for the certificate.

{/* Aadhaar Link */} From Aadhaar · Update via UIDAI open_in_new {/* Form Fields */}

{/* Full Name */}

Full name

{/* Mobile Number */}

Mobile number

{/* Email Address */}

Email address

{/* Aadhaar Number */}

Aadhaar number

{/* State of Residence */}

State of residence

{/* Marital Status (Radio Inline) */}

Your marital status

Single

Divorced or widowed

Married

{/* Brief Reason (Textarea) */}

Brief reason for application (optional)

{/* Annual Income Slider */}

Annual Income (Lakh ₹) * ₹0

{/* SMS Toggle */}

Receive application status updates via SMS

{/* Confirmation Checkbox */}

Accept terms and conditions *

{/* Right Column: Sidebar */}

Your personal details are used to verify your identity and ensure the accuracy of the income certificate generated. Linking with Aadhaar ensures government compliance and faster processing.

Aadhaar Card
PAN Card
Income Proof
Address Proof

{/* Sticky Footer Action Bar */}

); export default ApplicationSubmissionGovernmentFormExample9Demo; ``` Angular: ```html

1
Eligibility
Personal
3
Documents
4
Submit

check_circle Saved 3:14 PM

Section 2: Personal Details

Please provide your personal information as required for the certificate.

From Aadhaar · Update via UIDAI open_in_new

Full name

Mobile number

Email address

Aadhaar number

State of residence

Your marital status

Single

Divorced or widowed

Married

Brief reason for application (optional)

Annual Income (Lakh ₹) * ₹0

Receive application status updates via SMS

Accept terms and conditions *

Your personal details are used to verify your identity and ensure the accuracy of the income certificate generated. Linking with Aadhaar ensures government compliance and faster processing.

Aadhaar Card
PAN Card
Income Proof
Address Proof

``` ### 10. Desktop Workspace — Form - Inline Error HTML: ```html

1
Eligibility
Personal
3
Documents
4
Submit

check_circle Saved 3:14 PM

Section 2: Personal Details

Please provide your personal information as required for the certificate.

From Aadhaar · Update via UIDAI open_in_new

Full name

Mobile number

Email address

error Enter a valid email address (e.g. you@example.com).

Aadhaar number

State of residence

Your marital status

Single

Divorced or widowed

Married

Brief reason for application (optional)

Annual Income (Lakh ₹) * ₹3.2 Lakh

Receive application status updates via SMS

Accept terms and conditions *

Your personal details are used to verify your identity and ensure the accuracy of the income certificate generated. Linking with Aadhaar ensures government compliance and faster processing.

Aadhaar Card
PAN Card
Income Proof
Address Proof

``` React: ```jsx import React from 'react'; const ApplicationSubmissionGovernmentFormExample10Demo = () => ( <>

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

{/* Navigation Links */}

{/* Actions */}

search

{/* Mobile Menu */}

{/* Full-width Stepper Bar */}

1
Eligibility
Personal
3
Documents
4
Submit

{/* Workspace Content Area */}

{/* Auto-save Status Bar */}

check_circle Saved 3:14 PM

{/* Two Column Layout */}

{/* Left Column: Form */}

{/* Form Header */}

Section 2: Personal Details

Please provide your personal information as required for the certificate.

{/* Aadhaar Link */} From Aadhaar · Update via UIDAI open_in_new {/* Form Fields */}

{/* Full Name */}

Full name

{/* Mobile Number */}

Mobile number

{/* Email Address - Error State */}

Email address

error Enter a valid email address (e.g. you@example.com).

{/* Aadhaar Number */}

Aadhaar number

{/* State of Residence */}

State of residence

{/* Marital Status (Radio Inline) */}

Your marital status

Single

Divorced or widowed

Married

{/* Brief Reason (Textarea) */}

Brief reason for application (optional)

{/* Annual Income Slider */}

Annual Income (Lakh ₹) * ₹3.2 Lakh

{/* SMS Toggle */}

Receive application status updates via SMS

{/* Confirmation Checkbox */}

Accept terms and conditions *

{/* Right Column: Sidebar */}

Your personal details are used to verify your identity and ensure the accuracy of the income certificate generated. Linking with Aadhaar ensures government compliance and faster processing.

Aadhaar Card
PAN Card
Income Proof
Address Proof

{/* Sticky Footer Action Bar */}

); export default ApplicationSubmissionGovernmentFormExample10Demo; ``` Angular: ```html

1
Eligibility
Personal
3
Documents
4
Submit

check_circle Saved 3:14 PM

Section 2: Personal Details

Please provide your personal information as required for the certificate.

From Aadhaar · Update via UIDAI open_in_new

Full name

Mobile number

Email address

error Enter a valid email address (e.g. you@example.com).

Aadhaar number

State of residence

Your marital status

Single

Divorced or widowed

Married

Brief reason for application (optional)

Annual Income (Lakh ₹) * ₹3.2 Lakh

Receive application status updates via SMS

Accept terms and conditions *

Your personal details are used to verify your identity and ensure the accuracy of the income certificate generated. Linking with Aadhaar ensures government compliance and faster processing.

Aadhaar Card
PAN Card
Income Proof
Address Proof

``` ### 11. Desktop Workspace — Form - Submission Error HTML: ```html

1
Eligibility
Personal
3
Documents
4
Submit

check_circle Saved 3:14 PM

Section 2: Personal Details

Please provide your personal information as required for the certificate.

error

3 fields need your attention. Fix them to continue. Jump to first error

From Aadhaar · Update via UIDAI open_in_new

Full name

Mobile number

error Mobile number must be 10 digits.

Email address

error Enter a valid email address (e.g. you@example.com).

Aadhaar number

error Aadhaar must be 12 digits.

State of residence

Your marital status

Single

Divorced or widowed

Married

Brief reason for application (optional)

Annual Income (Lakh ₹) * ₹3.2 Lakh

Receive application status updates via SMS

Accept terms and conditions *

Your personal details are used to verify your identity and ensure the accuracy of the income certificate generated. Linking with Aadhaar ensures government compliance and faster processing.

Aadhaar Card
PAN Card
Income Proof
Address Proof

``` React: ```jsx import React from 'react'; const ApplicationSubmissionGovernmentFormExample11Demo = () => ( <>

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

{/* Navigation Links */}

{/* Actions */}

search

{/* Mobile Menu */}

{/* Full-width Stepper Bar */}

1
Eligibility
Personal
3
Documents
4
Submit

{/* Workspace Content Area */}

{/* Auto-save Status Bar */}

check_circle Saved 3:14 PM

{/* Two Column Layout */}

{/* Left Column: Form */}

{/* Form Header */}

Section 2: Personal Details

Please provide your personal information as required for the certificate.

{/* Error Summary Alert */}

error

3 fields need your attention. Fix them to continue. Jump to first error

{/* Aadhaar Link */} From Aadhaar · Update via UIDAI open_in_new {/* Form Fields */}

{/* Full Name */}

Full name

{/* Mobile Number - Error State */}

Mobile number

error Mobile number must be 10 digits.

{/* Email Address - Error State */}

Email address

error Enter a valid email address (e.g. you@example.com).

{/* Aadhaar Number - Error State */}

Aadhaar number

error Aadhaar must be 12 digits.

{/* State of Residence */}

State of residence

{/* Marital Status (Radio Inline) */}

Your marital status

Single

Divorced or widowed

Married

{/* Brief Reason (Textarea) */}

Brief reason for application (optional)

{/* Annual Income Slider */}

Annual Income (Lakh ₹) * ₹3.2 Lakh

{/* SMS Toggle */}

Receive application status updates via SMS

{/* Confirmation Checkbox */}

Accept terms and conditions *

{/* Right Column: Sidebar */}

Your personal details are used to verify your identity and ensure the accuracy of the income certificate generated. Linking with Aadhaar ensures government compliance and faster processing.

Aadhaar Card
PAN Card
Income Proof
Address Proof

{/* Footer Action Bar */}

); export default ApplicationSubmissionGovernmentFormExample11Demo; ``` Angular: ```html

1
Eligibility
Personal
3
Documents
4
Submit

check_circle Saved 3:14 PM

Section 2: Personal Details

Please provide your personal information as required for the certificate.

error

3 fields need your attention. Fix them to continue. Jump to first error

From Aadhaar · Update via UIDAI open_in_new

Full name

Mobile number

error Mobile number must be 10 digits.

Email address

error Enter a valid email address (e.g. you@example.com).

Aadhaar number

error Aadhaar must be 12 digits.

State of residence

Your marital status

Single

Divorced or widowed

Married

Brief reason for application (optional)

Annual Income (Lakh ₹) * ₹3.2 Lakh

Receive application status updates via SMS

Accept terms and conditions *

Your personal details are used to verify your identity and ensure the accuracy of the income certificate generated. Linking with Aadhaar ensures government compliance and faster processing.

Aadhaar Card
PAN Card
Income Proof
Address Proof

``` ### 12. Desktop Workspace — Form - Success HTML: ```html

1
Eligibility
Personal
Documents
Submit

done

Application sent!

We will review and contact you within 3 working days.

``` React: ```jsx import React from 'react'; const ApplicationSubmissionGovernmentFormExample12Demo = () => ( <>

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

{/* Navigation Links */}

{/* Actions */}

search

{/* Mobile Menu */}

{/* Full-width Stepper Bar */}

1
Eligibility
Personal
Documents
Submit

{/* Workspace Content Area */}

{/* Centered Success Card */}

{/* Success Badge */}

done

{/* Success Heading */}

Application sent!

We will review and contact you within 3 working days.

{/* Actions */}

); export default ApplicationSubmissionGovernmentFormExample12Demo; ``` Angular: ```html

1
Eligibility
Personal
Documents
Submit

done

Application sent!

We will review and contact you within 3 working days.

```

Personal information

Personal information

Personal information

Personal information

Personal information

Personal information

Personal information

Personal information

Personal information

Application sent!

Application sent!

Application sent!

Personal information

Personal information

Personal information

Personal information

Personal information

Personal information

Personal information

Personal information

Personal information

Application sent!

Application sent!

Application sent!

Section 2: Personal Details

Why do we need this?

Documents Checklist

Section 2: Personal Details

Why do we need this?

Documents Checklist

Section 2: Personal Details

Why do we need this?

Documents Checklist

Section 2: Personal Details

Why do we need this?

Documents Checklist

Section 2: Personal Details

Why do we need this?

Documents Checklist

Section 2: Personal Details

Why do we need this?

Documents Checklist

Section 2: Personal Details

Why do we need this?

Documents Checklist

Section 2: Personal Details

Why do we need this?

Documents Checklist

Section 2: Personal Details

Why do we need this?

Documents Checklist

Application sent!

Application sent!

Application sent!