Tesserae - Choice Group

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

API reference

class

ChoiceGroup

public sealed class ChoiceGroup : ComponentBase<ChoiceGroup, HTMLDivElement>, IContainer<ChoiceGroup, ChoiceGroup.Choice>, IObservableComponent<ChoiceGroup.Choice>

A group of radio-style choices of which exactly one may be selected at a time.

Constructors

Constructor

ChoiceGroup

public ChoiceGroup(string label = "Pick one")

Initializes a new instance of this class.

Properties

Property

ChoiceGroup.SelectedOption

public Choice SelectedOption { get ; private set ; }

Gets or sets the selected option.

Property

ChoiceGroup.Label

public string Label { get ; set ; }

Gets or sets the label shown by the component.

Property

ChoiceGroup.Orientation

public ChoiceGroupOrientation Orientation { get ; set ; }

Gets or sets the orientation.

Property

ChoiceGroup.IsRequired

public bool IsRequired { get ; set ; }

Gets or sets a value indicating whether the component is required for form submission.

Methods

Method

ChoiceGroup.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Method

ChoiceGroup.Add

public void Add(Choice component)

Adds the given item to the component.

Method

ChoiceGroup.Clear

public void Clear()

Clears the component's current state.

Method

ChoiceGroup.Replace

public void Replace(Choice newComponent, Choice oldComponent)

Replaces an existing item with a new one.

Method

ChoiceGroup.Choices

public ChoiceGroup Choices(params ChoiceGroup.Choice[] children)

Configures the component to choices.

Method

ChoiceGroup.Horizontal

public ChoiceGroup Horizontal()

Configures the component to horizontal.

Method

ChoiceGroup.Vertical

public ChoiceGroup Vertical()

Configures the component to vertical.

Method

ChoiceGroup.Required

public ChoiceGroup Required()

Marks the component as required.

Method

ChoiceGroup.AsObservable

public IObservable<Choice> AsObservable()

Returns the component's state as a(n) observable.

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

ChoiceGroup

Description

Usage

API reference

ChoiceGroup

Constructors

ChoiceGroup

Properties

ChoiceGroup.SelectedOption

ChoiceGroup.Label

ChoiceGroup.Orientation

ChoiceGroup.IsRequired

Methods

ChoiceGroup.Render

ChoiceGroup.Add

ChoiceGroup.Clear

ChoiceGroup.Replace

ChoiceGroup.Choices

ChoiceGroup.Horizontal

ChoiceGroup.Vertical

ChoiceGroup.Required

ChoiceGroup.AsObservable

Samples

Default ChoiceGroup

Horizontal and Required ChoiceGroup

See also

Referenced by