# Check Box

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

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.

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

public class CheckBoxUsageExample
{
    public static void Main()
    {
        // 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();

        // Render the component to the DOM
        var element = checkBox.Render();
        document.body.appendChild(element);
    }
}

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

• 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

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

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

public class CheckBoxSampleUsage
{
    public static void Main()
    {
        // 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
        document.body.appendChild(container.Render());
    }
}

• Toggle
• Radio Button (for mutually exclusive selections)