Stepper

TkStepper component for managing a series of steps.

React
Vue
Angular

import { TkStepper, TkStep } from '@takeoff-ui/react'

import { TkStepper, TkStep } from '@takeoff-ui/vue'

import { TkStepper, TkStep } from '@takeoff-ui/angular'

Step Mode

Stepper component supports different step modes: basic and number. Control this with the stepMode property.

View Code

React
Vue
Angular

Linear Mode

Enable linear progression mode to ensure users can only navigate to the next step or previous steps, but cannot skip ahead. Control this with the linear property.

In linear mode, steps must be completed in sequence

View Code

React
Vue
Angular

Controlled Stepper

The stepper component can be controlled externally using the controlled component pattern. Set the active step with the active prop and listen for step changes with the tkStepChange event.

This example demonstrates a controlled stepper component used with a multi-step form. The active step is controlled by the parent component's state.

Personal Information

View Code

React
Vue
Angular

Custom Icons

Icons throughout the stepper can be customized. Each step can have its own icon, or you can set global icon styles using properties like completeIcon, errorIcon, etc.

Icon Configuration

The stepper component accepts both simple string icons and complex icon configuration objects. For advanced customization, you can use:

icon={{
  name: "apps",
  style: "rounded",
  fill: true,
  color: "#00796B"
}}

View Code

React
Vue
Angular

Style Customization

The stepper component offers three style props for visual customization: containerStyle, contentStyle, and signStyle. Each targets a specific part of the component.

Container Style

Use containerStyle to customize the main container of the stepper component.

Content Style

Use contentStyle to customize the content area (header and subheader) of each step.

Sign Style & Custom Icons

Use signStyle on the Stepper component for global styling of step indicators, and icon props on both levels for customization.

View Code

React
Vue
Angular

// Container Style Example
<TkStepper
  containerStyle={{
    backgroundColor: "var(--neutral-50)",
    padding: "20px",
    borderRadius: "12px",
    border: "1px solid var(--neutral-200)",
    boxShadow: "0 4px 6px var(--alpha-neutral-neutral-500-8)"
  }}
>
  <TkStep header="Step 1" subheader="Container styling" complete />
  <TkStep header="Step 2" subheader="Custom background" isActive />
  <TkStep header="Step 3" subheader="With borders" />
</TkStepper>
 
// Content Style Example
<TkStepper
  contentStyle={{
    backgroundColor: "var(--neutral-0)",
    padding: "8px 10px",
    borderRadius: "8px",
    borderLeft: "2px solid var(--primary-base)",
    boxShadow: "0 2px 4px var(--alpha-neutral-neutral-500-4)",
    display: "flex",
    flexDirection: "column",
    justifyContent: "center"
  }}
>
  <TkStep header="Step 1" subheader="Content styling" complete />
  <TkStep header="Step 2" subheader="Custom content borders" isActive />
  <TkStep header="Step 3" subheader="With shadows" />
</TkStepper>
 
// Sign Style & Custom Icons Example
<TkStepper
  signStyle={{
    backgroundColor: "var(--primary-50)",
    border: "2px solid var(--primary-300)",
    borderRadius: "8px"
  }}
  // Global icons applied to all steps unless overridden
  completeIcon={{
    name: "check_circle",
    style: 'rounded',
    fill: true,
    color: "var(--primary-base)"
  }}
  activeIcon={{
    name: "radio_button_checked",
    style: 'rounded',
    fill: true,
    color: "var(--primary-base)"
  }}
  inactiveIcon={{
    name: "radio_button_unchecked",
    style: 'rounded',
    fill: false,
    color: "var(--red-200)"
  }}
>
  <TkStep header="Step 1" subheader="Global sign style" complete />
  <TkStep header="Step 2" subheader="Global icons" isActive />
  <TkStep 
    header="Step 3" 
    subheader="Step-specific icon" 
    error
    errorIcon={{
      name: "warning",
      style: 'rounded',
      fill: true,
      color: "var(--red-500)"
    }}
  />
</TkStepper>

<!-- Container Style Example -->
<tk-stepper
  :containerStyle.prop="{
    backgroundColor: 'var(--neutral-50)',
    padding: '20px',
    borderRadius: '12px',
    border: '1px solid var(--neutral-200)',
    boxShadow: '0 4px 6px var(--alpha-neutral-neutral-500-8)'
  }"
>
  <tk-step header="Step 1" subheader="Container styling" complete />
  <tk-step header="Step 2" subheader="Custom background" :is-active="true" />
  <tk-step header="Step 3" subheader="With borders" />
</tk-stepper>
 
<!-- Content Style Example -->
<tk-stepper
  :contentStyle.prop="{
    backgroundColor: 'var(--neutral-0)',
    padding: '8px 10px',
    borderRadius: '8px',
    borderLeft: '2px solid var(--primary-base)',
    boxShadow: '0 2px 4px var(--alpha-neutral-neutral-500-4)',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center'
  }"
>
  <tk-step header="Step 1" subheader="Content styling" complete />
  <tk-step header="Step 2" subheader="Custom content borders" :is-active="true" />
  <tk-step header="Step 3" subheader="With shadows" />
</tk-stepper>
 
<!-- Sign Style & Custom Icons Example -->
<tk-stepper
  :signStyle.prop="{
    backgroundColor: 'var(--primary-50)',
    border: '2px solid var(--primary-300)',
    borderRadius: '8px'
  }"
  <!-- Global icons applied to all steps unless overridden -->
  :completeIcon.prop="{
    name: 'check_circle',
    style: 'rounded',
    fill: true,
    color: 'var(--primary-base)'
  }"
  :activeIcon.prop="{
    name: 'radio_button_checked',
    style: 'rounded',
    fill: true,
    color: 'var(--primary-base)'
  }"
  :inactiveIcon.prop="{
    name: 'radio_button_unchecked',
    style: 'rounded',
    fill: false,
    color: 'var(--red-200)'
  }"
>
  <tk-step header="Step 1" subheader="Global sign style" complete />
  <tk-step header="Step 2" subheader="Global icons" :is-active="true" />
  <tk-step 
    header="Step 3" 
    subheader="Step-specific icon" 
    error
    :error-icon="{
      name: 'warning',
      style: 'rounded',
      fill: true,
      color: 'var(--red-500)'
    }"
  />
</tk-stepper>

Orientation

Stepper component provides both horizontal and vertical orientations via the orientation property.

View Code

React
Vue
Angular

Step API

Props

Type	Default	Description
`IIconOptions, string`	null	Specifies a material icon or icon options for active steps.
`boolean`	false	Indicates if the step has been completed.
`IIconOptions, string`	null	Specifies a material icon or icon options for completed steps.
`boolean`	false	Indicates if the step is disabled (cannot be selected or interacted with).
`boolean`	false	Indicates if the step has encountered an error.
`IIconOptions, string`	null	Specifies a material icon or icon options for error steps.
`string`	null	The header text to be displayed for the step.
`IIconOptions, string`	null	Icon to be displayed for the step. Can be either a string (icon name) or an IIconOptions object.
`IIconOptions, string`	null	Specifies a material icon or icon options for inactive steps.
`number`	null	The index of the step in the stepper.
`boolean`	false	Indicates if the step is currently active.
`boolean`	true	Whether the step is clickable.
`"flip", "non-flip"`	'non-flip'	Controls the label position of the step.
`"basic", "number"`	'basic'	Controls the step mode of the stepper component.
`string`	null	Optional subheader text to provide additional context for the step.

Interfaces

interface IStepClickDetail {
  index: number;
  status: 'completed' | 'active' | 'inactive' | 'error' | 'disabled';
}

Stepper API

Props

Type	Default	Description
`number`	0	Currently active step index
`IIconOptions, string`	null	Specifies a material icon or icon options for active steps.
`IIconOptions, string`	null	Specifies a material icon or icon options for completed steps.
`any`	null	The style attribute of container element
`any`	null	The style attribute of content elements
`boolean`	false	Controls if the tabs component is controlled.
`IIconOptions, string`	null	Specifies a material icon or icon options for error steps.
`IIconOptions, string`	null	Specifies a material icon or icon options for inactive steps.
`boolean`	false	Whether the steps follow a linear progression (can only navigate to the next step when current step is completed).
`"horizontal", "vertical"`	'horizontal'	Controls the orientation of the stepper component.
`boolean`	true	Whether to show completed steps with the complete state. If false, completed steps will appear as just passed and not with complete styling.
`any`	null	The style attribute of step sign elements
`"basic", "number"`	'basic'	Controls the step mode of the stepper component.

Events

Name	Description
tk-step-change	Emitted when the active step changes.
tk-step-click	Emitted when a step is clicked.

Methods

Name	Description
setActive	Sets the active step index.

Interfaces

interface IStepClickDetail {
  index: number;
  status: 'completed' | 'active' | 'inactive' | 'error' | 'disabled';
}

Step Mode​

Linear Mode​

Controlled Stepper​

Personal Information

Custom Icons​

Icon Configuration

Style Customization​

Container Style

Content Style

Sign Style & Custom Icons

Orientation​

Step API​

Props​

Interfaces​

Stepper API​

Props​

Events​

Methods​

Interfaces​

Step Mode

Linear Mode

Controlled Stepper

Custom Icons

Style Customization

Orientation

Step API

Props

Interfaces

Stepper API

Props

Events

Methods

Interfaces