<BitChoiceGroup Label="Basic Items"
                Items="basicItems"
                DefaultValue="basicItems[1].Value" />

<BitChoiceGroup Label="NoCircle"
                NoCircle
                Items="basicItems"
                DefaultValue="basicItems[1].Value" />
@code {
    private readonly List<BitChoiceGroupItem<string>> basicItems =
    [
        new() { Text = "Item A", Value = "A" },
        new() { Text = "Item B", Value = "B" },
        new() { Text = "Item C", Value = "C" },
        new() { Text = "Item D", Value = "D" }
    ];
}
                    

<BitChoiceGroup Label="Disabled ChoiceGroup"
                IsEnabled="false"
                Items="basicItems"
                DefaultValue="@("A")" />

<BitChoiceGroup Label="ChoiceGroup with Disabled Items"
                Items="disabledItems"
                DefaultValue="@("A")" />
@code {
    private readonly List<BitChoiceGroupItem<string>> basicItems =
    [
        new() { Text = "Item A", Value = "A" },
        new() { Text = "Item B", Value = "B" },
        new() { Text = "Item C", Value = "C" },
        new() { Text = "Item D", Value = "D" }
    ];
    
    private readonly List<BitChoiceGroupItem<string>> disabledItems =
    [
        new() { Text = "Item A", Value = "A" },
        new() { Text = "Item B", Value = "B" },
        new() { Text = "Item C", Value = "C", IsEnabled = false },
        new() { Text = "Item D", Value = "D" }
    ];
}
                    

Showcases BitChoiceGroup with image and icon items.

Image Items

Bar

Pie

Icon Items

Day

Week

Month

Inline:

Image Items

Bar

Pie

Icon Items

Day

Week

Month

<BitChoiceGroup Label="Image Items" Items="imageItems" DefaultValue="@("Bar")" />
<BitChoiceGroup Label="Icon Items" Items="iconItems" DefaultValue="@("Day")" />

<BitChoiceGroup Label="Image Items" Items="inlineImageItems" DefaultValue="@("Bar")" Inline />
<BitChoiceGroup Label="Icon Items" Items="iconItems" DefaultValue="@("Day")" Inline />
@code {
    private readonly List<BitChoiceGroupItem<string>> imageItems =
    [
        new()
        {
            Text = "Bar",
            Value = "Bar",
            ImageAlt = "alt for Bar image",
            ImageSize = new BitImageSize(32, 32),
            ImageSrc= "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-unselected.png",
            SelectedImageSrc = "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-selected.png",
        },
        new()
        {
            Text = "Pie",
            Value = "Pie",
            ImageAlt = "alt for Pie image",
            ImageSize = new BitImageSize(32, 32),
            ImageSrc= "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-unselected.png",
            SelectedImageSrc = "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-selected.png",
        }
    ];
    
    private readonly List<BitChoiceGroupItem<string>> inlineImageItems =
    [
        new()
        {
            Text = "Bar",
            Value = "Bar",
            ImageAlt = "alt for Bar image",
            ImageSize = new BitImageSize(20, 20),
            ImageSrc= "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-unselected.png",
            SelectedImageSrc = "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-selected.png",
        },
        new()
        {
            Text = "Pie",
            Value = "Pie",
            ImageAlt = "alt for Pie image",
            ImageSize = new BitImageSize(20, 20),
            ImageSrc= "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-unselected.png",
            SelectedImageSrc = "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-selected.png",
        }
    ];
    
    private readonly List<BitChoiceGroupItem<string>> iconItems =
    [
        new() { Text = "Day", Value = "Day", IconName = BitIconName.CalendarDay },
        new() { Text = "Week", Value = "Week", IconName = BitIconName.CalendarWeek },
        new() { Text = "Month", Value = "Month", IconName = BitIconName.Calendar, IsEnabled = false }
    ];
}
                    

Displays the BitChoiceGroup component in a horizontal layout, demonstrating various configurations.

Basic

Item A

Item B

Item C

Item D

Disabled

Item A

Item B

Item C

Item D

Image

Bar

Pie

Icon

Day

Week

Month

<BitChoiceGroup Label="Basic" Items="basicItems" DefaultValue="@("A")" Horizontal />
<BitChoiceGroup Label="Disabled" Items="basicItems" IsEnabled="false" DefaultValue="@("A")" Horizontal />
<BitChoiceGroup Label="Image" Items="imageItems" DefaultValue="@("Bar")" Horizontal />
<BitChoiceGroup Label="Icon" Items="iconItems" DefaultValue="@("Day")" Horizontal />
@code {
    private readonly List<BitChoiceGroupItem<string>> basicItems =
    [
        new() { Text = "Item A", Value = "A" },
        new() { Text = "Item B", Value = "B" },
        new() { Text = "Item C", Value = "C" },
        new() { Text = "Item D", Value = "D" }
    ];
    
    private readonly List<BitChoiceGroupItem<string>> imageItems =
    [
        new()
        {
            Text = "Bar",
            Value = "Bar",
            ImageAlt = "alt for Bar image",
            ImageSize = new BitImageSize(32, 32),
            ImageSrc= "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-unselected.png",
            SelectedImageSrc = "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-selected.png",
        },
        new()
        {
            Text = "Pie",
            Value = "Pie",
            ImageAlt = "alt for Pie image",
            ImageSize = new BitImageSize(32, 32),
            ImageSrc= "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-unselected.png",
            SelectedImageSrc = "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-selected.png",
        }
    ];
    
    private readonly List<BitChoiceGroupItem<string>> iconItems =
    [
        new() { Text = "Day", Value = "Day", IconName = BitIconName.CalendarDay },
        new() { Text = "Week", Value = "Week", IconName = BitIconName.CalendarWeek },
        new() { Text = "Month", Value = "Month", IconName = BitIconName.Calendar, IsEnabled = false }
    ];
}
                    

<BitChoiceGroup Label="Reversed" Items="basicItems" DefaultValue="@("A")" Reversed Horizontal />
@code {
    private readonly List<BitChoiceGroupItem<string>> basicItems =
    [
        new() { Text = "Item A", Value = "A" },
        new() { Text = "Item B", Value = "B" },
        new() { Text = "Item C", Value = "C" },
        new() { Text = "Item D", Value = "D" }
    ];
    
    private readonly List<BitChoiceGroupItem<string>> imageItems =
    [
        new()
        {
            Text = "Bar",
            Value = "Bar",
            ImageAlt = "alt for Bar image",
            ImageSize = new BitImageSize(32, 32),
            ImageSrc= "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-unselected.png",
            SelectedImageSrc = "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-selected.png",
        },
        new()
        {
            Text = "Pie",
            Value = "Pie",
            ImageAlt = "alt for Pie image",
            ImageSize = new BitImageSize(32, 32),
            ImageSrc= "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-unselected.png",
            SelectedImageSrc = "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-selected.png",
        }
    ];
    
    private readonly List<BitChoiceGroupItem<string>> iconItems =
    [
        new() { Text = "Day", Value = "Day", IconName = BitIconName.CalendarDay },
        new() { Text = "Week", Value = "Week", IconName = BitIconName.CalendarWeek },
        new() { Text = "Month", Value = "Month", IconName = BitIconName.Calendar, IsEnabled = false }
    ];
}
                    

<style>
    .custom-label {
        color: red;
        font-size: 18px;
        font-weight: bold;
    }
</style>

<BitChoiceGroup Items="basicItems" DefaultValue="@("A")">
    <LabelTemplate>
        <div class="custom-label">
            Custom label <BitIcon IconName="@BitIconName.Filter" />
        </div>
    </LabelTemplate>
</BitChoiceGroup>
@code {
    private readonly List<BitChoiceGroupItem<string>> basicItems =
    [
        new() { Text = "Item A", Value = "A" },
        new() { Text = "Item B", Value = "B" },
        new() { Text = "Item C", Value = "C" },
        new() { Text = "Item D", Value = "D" }
    ];
}
                    

<style>
    .custom-container {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
    }

    .custom-circle {
        width: 20px;
        height: 20px;
        border: 1px solid;
        border-radius: 10px;
    }

    .custom-container:hover .custom-circle {
        border-top: 5px solid #C66;
        border-bottom: 5px solid #6C6;
        border-left: 5px solid #66C;
        border-right: 5px solid #CC6;
    }

    .custom-container.selected {
        color: #C66;
    }

    .custom-container.selected .custom-circle {
        border-top: 10px solid #C66;
        border-bottom: 10px solid #6C6;
        border-left: 10px solid #66C;
        border-right: 10px solid #CC6;
    }
</style>

<BitChoiceGroup Label="ItemPrefixTemplate" Items="basicItems" DefaultValue="@string.Empty">
    <ItemPrefixTemplate Context="item">
        @(item.Index + 1).&nbsp;
    </ItemPrefixTemplate>
</BitChoiceGroup>

<BitChoiceGroup Label="ItemLabelTemplate" Items="itemLabelTemplates" @bind-Value="itemLabelTemplateValue">
    <ItemLabelTemplate Context="item">
        <div class="custom-container @(itemLabelTemplateValue == item.Value ? "selected" : string.Empty)">
            <BitIcon IconName="@item.IconName" />
            <span>@item.Text</span>
        </div>
    </ItemLabelTemplate>
</BitChoiceGroup>


<BitChoiceGroup Label="ItemTemplate" Items="itemTemplateItems" @bind-Value="itemTemplateValue">
    <ItemTemplate Context="item">
        <div class="custom-container @(itemTemplateValue == item.Value ? "selected" : string.Empty)">
            <div class="custom-circle"></div>
            <span>@item.Text</span>
        </div>
    </ItemTemplate>
</BitChoiceGroup>

<BitChoiceGroup Label="Item's Template" Items="itemTemplateItems2" @bind-Value="itemTemplateValue2" />
@code {
    private string itemTemplateValue = "Day";
    private string itemTemplateValue2 = "Day";
    private string itemLabelTemplateValue = "Day";
    
    private readonly List<BitChoiceGroupItem<string>> basicItems =
    [
        new() { Text = "Item A", Value = "A" },
        new() { Text = "Item B", Value = "B" },
        new() { Text = "Item C", Value = "C" },
        new() { Text = "Item D", Value = "D" }
    ];
    
    private readonly List<BitChoiceGroupItem<string>> itemLabelTemplates =
    [
        new() { Text = "Day", Value = "Day", IconName = BitIconName.CalendarDay },
        new() { Text = "Week", Value = "Week", IconName = BitIconName.CalendarWeek },
        new() { Text = "Month", Value = "Month", IconName = BitIconName.Calendar }
    ];
    
    private readonly List<BitChoiceGroupItem<string>> itemTemplateItems =
    [
        new() { Text = "Day", Value = "Day" },
        new() { Text = "Week", Value = "Week" },
        new() { Text = "Month", Value = "Month" }
    ];
    
    private List<BitChoiceGroupItem<string>> itemTemplateItems2 = default!;
    protected override void OnInitialized()
    {
        itemTemplateItems2 = new()
        {
            new()
            {
                Text = "Day",
                Value = "Day",
                Template = (item => @<div class="custom-container @(itemTemplateValue2 == item.Value ? "selected" : "")">
                                         <div class="custom-circle" />
                                         <span style="color:red">@item.Text</span>
                                     </div>)
            },
            new()
            {
                Text = "Week",
                Value = "Week",
                Template = (item => @<div class="custom-container @(itemTemplateValue2 == item.Value ? "selected" : "")">
                                         <div class="custom-circle" />
                                         <span style="color:green">@item.Text</span>
                                     </div>)
            },
            new()
            {
                Text = "Month",
                Value = "Month",
                Template = (item => @<div class="custom-container @(itemTemplateValue2 == item.Value ? "selected" : "")">
                                         <div class="custom-circle" />
                                         <span style="color:blue">@item.Text</span>
                                     </div>)
            }
        };
    }
}
                    

<BitChoiceGroup Label="One-way" Items="basicItems" Value="@oneWayValue" />
<BitTextField @bind-Value="oneWayValue" />

<BitChoiceGroup Label="Two-way" Items="basicItems" @bind-Value="twoWayValue" />
<BitTextField @bind-Value="twoWayValue" />
@code {
    private string oneWayValue = "A";
    private string twoWayValue = "A";
    
    private readonly List<BitChoiceGroupItem<string>> basicItems =
    [
        new() { Text = "Item A", Value = "A" },
        new() { Text = "Item B", Value = "B" },
        new() { Text = "Item C", Value = "C" },
        new() { Text = "Item D", Value = "D" }
    ];
}
                    

<style>
    .validation-message {
        color: red;
    }
</style>

<EditForm Model="@validationModel" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit">
    <DataAnnotationsValidator />
    
    <BitChoiceGroup Items="basicItems" @bind-Value="validationModel.Value" />
    <ValidationMessage For="@(() => validationModel.Value)" />
    
    <BitButton ButtonType="BitButtonType.Submit">Submit</BitButton>
</EditForm>
@code {
    public class ChoiceGroupValidationModel
    {
        [Required(ErrorMessage = "Pick one")]
        public string Value { get; set; }
    }
    
    public ChoiceGroupValidationModel validationModel = new();
    
    private void HandleValidSubmit() { }
    private void HandleInvalidSubmit() { }
    
    private readonly List<BitChoiceGroupItem<string>> basicItems =
    [
        new() { Text = "Item A", Value = "A" },
        new() { Text = "Item B", Value = "B" },
        new() { Text = "Item C", Value = "C" },
        new() { Text = "Item D", Value = "D" }
    ];
}
                    

<BitChoiceGroup Size="BitSize.Small"
                Label="Small"
                Items="basicItems"
                DefaultValue="basicItems[1].Value" Horizontal />

<BitChoiceGroup Size="BitSize.Medium"
                Label="Medium"
                Items="basicItems"
                DefaultValue="basicItems[1].Value" Horizontal />

<BitChoiceGroup Size="BitSize.Large"
                Label="Large"
                Items="basicItems"
                DefaultValue="basicItems[1].Value" Horizontal />

<BitChoiceGroup Size="BitSize.Small"
                Label="Small"
                Items="iconItems" 
                DefaultValue="@("Day")"
                Horizontal Inline />

<BitChoiceGroup Size="BitSize.Medium"
                Label="Medium"
                Items="iconItems" 
                DefaultValue="@("Day")"
                Horizontal Inline />

<BitChoiceGroup Size="BitSize.Large"
                Label="Large"
                Items="iconItems" 
                DefaultValue="@("Day")"
                Horizontal Inline />

<BitChoiceGroup Size="BitSize.Small"
                Label="Small"
                Items="iconItems" 
                DefaultValue="@("Day")"
                Horizontal />

<BitChoiceGroup Size="BitSize.Medium"
                Label="Medium"
                Items="iconItems" 
                DefaultValue="@("Day")"
                Horizontal />

<BitChoiceGroup Size="BitSize.Large"
                Label="Large"
                Items="iconItems" 
                DefaultValue="@("Day")"
                Horizontal />
@code {
    private readonly List<BitChoiceGroupItem<string>> basicItems =
    [
        new() { Text = "Item A", Value = "A" },
        new() { Text = "Item B", Value = "B" },
        new() { Text = "Item C", Value = "C" },
        new() { Text = "Item D", Value = "D" }
    ];
    
    private readonly List<BitChoiceGroupItem<string>> iconItems =
    [
        new() { Text = "Day", Value = "Day", IconName = BitIconName.CalendarDay },
        new() { Text = "Week", Value = "Week", IconName = BitIconName.CalendarWeek },
        new() { Text = "Month", Value = "Month", IconName = BitIconName.Calendar, IsEnabled = false }
    ];
}
                    

<BitChoiceGroup Color="BitColor.Primary" 
                Label="Primary" 
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[1].Value" />

<BitChoiceGroup Color="BitColor.Secondary" 
                Label="Secondary" 
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[1].Value" />

<BitChoiceGroup Color="BitColor.Tertiary" 
                Label="Tertiary" 
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[1].Value" />

<BitChoiceGroup Color="BitColor.Info" 
                Label="Info" 
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[1].Value" />

<BitChoiceGroup Color="BitColor.Success" 
                Label="Success" 
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[1].Value" />

<BitChoiceGroup Color="BitColor.Warning" 
                Label="Warning" 
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[1].Value" />

<BitChoiceGroup Color="BitColor.SevereWarning" 
                Label="SevereWarning" 
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[1].Value" />

<BitChoiceGroup Color="BitColor.Error" 
                Label="Error" 
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[1].Value" />

<BitChoiceGroup Color="BitColor.PrimaryBackground" 
                Label="PrimaryBackground" 
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[1].Value" />

<BitChoiceGroup Color="BitColor.SecondaryBackground" 
                Label="SecondaryBackground" 
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[1].Value" />

<BitChoiceGroup Color="BitColor.TertiaryBackground" 
                Label="TertiaryBackground" 
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[1].Value" />

<BitChoiceGroup Color="BitColor.PrimaryForeground" 
                Label="PrimaryForeground" 
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[1].Value" />

<BitChoiceGroup Color="BitColor.SecondaryForeground" 
                Label="SecondaryForeground" 
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[1].Value" />

<BitChoiceGroup Color="BitColor.TertiaryForeground" 
                Label="TertiaryForeground" 
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[1].Value" />

<BitChoiceGroup Color="BitColor.PrimaryBorder" 
                Label="PrimaryBorder" 
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[1].Value" />

<BitChoiceGroup Color="BitColor.SecondaryBorder" 
                Label="SecondaryBorder" 
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[1].Value" />

<BitChoiceGroup Color="BitColor.TertiaryBorder" 
                Label="TertiaryBorder" 
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[1].Value" />
@code {
    private readonly List<BitChoiceGroupItem<string>> basicItems =
    [
        new() { Text = "Item A", Value = "A" },
        new() { Text = "Item B", Value = "B" },
        new() { Text = "Item C", Value = "C" },
        new() { Text = "Item D", Value = "D" }
    ];
}
                    

<style>
    .custom-class {
        color: dodgerblue;
        margin-inline: 16px;
        text-shadow: dodgerblue 0 0 8px;
    }


    .custom-item {
        padding: 8px;
        border-radius: 20px;
        border: 1px solid gray;
    }


    .custom-root {
        margin-inline: 16px;
    }

    .custom-text {
        font-weight: bold;
    }

    .custom-radio-btn::after {
        width: 8px;
        height: 8px;
        border: none;
        inset-inline-start: 6px;
        background-color: whitesmoke;
    }

    .custom-checked .custom-radio-btn::after {
        background-color: whitesmoke;
    }

    .custom-radio-btn::before {
        background-color: whitesmoke;
    }

    .custom-checked .custom-radio-btn::before {
        background-color: dodgerblue;
    }
</style>


<BitChoiceGroup Label="Styled ChoiceGroup"
                Items="basicItems"
                DefaultValue="basicItems[1].Value"
                Style="margin-inline: 16px; color:lightseagreen; text-shadow: lightseagreen 0 0 8px;" />

<BitChoiceGroup Label="Classed ChoiceGroup"
                Items="basicItems"
                DefaultValue="basicItems[1].Value"
                Class="custom-class" />


<BitChoiceGroup Items="itemStyleClassItems" DefaultValue="itemStyleClassItems[1].Value" />


<BitChoiceGroup Label="Styles"
                Items="basicItems"
                DefaultValue="basicItems[1].Value"
                Styles="@(new() { Root = "margin-inline: 16px; --item-background: #d3d3d347; --item-border: 1px solid gray;",
                                  ItemLabel = "width: 100%; cursor: pointer;",
                                  ItemChecked = "--item-background: #87cefa24; --item-border: 1px solid dodgerblue;",
                                  ItemContainer = "padding: 8px; border-radius: 2px; background-color: var(--item-background); border: var(--item-border);" })" />

<BitChoiceGroup Label="Classes"
                Items="basicItems"
                DefaultValue="basicItems[1].Value"
                Classes="@(new() { Root = "custom-root",
                                   ItemText = "custom-text",
                                   ItemChecked = "custom-checked",
                                   ItemRadioButton = "custom-radio-btn" })" />
@code {
    private readonly List<BitChoiceGroupItem<string>> basicItems =
    [
        new() { Text = "Item A", Value = "A" },
        new() { Text = "Item B", Value = "B" },
        new() { Text = "Item C", Value = "C" },
        new() { Text = "Item D", Value = "D" }
    ];
    
    private readonly List<BitChoiceGroupItem<string>> itemStyleClassItems =
    [
        new() { Text = "Item A", Value = "A", Class = "custom-item" },
        new() { Text = "Item B", Value = "B", Style = "padding: 8px; border-radius: 20px; border: 1px solid gray;" },
        new() { Text = "Item C", Value = "C", Class = "custom-item" },
        new() { Text = "Item D", Value = "D", Class = "custom-item" }
    ];
}
                    

<BitChoiceGroup Label="ساده" Items="rtlItems" DefaultValue="@("A")" Dir="BitDir.Rtl" />
<BitChoiceGroup Label="غیرفعال" Items="rtlItems" IsEnabled="false" DefaultValue="@("A")" Dir="BitDir.Rtl" />
@code {
    private readonly List<BitChoiceGroupItem<string>> rtlItems = new()
    {
        new() { Text = "بخش آ", Value = "A" },
        new() { Text = "بخش ب", Value = "B" },
        new() { Text = "بخش پ", Value = "C" },
        new() { Text = "بخش ت", Value = "D" }
    };
}
                    

<BitChoiceGroup Label="Basic Customs"
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />

<BitChoiceGroup Label="Basic Customs"
                NoCircle
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />
@code {
    public class Order
    {
        public string Name { get; set; }
        public string ItemValue { get; set; }
    }
    
    private readonly List<Order> basicCustoms =
    [
        new() { Name = "Custom A", ItemValue = "A" },
        new() { Name = "Custom B", ItemValue = "B" },
        new() { Name = "Custom C", ItemValue = "C" },
        new() { Name = "Custom D", ItemValue = "D" }
    ];
}
                    

<BitChoiceGroup Label="Disabled ChoiceGroup"
                IsEnabled="false"
                Items="basicCustoms"
                DefaultValue="@("A")"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />

<BitChoiceGroup Label="ChoiceGroup with Disabled Custom"
                Items="disabledCustoms"
                DefaultValue="@("A")"
                NameSelectors="@(new() { Text = { Selector = i => i.Name }, 
                                         Value = { Selector = i => i.ItemValue },
                                         IsEnabled = { Selector = i => i.IsDisabled is false } })" />
@code {
    public class Order
    {
        public string Name { get; set; }
        public string ItemValue { get; set; }
        public bool IsDisabled { get; set; }
    }
    
    private readonly List<Order> basicCustoms =
    [
        new() { Name = "Custom A", ItemValue = "A" },
        new() { Name = "Custom B", ItemValue = "B" },
        new() { Name = "Custom C", ItemValue = "C" },
        new() { Name = "Custom D", ItemValue = "D" }
    ];
    
    private readonly List<Order> disabledCustoms =
    [
        new() { Name = "Custom A", ItemValue = "A" },
        new() { Name = "Custom B", ItemValue = "B" },
        new() { Name = "Custom C", ItemValue = "C", IsDisabled = true },
        new() { Name = "Custom D", ItemValue = "D" }
    ];
}
                    

Showcases BitChoiceGroup with image and icon items.

Image Customs

Bar

Pie

Icon Customs

Day

Week

Month

Inline:

Image Customs

Bar

Pie

Icon Customs

Day

Week

Month

<BitChoiceGroup Label="Image Customs"
                Items="imageCustoms"
                DefaultValue="@("Bar")"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) },
                                         Value = { Name = nameof(Order.ItemValue) },
                                         ImageSrc = { Name = nameof(Order.ImageAddress) },
                                         ImageAlt = { Name = nameof(Order.ImageDescription) },
                                         ImageSize = { Name = nameof(Order.ImageSize) },
                                         SelectedImageSrc = { Name = nameof(Order.SelectedImageAddress) }})" />

<BitChoiceGroup Label="Icon Customs"
                Items="iconCustoms"
                DefaultValue="@("Day")"
                NameSelectors="@(new() { Text = { Selector = i => i.Name },
                                         Value = { Selector = i => i.ItemValue },
                                         IconName = { Selector = i => i.IconName },
                                         IsEnabled = { Selector = i => i.IsDisabled is false } })" />


<BitChoiceGroup Label="Image Customs"
                Inline
                Items="inlineImageCustoms"
                DefaultValue="@("Bar")"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) },
                                         Value = { Name = nameof(Order.ItemValue) },
                                         ImageSrc = { Name = nameof(Order.ImageAddress) },
                                         ImageAlt = { Name = nameof(Order.ImageDescription) },
                                         ImageSize = { Name = nameof(Order.ImageSize) },
                                         SelectedImageSrc = { Name = nameof(Order.SelectedImageAddress) }})" />

<BitChoiceGroup Label="Icon Customs"
                Inline
                Items="iconCustoms"
                DefaultValue="@("Day")"
                NameSelectors="@(new() { Text = { Selector = i => i.Name },
                                         Value = { Selector = i => i.ItemValue },
                                         IconName = { Selector = i => i.IconName },
                                         IsEnabled = { Selector = i => i.IsDisabled is false } })" />
@code {
    public class Order
    {
        public string Name { get; set; }
        public string ItemValue { get; set; }
        public string ImageAddress { get; set; }
        public string ImageDescription { get; set; }
        public Size? ImageSize { get; set; }
        public string SelectedImageAddress { get; set; }
        public string? IconName { get; set; }
        public bool IsDisabled { get; set; }
    }
    
    private readonly List<Order> imageCustoms =
    [
        new()
        {
            Name = "Bar",
            ItemValue = "Bar",
            ImageSize = new BitImageSize(32, 32),
            ImageDescription = "alt for Bar image",
            ImageAddress = "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-unselected.png",
            SelectedImageAddress = "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-selected.png",
        },
        new()
        {
            Name = "Pie",
            ItemValue = "Pie",
            ImageSize = new BitImageSize(32, 32),
            ImageDescription = "alt for Pie image",
            ImageAddress= "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-unselected.png",
            SelectedImageAddress = "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-selected.png",
        }
    ];
    
    private readonly List<Order> inlineImageCustoms =
    [
        new()
        {
            Name = "Bar",
            ItemValue = "Bar",
            ImageSize = new BitImageSize(20, 20),
            ImageDescription = "alt for Bar image",
            ImageAddress = "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-unselected.png",
            SelectedImageAddress = "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-selected.png",
        },
        new()
        {
            Name = "Pie",
            ItemValue = "Pie",
            ImageSize = new BitImageSize(20, 20),
            ImageDescription = "alt for Pie image",
            ImageAddress= "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-unselected.png",
            SelectedImageAddress = "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-selected.png",
        }
    ];
    
    private readonly List<Order> iconCustoms =
    [
        new() { Name = "Day", ItemValue = "Day", IconName = BitIconName.CalendarDay },
        new() { Name = "Week", ItemValue = "Week", IconName = BitIconName.CalendarWeek },
        new() { Name = "Month", ItemValue = "Month", IconName = BitIconName.Calendar, IsDisabled = true }
    ];
}
                    

Displays the BitChoiceGroup component in a horizontal layout, demonstrating various configurations.

Basic

Custom A

Custom B

Custom C

Custom D

Disabled

Custom A

Custom B

Custom C

Custom D

Image

Bar

Pie

Icon

Day

Week

Month

<BitChoiceGroup Label="Basic"
                Horizontal
                DefaultValue="@("A")"
                Items="basicCustoms"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />

<BitChoiceGroup Label="Disabled"
                Horizontal
                IsEnabled="false"
                DefaultValue="@("A")"
                Items="basicCustoms"
                NameSelectors="@(new() { Text = { Selector = i => i.Name }, Value = { Selector = i => i.ItemValue } })" />

<BitChoiceGroup Label="Image"
                Horizontal
                DefaultValue="@("Bar")"
                Items="imageCustoms"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) },
                                         Value = { Name = nameof(Order.ItemValue) },
                                         ImageSrc = { Name = nameof(Order.ImageAddress) },
                                         ImageAlt = { Name = nameof(Order.ImageDescription) },
                                         ImageSize = { Name = nameof(Order.ImageSize) },
                                         SelectedImageSrc = { Name = nameof(Order.SelectedImageAddress) }})" />

<BitChoiceGroup Label="Icon"
                Horizontal
                DefaultValue="@("Day")"
                Items="iconCustoms"
                NameSelectors="@(new() { Text = { Selector = i => i.Name },
                                         Value = { Selector = i => i.ItemValue },
                                         IconName = { Selector = i => i.IconName },
                                         IsEnabled = { Selector = i => i.IsDisabled is false } })" />
@code {
    public class Order
    {
        public string Name { get; set; }
        public string ItemValue { get; set; }
        public string ImageAddress { get; set; }
        public string ImageDescription { get; set; }
        public Size? ImageSize { get; set; }
        public string SelectedImageAddress { get; set; }
        public string? IconName { get; set; }
        public bool IsDisabled { get; set; }
    }
    
    private readonly List<Order> basicCustoms =
    [
        new() { Name = "Custom A", ItemValue = "A" },
        new() { Name = "Custom B", ItemValue = "B" },
        new() { Name = "Custom C", ItemValue = "C" },
        new() { Name = "Custom D", ItemValue = "D" }
    ];
    
    private readonly List<Order> imageCustoms =
    [
        new()
        {
            Name = "Bar",
            ItemValue = "Bar",
            ImageSize = new BitImageSize(32, 32),
            ImageDescription = "alt for Bar image",
            ImageAddress = "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-unselected.png",
            SelectedImageAddress = "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-selected.png",
        },
        new()
        {
            Name = "Pie",
            ItemValue = "Pie",
            ImageSize = new BitImageSize(32, 32),
            ImageDescription = "alt for Pie image",
            ImageAddress= "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-unselected.png",
            SelectedImageAddress = "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-selected.png",
        }
    ];
    
    private readonly List<Order> iconCustoms =
    [
        new() { Name = "Day", ItemValue = "Day", IconName = BitIconName.CalendarDay },
        new() { Name = "Week", ItemValue = "Week", IconName = BitIconName.CalendarWeek },
        new() { Name = "Month", ItemValue = "Month", IconName = BitIconName.Calendar, IsDisabled = true }
    ];
}
                    

<BitChoiceGroup Label="Reversed"
                        Reversed Horizontal
                        DefaultValue="@("A")"
                        Items="basicCustoms"
                        NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />
@code {
    public class Order
    {
        public string Name { get; set; }
        public string ItemValue { get; set; }
        public string ImageAddress { get; set; }
        public string ImageDescription { get; set; }
        public Size? ImageSize { get; set; }
        public string SelectedImageAddress { get; set; }
        public string? IconName { get; set; }
        public bool IsDisabled { get; set; }
    }
    
    private readonly List<Order> basicCustoms =
    [
        new() { Name = "Custom A", ItemValue = "A" },
        new() { Name = "Custom B", ItemValue = "B" },
        new() { Name = "Custom C", ItemValue = "C" },
        new() { Name = "Custom D", ItemValue = "D" }
    ];
    
    private readonly List<Order> imageCustoms =
    [
        new()
        {
            Name = "Bar",
            ItemValue = "Bar",
            ImageSize = new BitImageSize(32, 32),
            ImageDescription = "alt for Bar image",
            ImageAddress = "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-unselected.png",
            SelectedImageAddress = "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-selected.png",
        },
        new()
        {
            Name = "Pie",
            ItemValue = "Pie",
            ImageSize = new BitImageSize(32, 32),
            ImageDescription = "alt for Pie image",
            ImageAddress= "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-unselected.png",
            SelectedImageAddress = "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-selected.png",
        }
    ];
    
    private readonly List<Order> iconCustoms =
    [
        new() { Name = "Day", ItemValue = "Day", IconName = BitIconName.CalendarDay },
        new() { Name = "Week", ItemValue = "Week", IconName = BitIconName.CalendarWeek },
        new() { Name = "Month", ItemValue = "Month", IconName = BitIconName.Calendar, IsDisabled = true }
    ];
}
                    

<style>
    .custom-label {
        color: red;
        font-size: 18px;
        font-weight: bold;
    }
</style>

<BitChoiceGroup Items="basicCustoms"
                DefaultValue="@("A")"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })">
    <LabelTemplate>
        <div class="custom-label">
            Custom label <BitIcon IconName="@BitIconName.Filter" />
        </div>
    </LabelTemplate>
</BitChoiceGroup>
@code {
    public class Order
    {
        public string Name { get; set; }
        public string ItemValue { get; set; }
    }
    
    private readonly List<Order> basicCustoms =
    [
        new() { Name = "Custom A", ItemValue = "A" },
        new() { Name = "Custom B", ItemValue = "B" },
        new() { Name = "Custom C", ItemValue = "C" },
        new() { Name = "Custom D", ItemValue = "D" }
    ];
}
                    

<style>
    .custom-container {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
    }

    .custom-circle {
        width: 20px;
        height: 20px;
        border: 1px solid;
        border-radius: 10px;
    }

    .custom-container:hover .custom-circle {
        border-top: 5px solid #C66;
        border-bottom: 5px solid #6C6;
        border-left: 5px solid #66C;
        border-right: 5px solid #CC6;
    }

    .custom-container.selected {
        color: #C66;
    }

    .custom-container.selected .custom-circle {
        border-top: 10px solid #C66;
        border-bottom: 10px solid #6C6;
        border-left: 10px solid #66C;
        border-right: 10px solid #CC6;
    }
</style>

<BitChoiceGroup Label="ItemPrefixTemplate" Items="basicCustoms" DefaultValue="@string.Empty"
                NameSelectors="@(new() { Text = { Selector = i => i.Name},
                                         Value = { Selector = i => i.ItemValue },
                                         Index = nameof(Order.Idx) })">
    <ItemPrefixTemplate Context="item">
        @(item.Idx + 1).&nbsp;
    </ItemPrefixTemplate>
</BitChoiceGroup>

<BitChoiceGroup Label="ItemLabelTemplate" @bind-Value="itemLabelTemplateValue"
                Items="itemLabelTemplateCustoms"
                NameSelectors="@(new() { Value = { Selector = i => i.ItemValue } })">
    <ItemLabelTemplate Context="custom">
        <div class="custom-container @(itemLabelTemplateValue == custom.ItemValue ? "selected" : string.Empty)">
            <BitIcon IconName="@custom.IconName" />
            <span>@custom.Name</span>
        </div>
    </ItemLabelTemplate>
</BitChoiceGroup>

<BitChoiceGroup Label="ItemTemplate" @bind-Value="itemTemplateValue"
                Items="itemTemplateCustoms"
                NameSelectors="@(new() { Value = { Name = nameof(Order.ItemValue) } })">
    <ItemTemplate Context="custom">
        <div class="custom-container @(itemTemplateValue == custom.ItemValue ? "selected" : string.Empty)">
            <div class="custom-circle"></div>
            <span>@custom.Name</span>
        </div>
    </ItemTemplate>
</BitChoiceGroup>


<BitChoiceGroup Label="Item's Template" Items="itemTemplateCustoms2" @bind-Value="itemTemplateValue2"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, 
                                         Value = { Name = nameof(Order.ItemValue) },
                                         Template = { Name = nameof(Order.Fragment) } })" />
@code {
    private string itemLabelTemplateValue = "Day";
    private string itemTemplateValue = "Day";
    private string itemTemplateValue2 = "Day";
    
    public class Order
    {
        public string? Name { get; set; }
        public string? ItemValue { get; set; }
        public string? IconName { get; set; }
        public RenderFragment<Order>? Fragment { get; set; }
        public int Idx { get; set; }
    }
    
    private readonly List<Order> basicCustoms =
    [
        new() { Name = "Custom A", ItemValue = "A" },
        new() { Name = "Custom B", ItemValue = "B" },
        new() { Name = "Custom C", ItemValue = "C" },
        new() { Name = "Custom D", ItemValue = "D" }
    ];
    
    private readonly List<Order> itemLabelTemplateCustoms =
        [
            new() { Name = "Day", ItemValue = "Day", IconName = BitIconName.CalendarDay },
            new() { Name = "Week", ItemValue = "Week", IconName = BitIconName.CalendarWeek },
            new() { Name = "Month", ItemValue = "Month", IconName = BitIconName.Calendar }
        ];
    
    private readonly List<Order> itemTemplateCustoms =
    [
        new() { Name = "Day", ItemValue = "Day" },
        new() { Name = "Week", ItemValue = "Week" },
        new() { Name = "Month", ItemValue = "Month" }
    ];
    
    private List<Order> itemTemplateCustoms2 = default!;    
    protected override void OnInitialized()
    {
        itemTemplateCustoms2 =
        [
            new()
            {
                Name = "Day",
                ItemValue = "Day",
                Fragment = (item => @<div class="custom-container @(itemTemplateValue2 == item.ItemValue ? "selected" : "")">
                                         <div class="custom-circle" />
                                         <span style="color:red">@item.Name</span>
                                     </div>)
            },
            new()
            {
                Name = "Week",
                ItemValue = "Week",
                Fragment = (item => @<div class="custom-container @(itemTemplateValue2 == item.ItemValue ? "selected" : "")">
                                         <div class="custom-circle" />
                                         <span style="color:green">@item.Name</span>
                                     </div>)
            },
            new()
            {
                Name = "Month",
                ItemValue = "Month",
                Fragment = (item => @<div class="custom-container @(itemTemplateValue2 == item.ItemValue ? "selected" : "")">
                                         <div class="custom-circle" />
                                         <span style="color:blue">@item.Name</span>
                                     </div>)
            }
        ];
    }
}
                    

<BitChoiceGroup Label="One-way" Value="@oneWayValue"
                Items="basicCustoms"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />
<BitTextField @bind-Value="oneWayValue" />

<BitChoiceGroup Label="Two-way" @bind-Value="twoWayValue"
                Items="basicCustoms"
                NameSelectors="@(new() { Text = { Selector = i => i.Name }, Value = { Selector = i => i.ItemValue } })" />
<BitTextField @bind-Value="twoWayValue" />
@code {
    private string oneWayValue = "A";
    private string twoWayValue = "A";
    
    public class Order
    {
        public string? Name { get; set; }
        public string? ItemValue { get; set; }
    }
    
    private readonly List<Order> basicCustoms =
    [
        new() { Name = "Custom A", ItemValue = "A" },
        new() { Name = "Custom B", ItemValue = "B" },
        new() { Name = "Custom C", ItemValue = "C" },
        new() { Name = "Custom D", ItemValue = "D" }
    ];
}
                    

<style>
    .validation-message {
        color: red;
    }
</style>

<EditForm Model="@validationModel" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit">
    <DataAnnotationsValidator />
    
    <BitChoiceGroup @bind-Value="validationModel.Value"
                    Items="basicCustoms"
                    NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />
    <ValidationMessage For="@(() => validationModel.Value)" />
    
    <BitButton ButtonType="BitButtonType.Submit">Submit</BitButton>
</EditForm>
@code {
    public class ChoiceGroupValidationModel
    {
        [Required(ErrorMessage = "Pick one")]
        public string Value { get; set; }
    }
    
    public ChoiceGroupValidationModel validationModel = new();
    
    private void HandleValidSubmit() { }
    private void HandleInvalidSubmit() { }
    
    public class Order
    {
        public string Name { get; set; }
        public string ItemValue { get; set; }
    }
    
    private readonly List<Order> basicCustoms =
    [
        new() { Name = "Custom A", ItemValue = "A" },
        new() { Name = "Custom B", ItemValue = "B" },
        new() { Name = "Custom C", ItemValue = "C" },
        new() { Name = "Custom D", ItemValue = "D" }
    ];
}
                    

<BitChoiceGroup Size="BitSize.Small"
                Label="Small"
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" Horizontal />

<BitChoiceGroup Size="BitSize.Medium"
                Label="Medium"
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" Horizontal />

<BitChoiceGroup Size="BitSize.Large"
                Label="Large"
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" Horizontal />

<BitChoiceGroup Size="BitSize.Small"
                Label="Small"
                Items="iconCustoms"
                DefaultValue="@("Day")"
                NameSelectors="@(new() { Text = { Selector = i => i.Name },
                                          Value = { Selector = i => i.ItemValue },
                                          IconName = { Selector = i => i.IconName },
                                          IsEnabled = { Selector = i => i.IsDisabled is false } })" Horizontal Inline />

<BitChoiceGroup Size="BitSize.Medium"
                Label="Medium"
                Items="iconCustoms"
                DefaultValue="@("Day")"
                NameSelectors="@(new() { Text = { Selector = i => i.Name },
                                          Value = { Selector = i => i.ItemValue },
                                          IconName = { Selector = i => i.IconName },
                                          IsEnabled = { Selector = i => i.IsDisabled is false } })" Horizontal Inline />

<BitChoiceGroup Size="BitSize.Large"
                Label="Large"
                Items="iconCustoms"
                DefaultValue="@("Day")"
                NameSelectors="@(new() { Text = { Selector = i => i.Name },
                                          Value = { Selector = i => i.ItemValue },
                                          IconName = { Selector = i => i.IconName },
                                          IsEnabled = { Selector = i => i.IsDisabled is false } })" Horizontal Inline />

<BitChoiceGroup Size="BitSize.Small"
                Label="Small"
                Items="iconCustoms"
                DefaultValue="@("Day")"
                NameSelectors="@(new() { Text = { Selector = i => i.Name },
                                          Value = { Selector = i => i.ItemValue },
                                          IconName = { Selector = i => i.IconName },
                                          IsEnabled = { Selector = i => i.IsDisabled is false } })" Horizontal />

<BitChoiceGroup Size="BitSize.Medium"
                Label="Medium"
                Items="iconCustoms"
                DefaultValue="@("Day")"
                NameSelectors="@(new() { Text = { Selector = i => i.Name },
                                          Value = { Selector = i => i.ItemValue },
                                          IconName = { Selector = i => i.IconName },
                                          IsEnabled = { Selector = i => i.IsDisabled is false } })" Horizontal />

<BitChoiceGroup Size="BitSize.Large"
                Label="Large"
                Items="iconCustoms"
                DefaultValue="@("Day")"
                NameSelectors="@(new() { Text = { Selector = i => i.Name },
                                          Value = { Selector = i => i.ItemValue },
                                          IconName = { Selector = i => i.IconName },
                                          IsEnabled = { Selector = i => i.IsDisabled is false } })" Horizontal />
@code {
    public class Order
    {
        public string Name { get; set; }
        public string ItemValue { get; set; }
        public string? IconName { get; set; }
        public bool IsDisabled { get; set; }
    }
    
    private readonly List<Order> basicCustoms =
    [
        new() { Name = "Custom A", ItemValue = "A" },
        new() { Name = "Custom B", ItemValue = "B" },
        new() { Name = "Custom C", ItemValue = "C" },
        new() { Name = "Custom D", ItemValue = "D" }
    ];
    
    private readonly List<Order> iconCustoms =
    [
        new() { Name = "Day", ItemValue = "Day", IconName = BitIconName.CalendarDay },
        new() { Name = "Week", ItemValue = "Week", IconName = BitIconName.CalendarWeek },
        new() { Name = "Month", ItemValue = "Month", IconName = BitIconName.Calendar, IsDisabled = true }
    ];
}
                    

<BitChoiceGroup Color="BitColor.Primary" 
                Label="Primary" 
                Horizontal
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />

<BitChoiceGroup Color="BitColor.Secondary" 
                Label="Secondary" 
                Horizontal
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />

<BitChoiceGroup Color="BitColor.Tertiary" 
                Label="Tertiary" 
                Horizontal
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />

<BitChoiceGroup Color="BitColor.Info" 
                Label="Info" 
                Horizontal
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />

<BitChoiceGroup Color="BitColor.Success" 
                Label="Success" 
                Horizontal
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />

<BitChoiceGroup Color="BitColor.Warning" 
                Label="Warning" 
                Horizontal
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />

<BitChoiceGroup Color="BitColor.SevereWarning" 
                Label="SevereWarning" 
                Horizontal
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />

<BitChoiceGroup Color="BitColor.Error" 
                Label="Error" 
                Horizontal
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />

<BitChoiceGroup Color="BitColor.PrimaryBackground" 
                Label="PrimaryBackground" 
                Horizontal
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />

<BitChoiceGroup Color="BitColor.SecondaryBackground" 
                Label="SecondaryBackground" 
                Horizontal
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />

<BitChoiceGroup Color="BitColor.TertiaryBackground" 
                Label="TertiaryBackground" 
                Horizontal
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />

<BitChoiceGroup Color="BitColor.PrimaryForeground" 
                Label="PrimaryForeground" 
                Horizontal
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />

<BitChoiceGroup Color="BitColor.SecondaryForeground" 
                Label="SecondaryForeground" 
                Horizontal
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />

<BitChoiceGroup Color="BitColor.TertiaryForeground" 
                Label="TertiaryForeground" 
                Horizontal
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />

<BitChoiceGroup Color="BitColor.PrimaryBorder" 
                Label="PrimaryBorder" 
                Horizontal
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />

<BitChoiceGroup Color="BitColor.SecondaryBorder" 
                Label="SecondaryBorder" 
                Horizontal
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />

<BitChoiceGroup Color="BitColor.TertiaryBorder" 
                Label="TertiaryBorder" 
                Horizontal
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />
@code {
    public class Order
    {
        public string Name { get; set; }
        public string ItemValue { get; set; }
    }
    
    private readonly List<Order> basicCustoms =
    [
        new() { Name = "Custom A", ItemValue = "A" },
        new() { Name = "Custom B", ItemValue = "B" },
        new() { Name = "Custom C", ItemValue = "C" },
        new() { Name = "Custom D", ItemValue = "D" }
    ];
}
                    

<style>
    .custom-class {
        color: dodgerblue;
        margin-inline: 16px;
        text-shadow: dodgerblue 0 0 8px;
    }


    .custom-item {
        padding: 8px;
        border-radius: 20px;
        border: 1px solid gray;
    }


    .custom-root {
        margin-inline: 16px;
    }

    .custom-text {
        font-weight: bold;
    }

    .custom-radio-btn::after {
        width: 8px;
        height: 8px;
        border: none;
        inset-inline-start: 6px;
        background-color: whitesmoke;
    }

    .custom-checked .custom-radio-btn::after {
        background-color: whitesmoke;
    }

    .custom-radio-btn::before {
        background-color: whitesmoke;
    }

    .custom-checked .custom-radio-btn::before {
        background-color: dodgerblue;
    }
</style>


<BitChoiceGroup Label="Styled ChoiceGroup"
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                Style="margin-inline: 16px; color:lightseagreen; text-shadow: lightseagreen 0 0 8px;"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />

<BitChoiceGroup Label="Classed ChoiceGroup"
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                Class="custom-class"
                NameSelectors="@(new() { Text = { Selector = i => i.Name }, Value = { Selector = i => i.ItemValue } })" />


<BitChoiceGroup Items="itemStyleClassCustoms"
                DefaultValue="itemStyleClassCustoms[1].ItemValue"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, 
                                         Value = { Name = nameof(Order.ItemValue) },
                                         Class = { Name = nameof(Order.Class) },
                                         Style = { Name = nameof(Order.Style) } })" />


<BitChoiceGroup Label="Styles"
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                Styles="@(new() { Root = "margin-inline: 16px; --item-background: #d3d3d347; --item-border: 1px solid gray;",
                                  ItemLabel = "width: 100%; cursor: pointer;",
                                  ItemChecked = "--item-background: #87cefa24; --item-border: 1px solid dodgerblue;",
                                  ItemContainer = "padding: 8px; border-radius: 2px; background-color: var(--item-background); border: var(--item-border);" })"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />

<BitChoiceGroup Label="Classes"
                Items="basicCustoms"
                DefaultValue="basicCustoms[1].ItemValue"
                Classes="@(new() { Root = "custom-root",
                                   ItemText = "custom-text",
                                   ItemChecked = "custom-checked",
                                   ItemRadioButton = "custom-radio-btn" })"
                NameSelectors="@(new() { Text = { Selector = i => i.Name }, Value = { Selector = i => i.ItemValue } })"/>
@code {
    public class Order
    {
        public string Name { get; set; }
        public string ItemValue { get; set; }
        public string? Class { get; set; }
        public string? Style { get; set; }
    }
    
    private readonly List<Order> basicCustoms =
    [
        new() { Name = "Custom A", ItemValue = "A" },
        new() { Name = "Custom B", ItemValue = "B" },
        new() { Name = "Custom C", ItemValue = "C" },
        new() { Name = "Custom D", ItemValue = "D" }
    ];
    
    private readonly List<Order> itemStyleClassCustoms =
    [
        new() { Name = "Custom A", ItemValue = "A", Class = "custom-item" },
        new() { Name = "Custom B", ItemValue = "B", Style = "padding: 8px; border-radius: 20px; border: 1px solid gray;" },
        new() { Name = "Custom C", ItemValue = "C", Class = "custom-item" },
        new() { Name = "Custom D", ItemValue = "D", Class = "custom-item" }
    ];
}
                    

<BitChoiceGroup Label="ساده"
                Dir="BitDir.Rtl"
                DefaultValue="@("A")"
                Items="rtlCustoms"
                NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />

<BitChoiceGroup Label="غیرفعال"
                Dir="BitDir.Rtl"
                IsEnabled="false"
                DefaultValue="@("A")"
                Items="rtlCustoms"
                NameSelectors="@(new() { Text = { Selector = i => i.Name }, Value = { Selector = i => i.ItemValue } })" />
@code {
    public class Order
    {
        public string Name { get; set; }
        public string ItemValue { get; set; }
    }
    
    private readonly List<Order> rtlCustoms =
    [
        new() { Name = "ویژه آ", ItemValue = "A" },
        new() { Name = "ویژه ب", ItemValue = "B" },
        new() { Name = "ویژه پ", ItemValue = "C" },
        new() { Name = "ویژه ت", ItemValue = "D" }
    ];
}
                    

<BitChoiceGroup Label="Basic Options" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string">
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>

<BitChoiceGroup Label="NoCircle" NoCircle DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string">
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>

<BitChoiceGroup Label="Disabled ChoiceGroup"
                IsEnabled="false"
                DefaultValue="@("A")"
                TItem="BitChoiceGroupOption<string>" TValue="string">
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>

<BitChoiceGroup Label="ChoiceGroup with Disabled Option"
                DefaultValue="@("A")"
                TItem="BitChoiceGroupOption<string>" TValue="string">
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" IsEnabled="false" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>

Showcases BitChoiceGroup with image and icon items.

Image Options

Bar

Pie

Icon Options

Day

Week

Month

Inline:

Image Options

Bar

Pie

Icon Options

Day

Week

Month

<BitChoiceGroup Label="Image Options"
                DefaultValue="@("Bar")"
                TItem="BitChoiceGroupOption<string>" TValue="string">
    <BitChoiceGroupOption Text="Bar"
                          Value="@("Bar")"
                          ImageAlt="Alt for Bar image"
                          ImageSize="@(new BitImageSize(32, 32))"
                          ImageSrc="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-unselected.png"
                          SelectedImageSrc="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-selected.png" />
    <BitChoiceGroupOption Text="Pie"
                          Value="@("Pie")"
                          ImageAlt="Alt for Pie image"
                          ImageSize="@(new BitImageSize(32, 32))"
                          ImageSrc="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-unselected.png"
                          SelectedImageSrc="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-selected.png" />
</BitChoiceGroup>

<BitChoiceGroup Label="Icon Options"
                DefaultValue="@("Day")"
                TItem="BitChoiceGroupOption<string>" TValue="string">
    <BitChoiceGroupOption Text="Day" Value="@("Day")" IconName="@BitIconName.CalendarDay" />
    <BitChoiceGroupOption Text="Week" Value="@("Week")" IconName="@BitIconName.CalendarWeek" />
    <BitChoiceGroupOption Text="Month" Value="@("Month")" IconName="@BitIconName.Calendar" IsEnabled="false" />
</BitChoiceGroup>


<BitChoiceGroup Label="Image Options"
                Inline
                DefaultValue="@("Bar")"
                TItem="BitChoiceGroupOption<string>" TValue="string">
    <BitChoiceGroupOption Text="Bar"
                          Value="@("Bar")"
                          ImageAlt="Alt for Bar image"
                          ImageSize="@(new BitImageSize(20, 20))"
                          ImageSrc="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-unselected.png"
                          SelectedImageSrc="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-selected.png" />
    <BitChoiceGroupOption Text="Pie"
                          Value="@("Pie")"
                          ImageAlt="Alt for Pie image"
                          ImageSize="@(new BitImageSize(20, 20))"
                          ImageSrc="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-unselected.png"
                          SelectedImageSrc="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-selected.png" />
</BitChoiceGroup>

<BitChoiceGroup Label="Icon Options"
                Inline
                DefaultValue="@("Day")"
                TItem="BitChoiceGroupOption<string>" TValue="string">
    <BitChoiceGroupOption Text="Day" Value="@("Day")" IconName="@BitIconName.CalendarDay" />
    <BitChoiceGroupOption Text="Week" Value="@("Week")" IconName="@BitIconName.CalendarWeek" />
    <BitChoiceGroupOption Text="Month" Value="@("Month")" IconName="@BitIconName.Calendar" IsEnabled="false" />
</BitChoiceGroup>

Displays the BitChoiceGroup component in a horizontal layout, demonstrating various configurations.

Basic

Option A

Option B

Option C

Option D

Disabled

Option A

Option B

Option C

Option D

Image

Bar

Pie

Icon

Day

Week

Month

<BitChoiceGroup Label="Basic" TItem="BitChoiceGroupOption<string>" TValue="string" DefaultValue="@("A")" Horizontal>
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>

<BitChoiceGroup Label="Disabled" TItem="BitChoiceGroupOption<string>" TValue="string" IsEnabled="false" DefaultValue="@("A")" Horizontal>
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>

<BitChoiceGroup Label="Image" TItem="BitChoiceGroupOption<string>" TValue="string" DefaultValue="@("Bar")" Horizontal>
    <BitChoiceGroupOption Text="Bar"
                          Value="@("Bar")"
                          ImageAlt="Alt for Bar image"
                          ImageSize="@(new BitImageSize(32, 32))" 
                          ImageSrc="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-unselected.png"
                          SelectedImageSrc="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-selected.png" />
    <BitChoiceGroupOption Text="Pie"
                          Value="@("Pie")"
                          ImageAlt="Alt for Pie image"
                          ImageSize="@(new BitImageSize(32, 32))" 
                          ImageSrc="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-unselected.png"
                          SelectedImageSrc="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-selected.png" />
</BitChoiceGroup>

<BitChoiceGroup Label="Icon" TItem="BitChoiceGroupOption<string>" TValue="string" DefaultValue="@("Day")" Horizontal>
    <BitChoiceGroupOption Text="Day" Value="@("Day")" IconName="@BitIconName.CalendarDay" />
    <BitChoiceGroupOption Text="Week" Value="@("Week")" IconName="@BitIconName.CalendarWeek" />
    <BitChoiceGroupOption Text="Month" Value="@("Month")" IconName="@BitIconName.Calendar" IsEnabled="false" />
</BitChoiceGroup>

<BitChoiceGroup Label="Reversed" TItem="BitChoiceGroupOption<string>" TValue="string" DefaultValue="@("A")" Reversed Horizontal>
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>

<style>
    .custom-label {
        color: red;
        font-size: 18px;
        font-weight: bold;
    }
</style>

<BitChoiceGroup TItem="BitChoiceGroupOption<string>" TValue="string" DefaultValue="@("A")">
    <LabelTemplate>
        <div class="custom-label">
            Custom label <BitIcon IconName="@BitIconName.Filter" />
        </div>
    </LabelTemplate>
    <Options>
        <BitChoiceGroupOption Text="Option A" Value="@("A")" />
        <BitChoiceGroupOption Text="Option B" Value="@("B")" />
        <BitChoiceGroupOption Text="Option C" Value="@("C")" />
        <BitChoiceGroupOption Text="Option D" Value="@("D")" />
    </Options>
</BitChoiceGroup>

<style>
    .custom-container {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
    }

    .custom-circle {
        width: 20px;
        height: 20px;
        border: 1px solid;
        border-radius: 10px;
    }

    .custom-container:hover .custom-circle {
        border-top: 5px solid #C66;
        border-bottom: 5px solid #6C6;
        border-left: 5px solid #66C;
        border-right: 5px solid #CC6;
    }

    .custom-container.selected {
        color: #C66;
    }

    .custom-container.selected .custom-circle {
        border-top: 10px solid #C66;
        border-bottom: 10px solid #6C6;
        border-left: 10px solid #66C;
        border-right: 10px solid #CC6;
    }
</style>

<BitChoiceGroup Label="ItemPrefixTemplate" TItem="BitChoiceGroupOption<string>" TValue="string">
    <ItemPrefixTemplate Context="option">
        @(option.Index + 1).&nbsp;
    </ItemPrefixTemplate>
    <Options>
        <BitChoiceGroupOption Text="Option A" Value="@("A")" />
        <BitChoiceGroupOption Text="Option B" Value="@("B")" />
        <BitChoiceGroupOption Text="Option C" Value="@("C")" />
        <BitChoiceGroupOption Text="Option D" Value="@("D")" />
    </Options>
</BitChoiceGroup>

<BitChoiceGroup Label="ItemLabelTemplate" @bind-Value="itemLabelTemplateValue"
                TItem="BitChoiceGroupOption<string>" TValue="string">
    <ItemLabelTemplate Context="option">
        <div class="custom-container @(itemLabelTemplateValue == option.Value ? "selected" : string.Empty)">
            <BitIcon IconName="@option.IconName" />
            <span>@option.Text</span>
        </div>
    </ItemLabelTemplate>
    <Options>
        <BitChoiceGroupOption Text="Day" Value="@("Day")" IconName="@BitIconName.CalendarDay" />
        <BitChoiceGroupOption Text="Week" Value="@("Week")" IconName="@BitIconName.CalendarWeek" />
        <BitChoiceGroupOption Text="Month" Value="@("Month")" IconName="@BitIconName.Calendar" />
    </Options>
</BitChoiceGroup>


<BitChoiceGroup Label="ItemTemplate" @bind-Value="itemTemplateValue"
                TItem="BitChoiceGroupOption<string>" TValue="string">
    <ItemTemplate Context="option">
        <div class="custom-container @(itemTemplateValue == option.Value ? "selected" : string.Empty)">
            <div class="custom-circle"></div>
            <span>@option.Text</span>
        </div>
    </ItemTemplate>
    <Options>
        <BitChoiceGroupOption Text="Day" Value="@("Day")" />
        <BitChoiceGroupOption Text="Week" Value="@("Week")" />
        <BitChoiceGroupOption Text="Month" Value="@("Month")" />
    </Options>
</BitChoiceGroup>

<BitChoiceGroup Label="Item's Template" @bind-Value="itemTemplateValue2"
                TItem="BitChoiceGroupOption<string>" TValue="string">
    <BitChoiceGroupOption Text="Day" Value="@("Day")">
        <Template Context="option">
            <div class="custom-container @(itemTemplateValue2 == option.Value ? "selected" : "")">
                <div class="custom-circle"></div>
                <span style="color:red">@option.Text</span>
            </div>
        </Template>
    </BitChoiceGroupOption>
    <BitChoiceGroupOption Text="Week" Value="@("Week")">
        <Template Context="option">
            <div class="custom-container @(itemTemplateValue2 == option.Value ? "selected" : "")">
                <div class="custom-circle"></div>
                <span style="color:green">@option.Text</span>
            </div>
        </Template>
    </BitChoiceGroupOption>
    <BitChoiceGroupOption Text="Month" Value="@("Month")">
        <Template Context="option">
            <div class="custom-container @(itemTemplateValue2 == option.Value ? "selected" : "")">
                <div class="custom-circle"></div>
                <span style="color:blue">@option.Text</span>
            </div>
        </Template>
    </BitChoiceGroupOption>
</BitChoiceGroup>
@code {
    private string itemTemplateValue = "Day";
    private string itemTemplateValue2 = "Day";
    private string itemLabelTemplateValue = "Day";
}
                    

<BitChoiceGroup Label="One-way" Value="@oneWayValue"
                TItem="BitChoiceGroupOption<string>" TValue="string">
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>
<BitTextField @bind-Value="oneWayValue" />


<BitChoiceGroup Label="Two-way" @bind-Value="twoWayValue"
                TItem="BitChoiceGroupOption<string>" TValue="string">
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>
<BitTextField @bind-Value="twoWayValue" />
@code {
    private string oneWayValue = "A";
    private string twoWayValue = "A";
}
                    

<style>
    .validation-message {
        color: red;
    }
</style>

<EditForm Model="@validationModel" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit">
    <DataAnnotationsValidator />
    
    <BitChoiceGroup TItem="BitChoiceGroupOption<string>" TValue="string" @bind-Value="validationModel.Value">
        <BitChoiceGroupOption Text="Option A" Value="@("A")" />
        <BitChoiceGroupOption Text="Option B" Value="@("B")" />
        <BitChoiceGroupOption Text="Option C" Value="@("C")" />
        <BitChoiceGroupOption Text="Option D" Value="@("D")" />
    </BitChoiceGroup>
    <ValidationMessage For="@(() => validationModel.Value)" />
    
    <BitButton Style="margin-top: 10px;" ButtonType="BitButtonType.Submit">Submit</BitButton>
</EditForm>
@code {
    public class ChoiceGroupValidationModel
    {
        [Required(ErrorMessage = "Pick one")]
        public string Value { get; set; }
    }
    
    public ChoiceGroupValidationModel validationModel = new();
    
    private void HandleValidSubmit() { }
    private void HandleInvalidSubmit() { }
}
                    

<BitChoiceGroup Size="BitSize.Small" Label="Small" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>

<BitChoiceGroup Size="BitSize.Medium" Label="Medium" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>

<BitChoiceGroup Size="BitSize.Large" Label="Large" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>

<BitChoiceGroup Size="BitSize.Small" 
                Label="Small" 
                DefaultValue="@("Day")"
                TItem="BitChoiceGroupOption<string>" 
                TValue="string" Horizontal Inline>
    <BitChoiceGroupOption Text="Day" Value="@("Day")" IconName="@BitIconName.CalendarDay" />
    <BitChoiceGroupOption Text="Week" Value="@("Week")" IconName="@BitIconName.CalendarWeek" />
    <BitChoiceGroupOption Text="Month" Value="@("Month")" IconName="@BitIconName.Calendar" IsEnabled="false" />
</BitChoiceGroup>

<BitChoiceGroup Size="BitSize.Medium"
                Label="Medium"
                DefaultValue="@("Day")"
                TItem="BitChoiceGroupOption<string>" 
                TValue="string" Horizontal Inline>
    <BitChoiceGroupOption Text="Day" Value="@("Day")" IconName="@BitIconName.CalendarDay" />
    <BitChoiceGroupOption Text="Week" Value="@("Week")" IconName="@BitIconName.CalendarWeek" />
    <BitChoiceGroupOption Text="Month" Value="@("Month")" IconName="@BitIconName.Calendar" IsEnabled="false" />
</BitChoiceGroup>

<BitChoiceGroup Size="BitSize.Large"
                Label="Large"
                DefaultValue="@("Day")"
                TItem="BitChoiceGroupOption<string>" 
                TValue="string" Horizontal Inline>
    <BitChoiceGroupOption Text="Day" Value="@("Day")" IconName="@BitIconName.CalendarDay" />
    <BitChoiceGroupOption Text="Week" Value="@("Week")" IconName="@BitIconName.CalendarWeek" />
    <BitChoiceGroupOption Text="Month" Value="@("Month")" IconName="@BitIconName.Calendar" IsEnabled="false" />
</BitChoiceGroup>

<BitChoiceGroup Size="BitSize.Small"
                Label="Small"
                DefaultValue="@("Day")"
                TItem="BitChoiceGroupOption<string>" 
                TValue="string" Horizontal Inline>
    <BitChoiceGroupOption Text="Day" Value="@("Day")" IconName="@BitIconName.CalendarDay" />
    <BitChoiceGroupOption Text="Week" Value="@("Week")" IconName="@BitIconName.CalendarWeek" />
    <BitChoiceGroupOption Text="Month" Value="@("Month")" IconName="@BitIconName.Calendar" IsEnabled="false" />
</BitChoiceGroup>

<BitChoiceGroup Size="BitSize.Medium"
                Label="Medium"
                DefaultValue="@("Day")"
                TItem="BitChoiceGroupOption<string>" 
                TValue="string" Horizontal Inline>
    <BitChoiceGroupOption Text="Day" Value="@("Day")" IconName="@BitIconName.CalendarDay" />
    <BitChoiceGroupOption Text="Week" Value="@("Week")" IconName="@BitIconName.CalendarWeek" />
    <BitChoiceGroupOption Text="Month" Value="@("Month")" IconName="@BitIconName.Calendar" IsEnabled="false" />
</BitChoiceGroup>

<BitChoiceGroup Size="BitSize.Large"
                Label="Large"
                DefaultValue="@("Day")"
                TItem="BitChoiceGroupOption<string>" 
                TValue="string" Horizontal Inline>
    <BitChoiceGroupOption Text="Day" Value="@("Day")" IconName="@BitIconName.CalendarDay" />
    <BitChoiceGroupOption Text="Week" Value="@("Week")" IconName="@BitIconName.CalendarWeek" />
    <BitChoiceGroupOption Text="Month" Value="@("Month")" IconName="@BitIconName.Calendar" IsEnabled="false" />
</BitChoiceGroup>

<BitChoiceGroup Color="BitColor.Primary" Label="Primary" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>

<BitChoiceGroup Color="BitColor.Secondary" Label="Secondary" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>

<BitChoiceGroup Color="BitColor.Tertiary" Label="Tertiary" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>

<BitChoiceGroup Color="BitColor.Info" Label="Info" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>
            
<BitChoiceGroup Color="BitColor.Success" Label="Success" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>
           
<BitChoiceGroup Color="BitColor.Warning" Label="Warning" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>
            
<BitChoiceGroup Color="BitColor.SevereWarning" Label="SevereWarning" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>
            
<BitChoiceGroup Color="BitColor.Error" Label="Error" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>
            
    <BitChoiceGroup Color="BitColor.PrimaryBackground" Label="PrimaryBackground" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>
                
<BitChoiceGroup Color="BitColor.SecondaryBackground" Label="SecondaryBackground" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>
                
<BitChoiceGroup Color="BitColor.TertiaryBackground" Label="TertiaryBackground" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>
                
<BitChoiceGroup Color="BitColor.PrimaryForeground" Label="PrimaryForeground" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>
                
<BitChoiceGroup Color="BitColor.SecondaryForeground" Label="SecondaryForeground" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>
                
<BitChoiceGroup Color="BitColor.TertiaryForeground" Label="TertiaryForeground"  DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>
                
<BitChoiceGroup Color="BitColor.PrimaryBorder" Label="PrimaryBorder" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>
                
<BitChoiceGroup Color="BitColor.SecondaryBorder" Label="SecondaryBorder" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>
                
<BitChoiceGroup Color="BitColor.TertiaryBorder" Label="TertiaryBorder" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>

<style>
    .custom-class {
        color: dodgerblue;
        margin-inline: 16px;
        text-shadow: dodgerblue 0 0 8px;
    }


    .custom-item {
        padding: 8px;
        border-radius: 20px;
        border: 1px solid gray;
    }


    .custom-root {
        margin-inline: 16px;
    }

    .custom-text {
        font-weight: bold;
    }

    .custom-radio-btn::after {
        width: 8px;
        height: 8px;
        border: none;
        inset-inline-start: 6px;
        background-color: whitesmoke;
    }

    .custom-checked .custom-radio-btn::after {
        background-color: whitesmoke;
    }

    .custom-radio-btn::before {
        background-color: whitesmoke;
    }

    .custom-checked .custom-radio-btn::before {
        background-color: dodgerblue;
    }
</style>


<BitChoiceGroup Label="Styled ChoiceGroup" DefaultValue="@("B")"
                TItem="BitChoiceGroupOption<string>" TValue="string"
                Style="margin-inline: 16px; color:lightseagreen; text-shadow: lightseagreen 0 0 8px;">
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>

<BitChoiceGroup Label="Classed ChoiceGroup" DefaultValue="@("B")"
                TItem="BitChoiceGroupOption<string>" TValue="string"
                Class="custom-class">
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>


<BitChoiceGroup DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string">
    <BitChoiceGroupOption Text="Option A" Value="@("A")" Class="custom-item" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" Style="padding: 8px; border-radius: 20px; border: 1px solid gray;" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" Class="custom-item" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" Class="custom-item" />
</BitChoiceGroup>


<BitChoiceGroup Label="Styles" DefaultValue="@("B")"
                TItem="BitChoiceGroupOption<string>" TValue="string"
                Styles="@(new() { Root = "margin-inline: 16px; --item-background: #d3d3d347; --item-border: 1px solid gray;",
                                  ItemLabel = "width: 100%; cursor: pointer;",
                                  ItemChecked = "--item-background: #87cefa24; --item-border: 1px solid dodgerblue;",
                                  ItemContainer = "padding: 8px; border-radius: 2px; background-color: var(--item-background); border: var(--item-border);" })">
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>

<BitChoiceGroup Label="Classes" DefaultValue="@("B")"
                TItem="BitChoiceGroupOption<string>" TValue="string"
                Classes="@(new() { Root = "custom-root",
                                   ItemText = "custom-text",
                                   ItemChecked = "custom-checked",
                                   ItemRadioButton = "custom-radio-btn" })">
    <BitChoiceGroupOption Text="Option A" Value="@("A")" />
    <BitChoiceGroupOption Text="Option B" Value="@("B")" />
    <BitChoiceGroupOption Text="Option C" Value="@("C")" />
    <BitChoiceGroupOption Text="Option D" Value="@("D")" />
</BitChoiceGroup>

<BitChoiceGroup Label="ساده" TItem="BitChoiceGroupOption<string>" TValue="string" DefaultValue="@("A")" Dir="BitDir.Rtl">
    <BitChoiceGroupOption Text="گزینه آ" Value="@("A")" />
    <BitChoiceGroupOption Text="گزینه ب" Value="@("B")" />
    <BitChoiceGroupOption Text="گزینه پ" Value="@("C")" />
    <BitChoiceGroupOption Text="گزینه ت" Value="@("D")" />
</BitChoiceGroup>

<BitChoiceGroup Label="غیرفعال" TItem="BitChoiceGroupOption<string>" TValue="string" IsEnabled="false" DefaultValue="@("A")" Dir="BitDir.Rtl">
    <BitChoiceGroupOption Text="گزینه آ" Value="@("A")" />
    <BitChoiceGroupOption Text="گزینه ب" Value="@("B")" />
    <BitChoiceGroupOption Text="گزینه پ" Value="@("C")" />
    <BitChoiceGroupOption Text="گزینه ت" Value="@("D")" />
</BitChoiceGroup>