# Application & Submission / Journey Progress Journey progress indicator showing multi-step application flow with completed, active, and upcoming steps in a column layout with sidebar context. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-application-submission-journey-progress--column ## Pattern variants - Column: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-application-submission-journey-progress--column - Full Screen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-application-submission-journey-progress--full-screen - Card: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-application-submission-journey-progress--card ## When to use this pattern Use Application & Submission / Journey Progress 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 / Journey Progress. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Card — Journey Progress Indicator - Default HTML: ```html

Eligibility
Personal
Documents
4
Submit

Verify your details

Confirm the information below to proceed with your application.

Full name (as per Aadhaar)

Select domain

PAN number

I confirm these details match my official documents. *

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

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

{/* Navigation Links */}

{/* Actions */}

search

{/* Mobile Menu */}

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

{/* Stepper */}

Eligibility
Personal
Documents
4
Submit

{/* Form Header */}

Verify your details

Confirm the information below to proceed with your application.

{/* Form Fields */}

Full name (as per Aadhaar)

Select domain

PAN number

{/* Checkbox */}

I confirm these details match my official documents. * {/* Actions */}

{/* Footer Branding */}

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

Eligibility
Personal
Documents
4
Submit

Verify your details

Confirm the information below to proceed with your application.

Full name (as per Aadhaar)

Select domain

PAN number

I confirm these details match my official documents. *

``` ### 2. Card — Journey Progress Indicator - Resume from Step 3 HTML: ```html

Eligibility
Personal
Documents
4
Submit

error Resuming from Step 3 — your previous answers are pre-filled. Review before continuing.

Verify your details

Confirm the information below to proceed with your application.

Full name (as per Aadhaar)

Select domain

PAN number

I confirm these details match my official documents. *

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

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

{/* Navigation Links */}

{/* Actions */}

search

{/* Mobile Menu */}

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

{/* Stepper */}

Eligibility
Personal
Documents
4
Submit

{/* Resume Alert Banner */}

error Resuming from Step 3 — your previous answers are pre-filled. Review before continuing.

{/* Form Header */}

Verify your details

Confirm the information below to proceed with your application.

{/* Form Fields */}

Full name (as per Aadhaar)

Select domain

PAN number

{/* Checkbox */}

I confirm these details match my official documents. * {/* Actions */}

{/* Footer Branding */}

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

Eligibility
Personal
Documents
4
Submit

error Resuming from Step 3 — your previous answers are pre-filled. Review before continuing.

Verify your details

Confirm the information below to proceed with your application.

Full name (as per Aadhaar)

Select domain

PAN number

I confirm these details match my official documents. *

``` ### 3. Card — Journey Progress Indicator - Error State HTML: ```html

Eligibility
Personal
error
Documents
4
Submit

error

Documents — 1 error found. Jump to the error field to fix it. Jump to error

Verify your details

Confirm the information below to proceed with your application.

Full name (as per Aadhaar)

Select domain

PAN number

error Enter a valid 10-character PAN (e.g. ABCDE1234F).

I confirm these details match my official documents. *

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

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

{/* Navigation Links */}

{/* Actions */}

search

{/* Mobile Menu */}

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

{/* Stepper */}

Eligibility
Personal
error
Documents
4
Submit

{/* Error Alert Banner */}

error

Documents — 1 error found. Jump to the error field to fix it. Jump to error

{/* Form Header */}

Verify your details

Confirm the information below to proceed with your application.

{/* Form Fields */}

Full name (as per Aadhaar)

Select domain

{/* PAN number - Error State */}

PAN number

error Enter a valid 10-character PAN (e.g. ABCDE1234F).

{/* Checkbox */}

I confirm these details match my official documents. * {/* Actions */}

{/* Footer Branding */}

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

Eligibility
Personal
error
Documents
4
Submit

error

Documents — 1 error found. Jump to the error field to fix it. Jump to error

Verify your details

Confirm the information below to proceed with your application.

Full name (as per Aadhaar)

Select domain

PAN number

error Enter a valid 10-character PAN (e.g. ABCDE1234F).

I confirm these details match my official documents. *

``` ### 4. Column — Journey Progress Indicator - Default HTML: ```html

Eligibility
Personal
Documents
4
Submit

Verify your details

Confirm the information below to proceed with your application.

Full name (as per Aadhaar)

Select domain

PAN number

I confirm these details match my official documents. *

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

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

{/* Navigation Links */}

{/* Actions */}

search

{/* Mobile Menu */}

{/* Two Panel Layout */}

{/* Left Panel (Purple Sidebar) */}

INCOME CERTIFICATE

Step 3 of 5 — Documents

Upload your identity and KYC documents. We accept PDF, JPG, or PNG up to 5 MB each.

{/* Decorative rings/circles in background */}

{/* Right Panel (Content) */}

{/* Stepper */}

Eligibility
Personal
Documents
4
Submit

{/* Form Header */}

Verify your details

Confirm the information below to proceed with your application.

{/* Form Fields */}

{/* Full name */}

Full name (as per Aadhaar)

{/* Select domain */}

Select domain

{/* PAN number */}

PAN number

{/* Checkbox */}

I confirm these details match my official documents. * {/* Actions */}

{/* Footer Branding */}

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

Eligibility
Personal
Documents
4
Submit

Verify your details

Confirm the information below to proceed with your application.

Full name (as per Aadhaar)

Select domain

PAN number

I confirm these details match my official documents. *

``` ### 5. Column — Journey Progress - Resume from Step 3 HTML: ```html

Eligibility
Personal
Documents
4
Submit

error Resuming from Step 3 — your previous answers are pre-filled. Review before continuing.

Verify your details

Confirm the information below to proceed with your application.

Full name (as per Aadhaar)

Select domain

PAN number

I confirm these details match my official documents. *

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

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

{/* Navigation Links */}

{/* Actions */}

search

{/* Mobile Menu */}

{/* Two Panel Layout */}

{/* Left Panel (Purple Sidebar) */}

INCOME CERTIFICATE

Step 3 of 5 — Documents

Upload your identity and KYC documents. We accept PDF, JPG, or PNG up to 5 MB each.

{/* Decorative rings/circles in background */}

{/* Right Panel (Content) */}

{/* Stepper */}

Eligibility
Personal
Documents
4
Submit

{/* Resume Alert Banner */}

error Resuming from Step 3 — your previous answers are pre-filled. Review before continuing.

{/* Form Header */}

Verify your details

Confirm the information below to proceed with your application.

{/* Form Fields */}

{/* Full name */}

Full name (as per Aadhaar)

{/* Select domain */}

Select domain

{/* PAN number */}

PAN number

{/* Checkbox */}

I confirm these details match my official documents. * {/* Actions */}

{/* Footer Branding */}

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

Eligibility
Personal
Documents
4
Submit

error Resuming from Step 3 — your previous answers are pre-filled. Review before continuing.

Verify your details

Confirm the information below to proceed with your application.

Full name (as per Aadhaar)

Select domain

PAN number

I confirm these details match my official documents. *

``` ### 6. Column — Journey Progress - Error State HTML: ```html

Eligibility
Personal
error
Documents
4
Submit

error

Documents — 1 error found. Jump to the error field to fix it. Jump to error

Verify your details

Confirm the information below to proceed with your application.

Full name (as per Aadhaar)

Select domain

PAN number

error Enter a valid 10-character PAN (e.g. ABCDE1234F).

I confirm these details match my official documents. *

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

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

{/* Navigation Links */}

{/* Actions */}

search

{/* Mobile Menu */}

{/* Two Panel Layout */}

{/* Left Panel (Purple Sidebar) */}

INCOME CERTIFICATE

Step 3 of 5 — Documents

Upload your identity and KYC documents. We accept PDF, JPG, or PNG up to 5 MB each.

{/* Decorative rings/circles in background */}

{/* Right Panel (Content) */}

{/* Stepper */}

Eligibility
Personal
error
Documents
4
Submit

{/* Error Alert Banner */}

error

Documents — 1 error found. Jump to the error field to fix it. Jump to error

{/* Form Header */}

Verify your details

Confirm the information below to proceed with your application.

{/* Form Fields */}

{/* Full name */}

Full name (as per Aadhaar)

{/* Select domain */}

Select domain

{/* PAN number - Error State */}

PAN number

error Enter a valid 10-character PAN (e.g. ABCDE1234F).

{/* Checkbox */}

I confirm these details match my official documents. * {/* Actions */}

{/* Footer Branding */}

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

Eligibility
Personal
error
Documents
4
Submit

error

Documents — 1 error found. Jump to the error field to fix it. Jump to error

Verify your details

Confirm the information below to proceed with your application.

Full name (as per Aadhaar)

Select domain

PAN number

error Enter a valid 10-character PAN (e.g. ABCDE1234F).

I confirm these details match my official documents. *

``` ### 7. Full Screen — Journey Progress Indicator - Default HTML: ```html

Eligibility
Personal
Documents
4
Submit

Verify your details

Confirm the information below to proceed with your application.

Full name (as per Aadhaar)

Select domain

PAN number

I confirm these details match my official documents. *

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

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

{/* Navigation Links */}

{/* Actions */}

search

{/* Mobile Menu */}

{/* Full Screen Layout */}

{/* Stepper */}

Eligibility
Personal
Documents
4
Submit

{/* Form Header */}

Verify your details

Confirm the information below to proceed with your application.

{/* Form Fields */}

Full name (as per Aadhaar)

Select domain

PAN number

{/* Checkbox */}

I confirm these details match my official documents. * {/* Actions */}

{/* Footer Branding */}

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

Eligibility
Personal
Documents
4
Submit

Verify your details

Confirm the information below to proceed with your application.

Full name (as per Aadhaar)

Select domain

PAN number

I confirm these details match my official documents. *

``` ### 8. Full Screen — Journey Progress Indicator - Resume from Step 3 HTML: ```html

Eligibility
Personal
Documents
4
Submit

error Resuming from Step 3 — your previous answers are pre-filled. Review before continuing.

Verify your details

Confirm the information below to proceed with your application.

Full name (as per Aadhaar)

Select domain

PAN number

I confirm these details match my official documents. *

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

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

{/* Navigation Links */}

{/* Actions */}

search

{/* Mobile Menu */}

{/* Full Screen Layout */}

{/* Stepper */}

Eligibility
Personal
Documents
4
Submit

{/* Resume Alert Banner */}

error Resuming from Step 3 — your previous answers are pre-filled. Review before continuing.

{/* Form Header */}

Verify your details

Confirm the information below to proceed with your application.

{/* Form Fields */}

Full name (as per Aadhaar)

Select domain

PAN number

{/* Checkbox */}

I confirm these details match my official documents. * {/* Actions */}

{/* Footer Branding */}

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

Eligibility
Personal
Documents
4
Submit

error Resuming from Step 3 — your previous answers are pre-filled. Review before continuing.

Verify your details

Confirm the information below to proceed with your application.

Full name (as per Aadhaar)

Select domain

PAN number

I confirm these details match my official documents. *

``` ### 9. Full Screen — Journey Progress Indicator - Error State HTML: ```html

Eligibility
Personal
error
Documents
4
Submit

error

Documents — 1 error found. Jump to the error field to fix it. Jump to error

Verify your details

Confirm the information below to proceed with your application.

Full name (as per Aadhaar)

Select domain

PAN number

error Enter a valid 10-character PAN (e.g. ABCDE1234F).

I confirm these details match my official documents. *

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

{/* Accessibility Bar */}

{/* Logo & Brand */}

Title Description

{/* Desktop Navigation & Actions */}

{/* Navigation Links */}

{/* Actions */}

search

{/* Mobile Menu */}

{/* Full Screen Layout */}

{/* Stepper */}

Eligibility
Personal
error
Documents
4
Submit

{/* Error Alert Banner */}

error

Documents — 1 error found. Jump to the error field to fix it. Jump to error

{/* Form Header */}

Verify your details

Confirm the information below to proceed with your application.

{/* Form Fields */}

Full name (as per Aadhaar)

Select domain

{/* PAN number - Error State */}

PAN number

error Enter a valid 10-character PAN (e.g. ABCDE1234F).

{/* Checkbox */}

I confirm these details match my official documents. * {/* Actions */}

{/* Footer Branding */}

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

Eligibility
Personal
error
Documents
4
Submit

error

Documents — 1 error found. Jump to the error field to fix it. Jump to error

Verify your details

Confirm the information below to proceed with your application.

Full name (as per Aadhaar)

Select domain

PAN number

error Enter a valid 10-character PAN (e.g. ABCDE1234F).

I confirm these details match my official documents. *

```