# Stepper Stepper visually represents a multi-step process, guiding users through a sequence of actions. It enhances usability by breaking down complex workflows into manageable steps. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-stepper--stepper-horizontal ## Variants documented in Storybook - Stepper Horizontal: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-stepper--stepper-horizontal - Stepper Vertical: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-stepper--stepper-vertical - Stepper Compact: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-stepper--stepper-compact ## 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 Stepper. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Compact — Top actions HTML: ```html
Step 1 of 12 Step label Description
``` React: ```jsx import React from 'react'; const StepperExample1Demo = () => ( <>
{/* Track & Top Actions */}
{/* Content */}
Step 1 of 12 Step label Description
); export default StepperExample1Demo; ``` Angular: ```html
Step 1 of 12 Step label Description
``` ### 2. Compact — Split content HTML: ```html
Step 1 of 12
Step label Description
``` React: ```jsx import React from 'react'; const StepperExample2Demo = () => ( <>
{/* Track & Top Actions */}
{/* Content */}
Step 1 of 12
Step label Description
); export default StepperExample2Demo; ``` Angular: ```html
Step 1 of 12
Step label Description
``` ### 3. Compact — Actions between HTML: ```html
Step 1 of 12
Step label Description
``` React: ```jsx import React from 'react'; const StepperExample3Demo = () => ( <>
Step 1 of 12
Step label Description
); export default StepperExample3Demo; ``` Angular: ```html
Step 1 of 12
Step label Description
``` ### 4. Compact — Centered actions HTML: ```html
Step 1 of 12
Step label Description
``` React: ```jsx import React from 'react'; const StepperExample4Demo = () => ( <>
Step 1 of 12
Step label Description
); export default StepperExample4Demo; ``` Angular: ```html
Step 1 of 12
Step label Description
``` ### 5. Compact — Bottom actions HTML: ```html
Step label Description
Step 1 of 12
``` React: ```jsx import React from 'react'; const StepperExample5Demo = () => ( <>
{/* Align bottom to ensure buttons rest perfectly on baseline */}
Step label Description
Step 1 of 12
); export default StepperExample5Demo; ``` Angular: ```html
Step label Description
Step 1 of 12
``` ### 6. Horizontal — Small HTML: ```html ``` React: ```jsx import React from 'react'; const StepperExample6Demo = () => ( <> ); export default StepperExample6Demo; ``` Angular: ```html ``` ### 7. Horizontal — No label HTML: ```html ``` React: ```jsx import React from 'react'; const StepperExample7Demo = () => ( <> ); export default StepperExample7Demo; ``` Angular: ```html ``` ### 8. Horizontal — Default HTML: ```html ``` React: ```jsx import React from 'react'; const StepperExample8Demo = () => ( <> ); export default StepperExample8Demo; ``` Angular: ```html ``` ### 9. Horizontal — Center line HTML: ```html ``` React: ```jsx import React from 'react'; const StepperExample9Demo = () => ( <> ); export default StepperExample9Demo; ``` Angular: ```html ``` ### 10. Horizontal — Left line HTML: ```html ``` React: ```jsx import React from 'react'; const StepperExample10Demo = () => ( <> ); export default StepperExample10Demo; ``` Angular: ```html ``` ### 11. Horizontal — Center bottom line HTML: ```html ``` React: ```jsx import React from 'react'; const StepperExample11Demo = () => ( <> ); export default StepperExample11Demo; ``` Angular: ```html ``` ### 12. Horizontal — Filled center bottom line HTML: ```html ``` React: ```jsx import React from 'react'; const StepperExample12Demo = () => ( <> ); export default StepperExample12Demo; ``` Angular: ```html ``` ### 13. Introduction — Introduction HTML: ```html
Components

Stepper

Stepper visually represents a multi-step process, guiding users through a sequence of actions. It enhances usability by breaking down complex workflows into manageable steps.

Stepper Showcase

A focused view of the Horizontal, Vertical, and Compact Stepper families.

Stepper Horizontal

  • 1
    Label Write description here Completed
  • 2
    Label Write description here Inprogress
  • 3
    Label Write description here Label
  • 4
    Label Write description here Label

Stepper Vertical

  • 1
    Label Write description here Completed
  • 2
    Label Write description here In progress
  • 3
    Label Write description here Label
  • 4
    Label Write description here Label
  • 1
    Label Write description here Completed
  • 2
    Label Write description here In progress
  • 3
    Label Write description here Label
  • 4
    Label Write description here Label

Stepper Compact

Step 1 of 12 Step label Description

CSS Class Reference

Quickly copy the classes used by the showcased Stepper variants.

Layout Classes

Main stepper wrapper ux4g-stepper
Horizontal layout ux4g-stepper-horizontal
Vertical layout ux4g-stepper-vertical
Small horizontal size ux4g-stepper-small
Small vertical size ux4g-stepper-s

State Classes

Completed step connector state ux4g-stepper-done
Completed step styling ux4g-stepper-completed
Pending step styling ux4g-stepper-step-pending
Warning icon treatment ux4g-stepper-warning-icon
Filled bottom line progress ux4g-stepper-bottom-line-fill

Compact Classes

Compact progress wrapper ux4g-stepper-progress
Segmented progress track ux4g-stepper-progress-track
Previous or next action ux4g-stepper-progress-btn
``` React: ```jsx import React from 'react'; const StepperExample13Demo = () => ( <>
Components

Stepper

Stepper visually represents a multi-step process, guiding users through a sequence of actions. It enhances usability by breaking down complex workflows into manageable steps.

Stepper Showcase

A focused view of the Horizontal, Vertical, and Compact Stepper families.

Stepper Horizontal

  • 1
    Label Write description here Completed
  • 2
    Label Write description here Inprogress
  • 3
    Label Write description here Label
  • 4
    Label Write description here Label

Stepper Vertical

{/* Medium Outline */}
  • 1
    Label Write description here Completed
  • 2
    Label Write description here In progress
  • 3
    Label Write description here Label
  • 4
    Label Write description here Label
{/* Small Outline! Notice we just add ux4g-stepper-s */}
  • 1
    Label Write description here Completed
  • 2
    Label Write description here In progress
  • 3
    Label Write description here Label
  • 4
    Label Write description here Label

Stepper Compact

{/* Variant: Stepper - Pagination Progress */}
Step 1 of 12 Step label Description

CSS Class Reference

Quickly copy the classes used by the showcased Stepper variants.

Layout Classes

Main stepper wrapper ux4g-stepper
Horizontal layout ux4g-stepper-horizontal
Vertical layout ux4g-stepper-vertical
Small horizontal size ux4g-stepper-small
Small vertical size ux4g-stepper-s

State Classes

Completed step connector state ux4g-stepper-done
Completed step styling ux4g-stepper-completed
Pending step styling ux4g-stepper-step-pending
Warning icon treatment ux4g-stepper-warning-icon
Filled bottom line progress ux4g-stepper-bottom-line-fill

Compact Classes

Compact progress wrapper ux4g-stepper-progress
Segmented progress track ux4g-stepper-progress-track
Previous or next action ux4g-stepper-progress-btn
); export default StepperExample13Demo; ``` Angular: ```html
Components

Stepper

Stepper visually represents a multi-step process, guiding users through a sequence of actions. It enhances usability by breaking down complex workflows into manageable steps.

Stepper Showcase

A focused view of the Horizontal, Vertical, and Compact Stepper families.

Stepper Horizontal

  • 1
    Label Write description here Completed
  • 2
    Label Write description here Inprogress
  • 3
    Label Write description here Label
  • 4
    Label Write description here Label

Stepper Vertical

  • 1
    Label Write description here Completed
  • 2
    Label Write description here In progress
  • 3
    Label Write description here Label
  • 4
    Label Write description here Label
  • 1
    Label Write description here Completed
  • 2
    Label Write description here In progress
  • 3
    Label Write description here Label
  • 4
    Label Write description here Label

Stepper Compact

Step 1 of 12 Step label Description

CSS Class Reference

Quickly copy the classes used by the showcased Stepper variants.

Layout Classes

Main stepper wrapper ux4g-stepper
Horizontal layout ux4g-stepper-horizontal
Vertical layout ux4g-stepper-vertical
Small horizontal size ux4g-stepper-small
Small vertical size ux4g-stepper-s

State Classes

Completed step connector state ux4g-stepper-done
Completed step styling ux4g-stepper-completed
Pending step styling ux4g-stepper-step-pending
Warning icon treatment ux4g-stepper-warning-icon
Filled bottom line progress ux4g-stepper-bottom-line-fill

Compact Classes

Compact progress wrapper ux4g-stepper-progress
Segmented progress track ux4g-stepper-progress-track
Previous or next action ux4g-stepper-progress-btn
``` ### 14. Vertical — Label HTML: ```html
``` React: ```jsx import React from 'react'; const StepperExample14Demo = () => ( <>
{/* Medium Outline */} {/* Small Outline! Notice we just add ux4g-stepper-s */}
); export default StepperExample14Demo; ``` Angular: ```html
``` ### 15. Vertical — Label and description HTML: ```html
``` React: ```jsx import React from 'react'; const StepperExample15Demo = () => ( <>
{/* Medium Outline */} {/* Small Outline! Notice we just add ux4g-stepper-s */}
); export default StepperExample15Demo; ``` Angular: ```html
``` ### 16. Vertical — Label, description and status HTML: ```html
``` React: ```jsx import React from 'react'; const StepperExample16Demo = () => ( <>
{/* Medium Outline */} {/* Small Outline! Notice we just add ux4g-stepper-s */}
); export default StepperExample16Demo; ``` 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.