Radio buttons (ChoiceGroup) let people select a single option from two or more choices.
Radio buttons (ChoiceGroup) let people select a single option from two or more choices.
<Stack>
<ChoiceGroup ItemsSource="this._stringItems!" @bind-Value="this._selectedStringOption" Required="true">
</ChoiceGroup>
<br />
<div>
Selected option: @(_selectedStringOption ?? "none")
</div>
</Stack>
<Stack>
<ChoiceGroup ItemsSource="this._choiceGroupOptions!" @bind-Value="this._selectedChoiceGroupOption">
</ChoiceGroup>
<br />
<div>
Selected option: @(_selectedChoiceGroupOption?.Label ?? "none")
</div>
</Stack>
<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>
<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>