New to Telerik UI for ASP.NET Core? Start a free 30-day trial

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:

Regular label element:

Razor
 @using Kendo.Mvc.UI

<label>Password strength</label>
@(Html.Kendo().ProgressBar()
      .Name("passStrength")
      .Type(ProgressBarType.Value)
      .Max(9)
      .Animation(false)
    )
Razor
    @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>

Using the dedicated Label property:

Razor
 @using Kendo.Mvc.UI

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

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

Explicitly setting the name of an external label element:

Razor
 @using Kendo.Mvc.UI

<label id="progressBarLabel">Password strength</label>
@(Html.Kendo().ProgressBar()
      .Name("passStrength")
      .Type(ProgressBarType.Value)
      .Max(9)
      .Animation(false)
      .LabelId("progressBarLabel")
    )
Razor
    @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>

Labels

See Also