LgLabel

LgLabel displays a label (<label>) whose text goes through the translation dictionary (keys #MyKey). It can be associated with a field via the For attribute and carry a tooltip.

<LgLabel Text="#CustomerName" For="customer-name" />

• Namespace: Lagoon.UI.Components
• Inherits from: LgComponentBase
• NuGet package: Lagoon.UI

Form fields

Lagoon fields (LgTextBox, LgSelect…) already display their label via their Label parameter: LgLabel is used for standalone labels, outside Lagoon form fields.

Usage

Translated label

Text accepts plain text or a dictionary key. ChildContent allows rich content; if both Text and ChildContent are provided, the text is rendered before the content.

SummaryPage.razor

<LgLabel Text="#TotalAmount" />

<LgLabel Text="#Status">
    <LgIcon IconName="@IconNames.All.CheckCircleFill" CssClass="text-success" />
</LgLabel>

Associating with a field

For sets the for attribute of the <label>: clicking the label gives focus to the target element (and click propagation is stopped).

ConsentPage.razor

<input type="checkbox" id="consent" @bind="_consent" />
<LgLabel Text="#IAgree" For="consent" Tooltip="#ConsentDetails" />

ConsentPage.razor.cs

public partial class ConsentPage : LgPage
{
    // User consent, linked to the native checkbox.
    private bool _consent;
}

Properties

All [Parameter] properties of the component.

Name	Type	Default	Declared in	Description
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgLabel	Additional HTML attributes applied to the rendered <label>.
ChildContent	RenderFragment	null	LgLabel	Custom label content (rendered after Text if both are provided).
CssClass	string	null	LgLabel	Additional CSS classes.
For	string	null	LgLabel	Identifier of the associated element (for attribute).
Text	string	null	LgLabel	Label text (plain text or dictionary key #MyKey).
Tooltip	string	null	LgLabel	Tooltip.
TooltipIsHtml	bool	false	LgLabel	Indicates whether the Tooltip content is in HTML format (otherwise plain text).

Best practices / Accessibility

• Set For whenever the label describes a field: the association benefits screen readers and click handling.
• For a label that triggers an action, use LgLabelAction.

Complete reference

All parameters: API Reference — LgLabel.

Related components

• LgLabelAction — label associated with an action button.
• LgTitle — section title (h1 to h6).
• LgIcon — icon that can accompany a label.