Labels

Labels and text description overall is beneficial for the users to better grasp the application functionality.

You can display informative labels for the ProgressBar using one of these options:

1. Regular label element:

 @using Kendo.Mvc.UI

<label>Password strength</label>
@(Html.Kendo().ProgressBar()
      .Name("passStrength")
      .Type(ProgressBarType.Value)
      .Max(9)
      .Animation(false)
    )

    @addTagHelper *, Kendo.Mvc

     <label>Password strength</label>
      <kendo-progressbar enable="true" max="9" reverse="false" show-    status="true"  type="ProgressBarType.Value" name="passStrength">
      </kendo-progressbar>

1. Using the dedicated Label property:

 @using Kendo.Mvc.UI

@(Html.Kendo().ProgressBar()
      .Name("passStrength")
      .Type(ProgressBarType.Value)
      .Max(9)
      .Animation(false)
      .Label("Password Strength")
    )

    @addTagHelper *, Kendo.Mvc

      <kendo-progressbar enable="true" max="9" reverse="false" show-    status="true"  type="ProgressBarType.Value" name="passStrength"
      label="Password Strength">
      </kendo-progressbar>

1. Explicitly setting the name of an external label element:

 @using Kendo.Mvc.UI

<label id="progressBarLabel">Password strength</label>
@(Html.Kendo().ProgressBar()
      .Name("passStrength")
      .Type(ProgressBarType.Value)
      .Max(9)
      .Animation(false)
      .LabelId("progressBarLabel")
    )

    @addTagHelper *, Kendo.Mvc

     <label id="progressBarLabel">Password strength</label>
      <kendo-progressbar enable="true" max="9" reverse="false" show-    status="true"  type="ProgressBarType.Value" name="passStrength"
      label-id="progressBarLabel">
      </kendo-progressbar>

See Also

• Custom Label of the ProgressBar for ASP.NET Core (Demo)
• Server-Side API of the ProgressBar
• Client-Side API of the ProgressBar