background

Kendo UI for Vue

Vue Stepper

  • Show the progress of a user-oriented process in your Angular apps as a chronological order of steps. Often used in complex forms and surveys.
  • Part of the Kendo UI for Vue library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
Stepper
  • Overview

    The Vue Stepper component visualizes the progress of a process by dividing it into chronological steps. The Vue Stepper provides several features out of the box, including the ability to define the appearance of each step, validation of content at each step, strict linear flow and templates.

    See the Vue Stepper demo

    vue-stepper-component-overview
  • Steps Layout

    The Vue Stepper gives you a variety of layouts that you set with a combination of properties:

    • Simple steps: If you don’t set layout properties, the component will default to numbers in sequence order.
    • Steps with labels: If you only set a label property the steps will render numerically with labels below them.
    • Steps with custom text: If you set the text property, each step will use your assigned value.
    • Steps with icons: If you specify an image or icon, that will be used in place of text.
    • Steps with icons and labels: Setting image and label properties will render this scenario.
    • Labels only: Setting only the label property will set the step text as the label.

    See the Vue Stepper Layout demo

    layouts-vie-stepper-component
  • Step Types

    The Vue Stepper comes with Various types of steps built in. Some of which include disabled, optional, and steps with validation.

    See the Vue Stepper Types demo

  • Linear Mode

    You can choose to require the user to complete the steps in visual order or not. This is done simply by setting the “linear” property.

    See the Vue Linear Stepper demo          

    linear-vue-stepper-component
  • Orientation

    Fit the Vue Stepper into your layout by choosing horizontal (default) or vertical display.

    See the Vue Stepper Orientation demo

    stepper-orientation
  • Validation

    The Vue Stepper enables you to set validation logic for each step. Based on it, a success or error icon will be rendered. Validation icons are rendered either in the step indicator or as part of the step label, depending on the current Stepper configuration options.

    See the Vue Stepper Validation demo

  • Custom Rendering

    In addition to the large list of built-in configurations, the Vue Stepper allows you to apply your own rendering to the steps.

    See the Vue Stepper Custom Rendering demo

  • Keyboard Navigation

    For users who prefer to use the keyboard or cannot use a mouse, this component fully supports keyboard interactions. See the demo for a complete list of supported shortcuts.

    See the Vue Stepper Keyboard Navigation demo

    Keyboard Navigation
  • Accessibility

    Like the rest of Kendo UI, the Vue Stepper is fully accessible to help you build software for everyone. It provides full WAI-ARIA support as well as Section 508 compliance.

    Read the Vue Stepper Accessibility documentation

    Accessibility
Next Steps

Get Started with Kendo UI for Vue

Kendo UI for Vue - Kendoka