Stepper KIT

    
      
    

      
        Copy
      
      
    
  

    
      <tui-stepper [activeItemIndex]="1">
    <button
        stepState="pass"
        tuiStep
    >
        Finished step
    </button>
    <button tuiStep>Simple step</button>
    <button
        stepState="error"
        tuiStep
    >
        Error step
    </button>
    <button
        disabled
        tuiStep
    >
        Disabled step
    </button>
    <button
        icon="@tui.clock"
        tuiStep
    >
        Step with an icon
    </button>
</tui-stepper>

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <tui-stepper
    orientation="vertical"
    [activeItemIndex]="1"
>
    @for (step of steps; track step) {
        <button tuiStep>
            {{ step }}
        </button>
    }
</tui-stepper>

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <tui-stepper
    orientation="vertical"
    class="stepper"
    [activeItemIndex]="5"
>
    @for (step of steps; track step) {
        <button tuiStep>
            {{ step }}
        </button>
    }
</tui-stepper>

    

      
        Copy
      
      
    
  

    
      .stepper {
    max-block-size: 10rem;
    border: 1px solid var(--tui-border-normal);
}

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <tui-stepper
    orientation="vertical"
    tuiConnected
    [activeItemIndex]="1"
>
    @for (step of steps; track step) {
        <button tuiStep>
            {{ step }}
        </button>
    }
</tui-stepper>

    

      
        Copy