Toggle

Description

The Toggle component represents a physical switch that allows users to turn a setting on or off. It is ideal for binary operations that take effect immediately when toggled, such as enabling or disabling services or hardware features. As part of the Components group in Tesserae, Toggle provides a fluent interface for configuring its appearance and behavior while automatically updating its on/off label based on its state.

Usage

The Toggle is instantiated through the Tesserae.UI static helper. You can configure text labels, the checked state, and the enabled/disabled state using its fluent methods or public properties.

Below is an example that demonstrates the basic usage of the Toggle:

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()
        {
            // Create a toggle that starts checked and is enabled.
            var toggle = Toggle()
                .Checked()
                .SetText("Custom Toggle Text");

            // Alternatively, disable the toggle.
            var disabledToggle = Toggle().Disabled();

            var component = Stack().Children(
                TextBlock("Enabled and Checked:"),
                toggle,
                TextBlock("Disabled Toggle:"),
                disabledToggle
            );

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

Methods

• SetText(string text)

  • Sets the text content of the Toggle.
  • Parameters:
    • text: The string to display as the text for the toggle. If non-empty, it hides the automatic on/off text.
  • Returns: The instance of Toggle (for fluent chaining).

• Disabled(bool value = true)

  • Enables or disables the Toggle.
  • Parameters:
    • value: When true, disables the Toggle; when false, enables it.
  • Returns: The instance of Toggle.

• Checked(bool value = true)

  • Sets the Toggle's checked state.
  • Parameters:
    • value: When true, the Toggle is set to checked; when false, it is unchecked.
  • Returns: The instance of Toggle.

• AsObservable()

  • Returns an observable representing the checked state of the Toggle.
  • Returns: An IObservable that can be used to subscribe to state changes.

Public Properties

• Text

  • Type: string
  • Description: Gets or sets the custom text displayed on the Toggle. When set, it overrides the default on/off labels by hiding the automatic label container if a non-empty string is provided.

• IsEnabled

  • Type: bool
  • Description: Indicates whether the Toggle is enabled. A disabled Toggle will visually appear inactive and will not respond to click events.

• IsChecked

  • Type: bool
  • Description: Represents the current checked state of the Toggle. Changing this value updates the visual indicator and the underlying observable that tracks this state.

Samples

Basic Toggle Usage

This sample demonstrates how to instantiate and configure multiple Toggle states including checked, unchecked, enabled, and disabled toggles. It also shows how to use inline labels.

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(
                TextBlock("Enabled and Checked:"),
                Label("Toggle On").SetContent(Toggle().Checked()),

                TextBlock("Enabled and Unchecked:"),
                Label("Toggle Off").SetContent(Toggle()),

                TextBlock("Disabled and Checked:"),
                Label("Disabled Toggle On").SetContent(Toggle().Checked().Disabled()),

                TextBlock("Disabled and Unchecked:"),
                Label("Disabled Toggle Off").SetContent(Toggle().Disabled()),

                TextBlock("Toggle with inline label:"),
                Label("Inline Toggle").Inline().SetContent(Toggle()),

                TextBlock("Disabled inline toggle:"),
                Label("Disabled Inline Toggle").Inline().SetContent(Toggle().Disabled()),

                Toggle("With inline label and without onText and offText"),
                Toggle("Disabled with inline label and without onText and offText").Disabled()
            );

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

See also

• Button
• CheckBox