Tesserae

Label

Description

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.

Usage

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:

label-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new Example();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

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

Methods

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.

Properties

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.

Samples

Label Variants

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.

label-2-sample.js

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

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = Stack().Children(
                // 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())
                )
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}