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

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.

Constructors

Constructor

CheckBox

public CheckBox(string text = string.Empty)

Initializes a new instance of this class.

Properties

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

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

CheckBox

Description

Usage

API reference

CheckBox

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

Referenced by