Tesserae

ChoiceGroup

Description

The ChoiceGroup component allows users to select a single option from a set of mutually exclusive choices, similar to a group of radio buttons. It is ideal for presenting between 2 to 7 options clearly when the selection is important enough to justify using multiple visible controls. Each option in the group is defined by a nested Choice component, and the ChoiceGroup supports both vertical and horizontal layouts. Use this component when you need to emphasize all available options equally.

Usage

Instantiate a ChoiceGroup using the static helper method from Tesserae.UI. You can add choices using the fluent API via the Choices method and configure the component with methods such as Horizontal() and Required().

choice-group-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()
        {
            var sampleComponent = new SampleChoiceGroupUsage().CreateComponent();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class SampleChoiceGroupUsage
    {
        public IComponent CreateComponent()
        {
            return ChoiceGroup("Select an option")
                .Required()
                .Choices(
                    new ChoiceGroup.Choice("Option A"),
                    new ChoiceGroup.Choice("Option B"),
                    new ChoiceGroup.Choice("Option C").Disabled(),
                    new ChoiceGroup.Choice("Option D")
                );
        }
    }
}

Methods

Add(Choice component)
Adds a single Choice to the ChoiceGroup.
• Parameters: Choice component – the Choice instance to add.
Clear()
Clears all choices currently added to the ChoiceGroup and re-renders the header.
Replace(Choice newComponent, Choice oldComponent)
Replaces an existing Choice with a new one.
• Parameters:
‒ newComponent: the new Choice to insert,
‒ oldComponent: the existing Choice to be replaced.
Choices(params Choice[] children)
Adds multiple Choice items at once to the ChoiceGroup.
• Parameters: an array of Choice components.
Horizontal()
Sets the layout of the ChoiceGroup to horizontal by updating its orientation.
Vertical()
Sets the layout of the ChoiceGroup to vertical.
Required()
Marks the ChoiceGroup as required which updates the label to indicate the field is mandatory.
AsObservable()
Returns an observable of the currently selected Choice.

Properties

SelectedOption (Choice)
Gets the currently selected Choice in the group.
Label (string)
Gets or sets the text label displayed above the choices.
Orientation (ChoiceGroupOrientation)
Gets or sets the layout orientation of the group.
• Possible values: ChoiceGroupOrientation.Horizontal, ChoiceGroupOrientation.Vertical.
IsRequired (bool)
Gets or sets whether the ChoiceGroup is marked as required.

Samples

Default ChoiceGroup

This sample demonstrates a basic ChoiceGroup with four options. One of the options is disabled to prevent selection.

choice-group-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()
        {
            var sampleComponent = new DefaultChoiceGroupSample().CreateComponent();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class DefaultChoiceGroupSample
    {
        public IComponent CreateComponent()
        {
            return ChoiceGroup("Pick one")
                .Choices(
                    new ChoiceGroup.Choice("Option A"),
                    new ChoiceGroup.Choice("Option B"),
                    new ChoiceGroup.Choice("Option C").Disabled(),
                    new ChoiceGroup.Choice("Option D")
                );
        }
    }
}

Horizontal and Required ChoiceGroup

This sample shows how to create a horizontal ChoiceGroup with a custom label and marked as required.

choice-group-3-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()
        {
            var sampleComponent = new HorizontalRequiredChoiceGroupSample().CreateComponent();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class HorizontalRequiredChoiceGroupSample
    {
        public IComponent CreateComponent()
        {
            return ChoiceGroup("Custom label")
                .Required()
                .Horizontal()
                .Choices(
                    new ChoiceGroup.Choice("Option A"),
                    new ChoiceGroup.Choice("Option B"),
                    new ChoiceGroup.Choice("Option C").Disabled(),
                    new ChoiceGroup.Choice("Option D")
                );
        }
    }
}