mtz-wizard | Vaadin

All of the elements required to implement a stepper controlled series of forms that support lazy-loading steps upon activation as well as validation and bulk submission tasks.

[ This description is mirrored from at on 2019-05-10 ]

Build Status Published on


Generates a wizard flow from steps provided. Allows for validation across all steps.

<mtz-wizard-stepper steps="[[steps]]" selected="{{selected}}"></mtz-wizard-stepper>
<mtz-wizard id="wizard" steps="{{steps}}" selected="{{selected}}">
  <mtz-wizard-step name="step-1" label="Select campaign settings">
    Step 1 - Prebuilt step
  <div wizard-step name="step-2" label="Create ad" invalid>
    Step 2 - Generic div using attribute w/ invalid styling applied
  <mtz-wizard-step name="step-3" label="Preview ad" optional>
    <iron-form wizard-form>
          <input required type="number" name="age" />

Install the Polymer-CLI

First, make sure you have the Polymer CLI installed. Then run polymer install --variants to install all dependencies for both 1.x and 2.x (mainline)

Viewing Your Element

$ polymer serve

Running Tests

$ polymer test

Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.


Link to this version
ImportedReleased 01 November 2017Other
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
Release notes - Version 0.3.0


Polymer/polymer#^1.9 || ^2.0

  • PolymerElements/iron-form#^2.0
  • PolymerElements/iron-icon#^1.0 || ^2.0
  • PolymerElements/iron-icons#^1.0 || ^2.0
  • PolymerElements/iron-pages#^1.0 || ^2.0
  • PolymerElements/paper-ripple#^1.0 || ^2.0