Label Component

The Label component renders text on the page. By default it renders as a <span>, matching the behavior of the ASP.NET Web Forms Label control.

Basic Label

<Label Text="Hello World" />

---

Styled Label

<Label Text="Styled Label"
       CssClass="text-primary"
       ForeColor="WebColor.Blue"
       Font-Bold="true" />

---

Label with HTML

<Label Text="&lt;em&gt;Emphasized&lt;/em&gt;" />

---

AssociatedControlID — Accessible Form Label

When you set AssociatedControlID, the Label renders as a <label for="..."> element instead of a <span>. This associates the label with a form input for accessibility — clicking the label focuses the input, and screen readers announce the relationship.

<Label Text="Email Address:" AssociatedControlID="emailInput" CssClass="form-label" />
<TextBox id="emailInput" TextMode="TextBoxMode.Email"
         Placeholder="you@example.com" CssClass="form-control" />

<Label Text="Full Name:" AssociatedControlID="nameInput" CssClass="form-label" />
<TextBox id="nameInput" Placeholder="Enter your full name" CssClass="form-control" />