ChoiceGroup

Overview

Radio buttons (ChoiceGroup) let people select a single option from two or more choices.

Usage

ChoiceGroup with ItemSource as List<string>

Selected option: none
<Stack>
    <ChoiceGroup ItemsSource="this._stringItems!" @bind-Value="this._selectedStringOption" Required="true">
    </ChoiceGroup>
    <br />
    <div>
        Selected option: @(_selectedStringOption ?? "none")
    </div>
</Stack>
            
            
ChoiceGroup with ItemSource as List<IChoiceGroupOption>

Selected option: none
<Stack>
    <ChoiceGroup ItemsSource="this._choiceGroupOptions!" @bind-Value="this._selectedChoiceGroupOption">
    </ChoiceGroup>
    <br />
    <div>
        Selected option: @(_selectedChoiceGroupOption?.Label ?? "none")
    </div>
</Stack>
            
            
ChoiceGroup with ItemSource as List<CustomObject> using OptionTemplate

Selected option: none
<Stack>
    <ChoiceGroup ItemsSource="this._customObjects!" @bind-Value="this._selectedCustomObject" ItemAlignment="FlexDirection.Row">
        <OptionTemplate Context="item">
            <Icon IconName="@item!.IconName" Style="font-size:36px"></Icon>
        </OptionTemplate>
    </ChoiceGroup>
    <br />
    <div>
        Selected option: @(_selectedCustomObject?.Label ?? "none")
    </div>
</Stack>
            
            
Datasource is a List<CustomObject> using OptionTemplate

Selected option id: 1
Selected date: 8/11/2022
Selected month: none
<Stack>
    <ChoiceGroup ItemsSource="this._customObjects2!" @bind-Value="this._selectedCustomObject2" ItemAlignment="FlexDirection.Row">
        <OptionTemplate Context="item">
            <div style="width:200px;height:90px">
<Icon IconName="@item!.IconName" Style="font-size:36px;margin-bottom:10px"></Icon>
@if (item.Id == 1)
{
    <DatePicker Disabled="_selectedCustomObject2?.Id != 1" @bind-Value="_selectedDate"></DatePicker>
}
else if (item.Id == 3)
{
    <Dropdown ItemsSource=@_months.Select(x=>new DropdownOption { Key = x.Name!, Text = x.Name })
              Disabled="_selectedCustomObject2?.Id != 3"
              Placeholder="Select a Month"
              @bind-SelectedOption=@_selectedMonthOption />
}
            </div>
        </OptionTemplate>
    </ChoiceGroup>
    <br />
    <div>
        Selected option id: @(_selectedCustomObject2?.Id.ToString() ?? "none")
    </div>
    <div>
        Selected date: @(_selectedDate != null ? ((DateTime)_selectedDate).ToShortDateString() : "none")
    </div>
    <div>
        Selected month: @(_selectedMonthOption?.Text ?? "none")
    </div>
</Stack>