# Choice Group

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.

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

using System;
using Tesserae;
using static Tesserae.UI;

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

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

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

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

using System;
using Tesserae;
using static Tesserae.UI;

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

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

using System;
using Tesserae;
using static Tesserae.UI;

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

• CheckBox
• Toggle