# Label

The Label component is used to provide a descriptive title or identifier for a UI element or group of elements. It is typically paired with input controls or other interactive components to inform users of their purpose. Being part of the Components group, this control offers various styling options such as inline display, auto-width based on content, and visual distinction for required fields.

The Label component is instantiated through the static helper method in the Tesserae.UI class. You can simply call Label() with either a text string or an IComponent (for a more complex inner content). Here’s an example of creating a basic label:

using System;
using H5;
using static H5.Core.dom;
using Tesserae;
using static Tesserae.UI;

public class Example
{
    public static HTMLElement Render()
    {
        // Create a simple label with text.
        var label = Label("Username");
        return label.Render();
    }
}

• SetContent(IComponent content) : Label
  Sets the inner content of the Label to the specified component. This is particularly useful when the label is meant to be associated with another control (e.g. TextBox).
  • Parameter: content – an instance of IComponent.
  • Returns: The current Label instance for chaining.

• Inline() : Label
  Configures the Label to display inline next to the associated component.
  • Returns: The current Label instance.

• SetMinLabelWidth(UnitSize unitSize) : Label
  Sets a minimum width for the Label. This ensures that labels align properly when used in a group.
  • Parameter: unitSize – the minimum width defined as a UnitSize.
  • Returns: The current Label instance.

• WithContentMargin() : Label
  Adds a default margin between the Label and its associated content.
  • Returns: The current Label instance.

• AlignLabelTop() : Label
  Aligns the label text to the top, instead of centering it, which is useful when pairing with multi-line or vertically stretched inputs.
  • Returns: The current Label instance.

• AutoWidth(string parentSelector = null, bool alignRight = false) : Label
  Automatically adjusts the label width based on the rendered parent container. Optionally, labels can be right-aligned.
  • Parameters:
  - parentSelector (optional): A CSS selector string to identify the parent container.
  - alignRight (optional): Boolean indicating whether the label text should be aligned to the right.
  • Returns: The current Label instance.

• AutoWidth(IComponent parentElement, bool alignRight = false) : Label
  An overload of AutoWidth that accepts an IComponent as the parent element.
  • Parameters:
  - parentElement: The parent component whose rendered element is used for auto width calculations.
  - alignRight (optional): Boolean indicating right alignment of the label text.
  • Returns: The current Label instance.

• IsRequired
  Gets or sets whether the Label is for a required field. When true, a specific style class is added to indicate the requirement.

• IsInline
  Gets or sets a boolean value that indicates if the Label should be displayed inline with its associated content.

• Content (setter only)
  Sets the associated component for the Label. When set, the Label attempts to update related attributes (such as linking the label to an input's id) to improve usability.

The sample below demonstrates different usages of the Label component—simple text labels, disabled labels, and required labels—as well as labels with different styles (primary, secondary, tiny) and inline configurations with or without auto-width.

using System;
using H5;
using static H5.Core.dom;
using Tesserae;
using static Tesserae.UI;

public class LabelDemo
{
    public static HTMLElement Render()
    {
        return SectionStack()
            .Title("Label Component Demo")
            .Section(Stack().Children(
                TextBlock("Labels provide a title or identifier for inputs and controls."),
                // Simple label with text
                Label("I'm Label"),
                // Disabled label
                Label("I'm a disabled Label").Disabled(),
                // Required label
                Label("I'm a required Label").Required(),
                // Primary and secondary styled labels
                Label("I'm a primary Label").Primary(),
                Label("I'm a secondary Label").Secondary(),
                // Tiny label
                Label("I'm a tiny Label").Regular().Tiny(),
                // Label paired with a TextBox control
                Label("A Label for An Input").SetContent(TextBox()),
                // Inline labels without auto-width adjustment
                TextBlock("Inline without auto-width").Medium().PaddingTop(16.px()).PaddingBottom(8.px()),
                Stack().Children(
                    Label("Lbl").Inline().SetContent(TextBox()),
                    Label("Label").Inline().SetContent(TextBox()),
                    Label("Bigger Label").Inline().SetContent(TextBox()),
                    Label("The Biggest Label").Inline().SetContent(TextBox())
                ),
                // Inline labels with auto-width adjustment
                TextBlock("Inline with auto-width").Medium().PaddingTop(16.px()).PaddingBottom(8.px()),
                Stack().Children(
                    Label("Lbl").Inline().AutoWidth().SetContent(TextBox()),
                    Label("Label").Inline().AutoWidth().SetContent(TextBox()),
                    Label("Bigger Label").Inline().AutoWidth().SetContent(TextBox()),
                    Label("The Biggest Label").Inline().AutoWidth().SetContent(TextBox())
                ),
                // Inline labels with auto-width and right alignment
                TextBlock("Inline with auto-width, aligned right").Medium().PaddingTop(16.px()).PaddingBottom(8.px()),
                Stack().Children(
                    Label("Lbl").Inline().AutoWidth(alignRight: true).SetContent(TextBox()),
                    Label("Label").Inline().AutoWidth(alignRight: true).SetContent(TextBox()),
                    Label("Bigger Label").Inline().AutoWidth(alignRight: true).SetContent(TextBox()),
                    Label("The Biggest Label").Inline().AutoWidth(alignRight: true).SetContent(TextBox())
                )
            ))
            .Render();
    }
}

• TextBlock – Base class for text rendering components.
• TextBox – An input control that can be paired with a Label for enhanced usability.