Label

<div class="flex items-center gap-3">
    <sa-input type="checkbox" id="label-intro-terms"/>
    <sa-label for="label-intro-terms">Accept terms and conditions</sa-label>
</div>

Usage

<sa-label for="...">...</sa-label>

<sa-label> renders a styled <label> element. Associate it with a control by setting for to the control's id, or nest the control inside the label. Clicking the label then focuses or toggles the control, and assistive technology announces the label as the control's name.

Most of the time you will not write labels by hand: every StellarAdmin input control (such as sa-input, sa-select or sa-textarea) renders its own label when you give it a label attribute or bind it with asp-for, and inside a Field you should use sa-field-label, which participates in the field's layout. Use <sa-label> for the remaining cases: a standalone control that does not use those mechanisms, or a caption for something that is not a form control.

Examples

Model binding

With asp-for, the label text is taken from the bound property: the [Display(Name = ...)] attribute when present, otherwise the property name. The for attribute is generated to match the id the framework assigns to the bound input. Any child content you supply replaces the generated text.

<div class="grid gap-2">
    <sa-label asp-for="TravellerName"/>
    <sa-input asp-for="TravellerName" render-field="false"/>
</div>

With field

Inside a <sa-field>, use <sa-field-label> rather than <sa-label>. It renders the same <label> element but is marked as the field's label, so horizontal and other field layouts can position it correctly.

<sa-field>
    <sa-field-label for="label-with-field-email">Email</sa-field-label>
    <sa-input type="email" id="label-with-field-email" placeholder="ibn@voyager.travel"/>
    <sa-field-description>We only use this address for booking confirmations.</sa-field-description>
</sa-field>

API Reference

<sa-label>

The <sa-label> tag helper renders a <label> element. Any standard <label> attributes you supply (such as for or class) are forwarded to the rendered element.