Tesserae - Check Box

CheckBox

Description

The CheckBox component is a UI element used for binary selection, allowing users to toggle between two states: checked and unchecked. It provides a simple, clickable interface with an associated label, making it ideal for scenarios where a user chooses one or more items or settings (e.g., "Remember me" options or multi-selection lists).

Usage

Instantiate a CheckBox component using the static helper method from Tesserae.UI. In the sample below, a basic CheckBox is created, with fluent methods to set text, checked state, and disabled state.

check-box-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()
        {
            new CheckBoxUsageExample().Run();
        }
    }

    public class CheckBoxUsageExample
    {
        public void Run()
        {
            // Create an unchecked checkbox
            var checkBox = CheckBox("Accept Terms and Conditions");

            // Mark the checkbox as checked
            checkBox.Checked();

            // Disable the checkbox to prevent user interaction
            checkBox.Disabled();

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

API reference

class

CheckBox

public class CheckBox : ComponentBase<CheckBox, HTMLInputElement>, IObservableComponent<bool>, IRoundedStyle, ITextFormating

A two-state form control (checked / unchecked) used for boolean values.

Namespace: Tesserae
Inheritance: ComponentBase<CheckBox, HTMLInputElement> → CheckBox
Implements: IObservableComponent<bool>, IRoundedStyle, ITextFormating

Constructors

Name	Description
CheckBox	Initializes a new instance of this class.

Constructor

CheckBox

public CheckBox(string text = string.Empty)

Initializes a new instance of this class.

Properties

Name	Description
Text	Gets or sets button text
IsEnabled	Gets or sets whenever CheckBox is enabled
IsChecked	Gets or sets whenever CheckBox is checked
Size	Gets or sets the text size.
Weight	Gets or sets the text weight.
TextAlign	Gets or sets the text alignment.

Property

CheckBox.Text

public string Text { get ; set ; }

Gets or sets button text

Property

CheckBox.IsEnabled

public bool IsEnabled { get ; set ; }

Gets or sets whenever CheckBox is enabled

Property

CheckBox.IsChecked

public bool IsChecked { get ; set ; }

Gets or sets whenever CheckBox is checked

Property

CheckBox.Size

public TextSize Size { get ; set ; }

Gets or sets the text size.

Property

CheckBox.Weight

public TextWeight Weight { get ; set ; }

Gets or sets the text weight.

Property

CheckBox.TextAlign

public TextAlign TextAlign { get ; set ; }

Gets or sets the text alignment.

Methods

Name	Description
Render	Renders the component's root HTML element.
Disabled	Disables the component.
Checked	Marks the component as checked.
SetText	Sets the text of the component.
AsObservable	Returns the component's state as a(n) observable.

Method

CheckBox.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Method

CheckBox.Disabled

public CheckBox Disabled(bool value = true)

Disables the component.

Method

CheckBox.Checked

public CheckBox Checked(bool value = true)

Marks the component as checked.

Method

CheckBox.SetText

public CheckBox SetText(string text)

Sets the text of the component.

Method

CheckBox.AsObservable

public IObservable<bool> AsObservable()

Returns the component's state as a(n) observable.

Samples

Basic Usage

The following example demonstrates creating a few CheckBox instances with different configurations: unchecked, checked, disabled, and disabled when checked.

check-box-2-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()
        {
            new CheckBoxSampleUsage().Run();
        }
    }

    public class CheckBoxSampleUsage
    {
        public void Run()
        {
            // Create a stack container for layout
            var container = Stack().Children(
                // Basic unchecked checkbox
                CheckBox("Unchecked checkbox"),
                // Checked checkbox
                CheckBox("Checked checkbox").Checked(),
                // Disabled checkbox
                CheckBox("Disabled checkbox").Disabled(),
                // Disabled checkbox that is checked
                CheckBox("Disabled checked checkbox").Checked().Disabled()
            );

            // Render container to the document body
            var sampleComponent = container;
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }
}

CheckBox

Description

Usage

API reference

Constructors

CheckBox

Properties

CheckBox.Text

CheckBox.IsEnabled

CheckBox.IsChecked

CheckBox.Size

CheckBox.Weight

CheckBox.TextAlign

Methods

CheckBox.Render

CheckBox.Disabled

CheckBox.Checked

CheckBox.SetText

CheckBox.AsObservable

Samples

Basic Usage

See also