Tesserae

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

Methods

Disabled(bool value = true)
Disables (or enables) the CheckBox component.
Parameters:
• value (bool, optional): When true, disables the component; when false, enables it.
Checked(bool value = true)
Sets the checked state of the CheckBox.
Parameters:
• value (bool, optional): When true, marks the CheckBox as checked; when false, leaves it unchecked.
SetText(string text)
Sets the text label for the CheckBox.
Parameters:
• text (string): The label text to be displayed alongside the CheckBox.
AsObservable()
Returns an observable for the CheckBox’s state, allowing subscription to changes.
Returns:
• IObservable: Observable that emits the CheckBox's checked state whenever it changes.

Properties

Text
Gets or sets the label text of the CheckBox.
Type: string
IsEnabled
Gets or sets whether the CheckBox is enabled. This property inversely reflects the disabled state.
Type: bool
IsChecked
Gets or sets whether the CheckBox is checked.
Type: bool

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