Skip to main content

Stepper Component

1. Introduction​

The Stepper component is a user interface element that guides users through a series of steps or stages in a process. It is commonly used in multi-step forms, wizards, or workflows where users need to complete tasks sequentially. The Stepper provides a clear visual representation of progress and allows users to navigate between steps.

Purpose and Use Cases​

  • Purpose: The Stepper component is used to break down complex processes into manageable steps, improving user experience and clarity.
  • Primary Use Cases:
    • Multi-step forms (e.g., registration, checkout, or onboarding).
    • Guided workflows (e.g., setup wizards or tutorials).
    • Progress tracking in applications.

Benefits​

  • Improved Usability: Simplifies complex processes by dividing them into smaller, logical steps.
  • Customizable: Supports extensive styling and configuration options to match the application's design.
  • Interactive: Allows users to navigate between steps and provides visual feedback on progress.
  • Responsive Design: Works seamlessly across desktop, tablet, and mobile devices.

2. Properties​

The Stepper component comes with several configurable properties to suit different use cases. Below is a detailed breakdown:

Code​

  • Description: A unique identifier for the component.
  • Purpose: Used to reference the component programmatically.
  • Required/Optional: Required

Per Step (an array of steps)​

  • Description: Defines the individual steps in the Stepper.
  • Purpose: Allows configuration of each step, including its name, icon, and order.
  • Sub-Properties:
    • Code: A unique identifier for each step.
    • Name: The name or label of the step.
    • Icon: An optional icon to visually represent the step.
    • Arrow: Enables drag-and-drop functionality to reorder steps.
    • Cross: Deletes the step.
    • Chevron: Collapses the step for better visual organization.
  • Required/Optional: Required

Add Step​

  • Description: A button to add a new step to the Stepper.
  • Purpose: Allows users to dynamically add steps to the process.
  • Required/Optional: Optional

Validate Forms on Step Change​

  • Description: Validates the form data when the user navigates between steps.
  • Purpose: Ensures data integrity and prevents users from proceeding with incomplete or invalid inputs.
  • Default: OFF
  • Required/Optional: Optional

3. Style​

The Stepper component offers extensive styling options to ensure it aligns with the application's design. Below are the key styling properties:

Size and Position​

  • Reset: Resets size and position settings to default.
  • Size:
    • Width & Height: Define the Stepper's dimensions.
    • Min Size: Minimum width and height (default: none).
    • Max Size: Maximum width and height (default: none).
  • Position:
    • Alignment: Left, right, top, bottom (default: left, top).
    • X Position: Horizontal offset from the edge.
    • Y Position: Vertical offset from the edge.
  • Z-Index: Specifies the stack order of the Stepper (default: 0).
  • Fixed Position: Locks the Stepper's position on the screen (default: OFF).
  • Hidden: Hides the Stepper from view (default: OFF).

Grid​

  • Reset: Resets grid settings to default.
  • Options:
    • Columns: Number of columns in the grid (default: 12).
    • Column Gap Size: Space between columns, in pixels (default: 20px).
    • Column Color: Color of the grid columns (default: #ffe6e4).
    • Rows: Number of rows in the grid (default: 12).
    • Row Gap Size: Space between rows, in pixels (default: 20px).
    • Row Color: Color of the grid rows (default: #fe645a).
    • Snap: Snap-to-grid spacing, in pixels (default: 10).
    • Show Grid: Toggles the visibility of the grid (default: OFF).

Overflow​

  • Options: Normal, On Hover.
    • Overflow X: Controls horizontal overflow (visible, hidden, scroll, auto, initial, inherit).
    • Overflow Y: Controls vertical overflow (visible, hidden, scroll, auto, initial, inherit).

Border​

  • Reset: Resets border settings to default.
  • Options: Normal, On Hover.
    • Edges: Left, right, top, bottom, or all edges.
    • Type: None, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit (default: none).
    • Color: Hexadecimal color code with a color picker.
    • Width: Border width in pixels.
    • Radius: Corner radius for rounded edges (default: none).

Padding​

  • Reset: Resets padding settings to default.
  • Options: Normal, On Hover.
    • Sides: Left, right, top, bottom, or all edges.
    • Size: Padding size in pixels.

Background​

  • Reset: Resets background settings to default.
  • Normal:
    • Background Color: Hexadecimal color code with a color picker (default: none).
    • Source: Media library or HTTP URL.
    • Attachment: Scroll, fixed, local, initial, inherit.
    • Position: X and Y positions in pixels (default: 0).
    • Repeat: Repeat, repeat-x, repeat-y, no-repeat, initial, inherit.
    • Size: Auto, length, cover, contain, initial, inherit.
    • Origin: Border-box, padding-box, content-box, initial, inherit.
  • On Hover:
    • Same properties as "Normal" but applied when the Stepper is hovered.

Shadow​

  • Reset: Resets shadow settings to default.
  • Options: Normal, On Hover.
    • Color: Hexadecimal color code with a color picker (default: none).
    • Offset X: Horizontal spacing in pixels.
    • Offset Y: Vertical spacing in pixels.
    • Blur Radius: The amount of blur applied to the shadow.
    • Spread Radius: The size of the shadow spread.
    • Inset: Applies the shadow inside the element (default: OFF).

Step Styles​

  • Options:
    • Step Accent Color: Hexadecimal color code with a color picker (default: none).
    • Selected Step Icon Color: Hexadecimal color code with a color picker (default: none).
    • Step Background Color: Hexadecimal color code with a color picker (default: none).
    • Selected Step Accent Color: Hexadecimal color code with a color picker (default: none).
    • Selected Step Background Color: Hexadecimal color code with a color picker (default: none).

4. Best Practices for UI/UX​

When and Why to Use​

  • Use the Stepper component to guide users through multi-step processes.
  • Ideal for workflows, wizards, and progress tracking.

Effective Scenarios​

  • Desktop: Use for detailed workflows or forms with multiple steps.
  • Tablet/Smartphone: Ensure the Stepper is responsive and easy to interact with on smaller screens.

Tips for Optimal Use​

  • Use clear and concise labels for each step.
  • Provide visual feedback for completed and active steps.
  • Validate inputs on step changes to ensure data integrity.

5. Security Considerations​

Potential Risks​

  • State Mismanagement: Ensure the Stepper's state is accurately reflected in the application logic.
  • External Resources: Validate any external resources used for icons or backgrounds.

Best Practices​

  • Use HTTPS for secure communication when transmitting step data.
  • Validate and sanitize all user inputs to prevent injection attacks.
  • Test the Stepper's responsiveness and behavior across different devices and screen sizes.