Tesserae - Label

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.cs

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();
        }
    }
}

API reference

class

Label

public sealed class Label : TextBlock, ISpecialCaseStyling, IRoundedStyle

A non-interactive label component, typically used to caption form fields.

Namespace: Tesserae
Inheritance: TextBlock → Label
Implements: ISpecialCaseStyling, IRoundedStyle

Constructors

Name	Description
Label	Initializes a new instance of this class.

Constructor

Label

Overload
Label(string)	Initializes a new instance of this class.
Label(IComponent)	Initializes a new instance of this class.

Label(string)

public Label(string text = string.Empty)

Initializes a new instance of this class.

Parameters

text string

Label(IComponent)

public Label(IComponent component)

Initializes a new instance of this class.

Parameters

component IComponent

Properties

Name	Description
IsRequired	Gets or sets a value indicating whether the component is required for form submission.
IsInline	Returns a value indicating whether the component is inline.
Content	Sets the content rendered inside the surface.

Property

Label.IsRequired

public override bool IsRequired { get ; set ; }

Gets or sets a value indicating whether the component is required for form submission.

Property

Label.IsInline

public bool IsInline { get ; set ; }

Returns a value indicating whether the component is inline.

Property

Label.Content

public IComponent Content { set ; }

Sets the content rendered inside the surface.

Methods

Name	Description
SetContent	Sets the content of the component.
Inline	Renders the component inline.
SetMinLabelWidth	Sets the min label width of the component.
WithContentMargin	Returns the component configured with the given content margin.
AlignLabelTop	Aligns the label to the top of its container.
AutoWidth	Computes the label width automatically from its sibling components so labels in a column line up.

Method

Label.SetContent

public Label SetContent(IComponent content)

Sets the content of the component.

Method

Label.Inline

public Label Inline()

Renders the component inline.

Method

Label.SetMinLabelWidth

public Label SetMinLabelWidth(UnitSize unitSize)

Sets the min label width of the component.

Method

Label.WithContentMargin

public Label WithContentMargin()

Returns the component configured with the given content margin.

Method

Label.AlignLabelTop

public Label AlignLabelTop()

Aligns the label to the top of its container.

Method

Label.AutoWidth

Overload
AutoWidth(string, bool)	Computes the label width automatically from its sibling components so labels in a column line up.
AutoWidth(IComponent, bool)	Computes the label width automatically from its sibling components so labels in a column line up.

AutoWidth(string, bool)

public Label AutoWidth(string parentSelector = null, bool alignRight = false)

Computes the label width automatically from its sibling components so labels in a column line up.

Parameters

parentSelector string
alignRight bool

AutoWidth(IComponent, bool)

public Label AutoWidth(IComponent parentElement, bool alignRight = false)

Computes the label width automatically from its sibling components so labels in a column line up.

Parameters

parentElement IComponent
alignRight bool

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.cs

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);
        }
    }
}

Label

Description

Usage

API reference

Constructors

Label

Label(string)

Parameters

Label(IComponent)

Parameters

Properties

Label.IsRequired

Label.IsInline

Label.Content

Methods

Label.SetContent

Label.Inline

Label.SetMinLabelWidth

Label.WithContentMargin

Label.AlignLabelTop

Label.AutoWidth

AutoWidth(string, bool)

Parameters

AutoWidth(IComponent, bool)

Parameters

Samples

Label Variants

See also