Option

Description

The Option component represents a single mutually exclusive choice inside a ChoiceGroup. In the public API, the helper method is Choice(...), and the underlying type is ChoiceGroup.Choice.

Use it when you need radio-button style selection where exactly one option should be active within a group.

Usage

Create options with Choice(...) and place them inside ChoiceGroup(...). The group manages shared selection state and exposes the selected option as an observable value.

using System;
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 sampleComponent = new OptionExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class OptionExample : IComponent
    {
        public HTMLElement Render()
        {
            var selected = TextBlock("Selected: none");

            var group = ChoiceGroup("Favorite environment")
                .Choices(
                    Choice("Development").Selected(),
                    Choice("Staging"),
                    Choice("Production").Disabled()
                );

            group.AsObservable().Observe(choice =>
                selected.Text("Selected: " + (choice?.Text ?? "none")));

            return Stack().Children(selected, group).Render();
        }
    }
}

Methods

• Disabled(bool value = true) enables or disables the option.
• Selected() marks the option as selected.
• SelectedIf(bool shouldSelect) conditionally selects the option.
• SetText(string text) updates the displayed label.
• OnSelected(ComponentEventHandler<ChoiceGroup.Choice> onSelected) registers a callback when this option becomes selected.
• Render() returns the label-wrapped radio element.

Properties

• Text gets or sets the displayed label.
• IsEnabled gets or sets whether the option can be interacted with.
• IsSelected gets or sets the selected state.
• Text-formatting properties such as Size, Weight, and TextAlign are available on the component.

See also

• Choice Group
• CheckBox
• Toggle