New to Kendo UI for jQuery? Start a free 30-day trial

Steps

configuration

Array of steps to be rendered in the Stepper. If the array contains objects, their fields will be used for each Step. If the array contains strings, those will be used as Step labels.

steps

Array

<nav id="stepper"></nav>

<script>
    $("#stepper").kendoStepper({
        steps: ["Initial step", "Second step", "Third step"]
    });
</script>

<nav id="stepper"></nav>

<script>
    $("#stepper").kendoStepper({
        steps: [{
            label: "Initial step"
        }, {
            label: "Second step"
        },{
            label: "Third step"
        }]
    });
</script>

steps.enabled

Boolean

Defines whether the Step is enabled or not. By default all steps are enabled.

Default: true

<nav id="stepper"></nav>

<script>
    $("#stepper").kendoStepper({
        steps: [{
            label: "Initial step"
        }, {
            label: "Second step",
            enabled: false
        },{
            label: "Third step"
        }]
    });
</script>

steps.error

Boolean

Defines whether the Step is in error state (is invalid). By default all steps are valid.

Default: false

<nav id="stepper"></nav>

<script>
    $("#stepper").kendoStepper({
        steps: [{
            label: "Initial step"
        }, {
            label: "Second step",
            error: true
        },{
            label: "Third step"
        }]
    });
</script>

Defines a name of an existing icon in the Kendo UI theme sprite. The icon will be displayed in the indicator element of that Step. For a list of available icon names, please refer to the Web Font Icons article.

<nav id="stepper"></nav>

<script>
    $("#stepper").kendoStepper({
        steps: [{
            label: "Initial step"
        }, {
            label: "Second step",
            icon: "cancel"
        },{
            label: "Third step"
        }]
    });
</script>

steps.iconTemplate

String|Function

The template used to render the icon in the indicator of the step.

The fields which can be used in the template are:

label String - the label set on the step
icon String - the icon specified for this step (if any)
successIcon String - the successIcon specified for this step (if any)
enabled Boolean - indicates whether the step is enabled (true) or disabled (false)
error Boolean - indicates whether the step has error (true) or not (false)
selected Boolean - indicates whether the step is selected
previous Boolean - indicates whether the step is before the currently selected or not
index Number - a zero-based index of the current step
isFirstStep Boolean - indicates whether the step is the initial one in the Stepper
isLastStep Boolean - indicates whether the step is the last one in the Stepper
indicatorVisible Boolean - indicates whether the indicator, which holds the icon should be displayed or not
labelVisible Boolean - indicates whether the label section of the step should be displayed or not

<nav id="stepper"></nav>

<script>
    $("#stepper").kendoStepper({
        steps: [{
            label: "ONE"
        }, {
            label: "TWO",
            iconTemplate: "<strong>#:label#</strong>"
        },{
            label: "THREE"
        }]
    });
</script>

<nav id="stepper"></nav>

<script>
    $("#stepper").kendoStepper({
        steps: [{
            label: "ONE"
        }, {
            label: "TWO",
            iconTemplate: function(e) {
                return '<strong>' + e.label + '</strong>';
            }
        },{
            label: "THREE"
        }]
    });
</script>

steps.label

String

Defines the label (text) of the Step.

<nav id="stepper"></nav>

<script>
    $("#stepper").kendoStepper({
        steps: [{
            label: "Initial step"
        }, {
            label: "Second step"
        },{
            label: "Third step"
        }]
    });
</script>

steps.selected

Boolean

Defines whether the Step is selected.

Default: false

<nav id="stepper"></nav>

<script>
    $("#stepper").kendoStepper({
        steps: [{
            label: "Initial step"
        }, {
            label: "Second step",
            selected: true
        },{
            label: "Third step"
        }]
    });
</script>

steps.successIcon

String

Defines a name of an existing icon in the Kendo UI theme sprite. The icon will be displayed in the indicator element of that Step, when the step is a previous one and it does not have an error. For a list of available icon names, please refer to the Web Font Icons article.

<nav id="stepper"></nav>

<script>
    $("#stepper").kendoStepper({
        steps: [{
            label: "Initial step"
        }, {
            label: "Second step",
            successIcon: "plus"
        },{
            label: "Third step",
            selected: true
        }]
    });
</script>