\n**Basic**: ```razor ``` ```csharp private readonly List> 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" } ]; ``` \n**Disabled & ReadOnly**: ```razor ``` ```csharp private string readOnlyValue = "A"; private readonly List> 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> 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" } ]; ``` \n**Images and Icons**: ```razor ``` ```csharp private readonly List> 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> 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> 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 } ]; ``` \n**LabelTemplate**: ```razor

Custom label

@item.Text

``` ```csharp private string itemTemplateValue = "Day"; private string itemTemplateValue2 = "Day"; private string itemLabelTemplateValue = "Day"; private readonly List> 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> 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> itemTemplateItems = [ new() { Text = "Day", Value = "Day" }, new() { Text = "Week", Value = "Week" }, new() { Text = "Month", Value = "Month" } ]; private List> itemTemplateItems2 = default!; protected override void OnInitialized() { itemTemplateItems2 = new() { new() { Text = "Day", Value = "Day", Template = (item => @

@item.Text

) }, new() { Text = "Week", Value = "Week", Template = (item => @

@item.Text

) }, new() { Text = "Month", Value = "Month", Template = (item => @

@item.Text

) } }; } ``` \n**Validation**: ```razor

Submit ``` ```csharp 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> 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" } ]; ``` \n**Item descriptions**: ```razor ``` ```csharp private readonly List> descriptionItems = [ new() { Text = "Daily", Value = "Daily", Description = "Backs up every night at 2 AM." }, new() { Text = "Weekly", Value = "Weekly", Description = "Backs up every Sunday at 2 AM." }, new() { Text = "Monthly", Value = "Monthly", Description = "Backs up on the first day of each month." } ]; ``` \n**Gap**: ```razor ``` ```csharp private readonly List> 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" } ]; ``` \n**Prefix & Suffix**: ```razor ``` ```csharp private readonly List> prefixItems = [ new() { Text = "Standard", Value = "Standard", Prefix = "$0 - " }, new() { Text = "Express", Value = "Express", Prefix = "$10 - " }, new() { Text = "Overnight", Value = "Overnight", Prefix = "$25 - " } ]; private readonly List> suffixItems = [ new() { Text = "Standard", Value = "Standard", Suffix = "Free" }, new() { Text = "Express", Value = "Express", Suffix = "$10" }, new() { Text = "Overnight", Value = "Overnight", Suffix = "$25" } ]; ``` \n**Events**: ```razor

Changed value: @changedValue

Clicked item: @clickedItem

Focused item: @focusedItem

Blurred item: @blurredItem

``` ```csharp private string? changedValue; private string? clickedItem; private string? focusedItem; private string? blurredItem; private readonly List> 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" } ]; ``` \n**Dynamic items**: ```razor Add item Remove item Reverse items @(item.Index + 1). ``` ```csharp private int dynamicCounter = 3; private string? dynamicValue = "1"; private List> dynamicItems = [ new() { Text = "Item 1", Value = "1" }, new() { Text = "Item 2", Value = "2" }, new() { Text = "Item 3", Value = "3" } ]; private void AddDynamicItem() { dynamicCounter++; dynamicItems = [.. dynamicItems, new BitChoiceGroupItem { Text = $"Item {dynamicCounter}", Value = $"{dynamicCounter}" }]; } private void RemoveDynamicItem() { if (dynamicItems.Count <= 1) return; dynamicItems = [.. dynamicItems.Take(dynamicItems.Count - 1)]; } private void ReverseDynamicItems() { dynamicItems = [.. Enumerable.Reverse(dynamicItems)]; } ``` \n**Group description**: ```razor

Only the selected environment receives the new build.

``` ```csharp private readonly List> deploymentItems = [ new() { Text = "Development", Value = "Development" }, new() { Text = "Staging", Value = "Staging" }, new() { Text = "Production", Value = "Production" } ]; ``` \n**Item title**: ```razor ``` ```csharp private readonly List> titleItems = [ new() { Text = "1 h", Value = "1h", Title = "Delivered within one hour of dispatch" }, new() { Text = "24 h", Value = "24h", Title = "Delivered within one business day" }, new() { Text = "72 h", Value = "72h", Title = "Delivered within three business days" } ]; ``` \n**Variant**: ```razor ``` ```csharp private readonly List> descriptionItems = [ new() { Text = "Daily", Value = "Daily", Description = "Backs up every night at 2 AM." }, new() { Text = "Weekly", Value = "Weekly", Description = "Backs up every Sunday at 2 AM." }, new() { Text = "Monthly", Value = "Monthly", Description = "Backs up on the first day of each month." } ]; private readonly List> 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 } ]; ``` \n**Accessibility**: ```razor

How dense should the rows be?

Focus the ChoiceGroup below ``` ```csharp private BitChoiceGroup, string>? focusRef; private readonly List> sortItems = [ new() { Text = "Ascending", Value = "Asc" }, new() { Text = "Descending", Value = "Desc" } ]; private readonly List> densityItems = [ new() { Text = "Compact", Value = "Compact" }, new() { Text = "Cozy", Value = "Cozy" }, new() { Text = "Comfortable", Value = "Comfortable" } ]; private readonly List> ratingItems = [ new() { Text = "1", Value = "1", AriaLabel = "1 star" }, new() { Text = "2", Value = "2", AriaLabel = "2 stars" }, new() { Text = "3", Value = "3", AriaLabel = "3 stars" }, new() { Text = "4", Value = "4", AriaLabel = "4 stars" }, new() { Text = "5", Value = "5", AriaLabel = "5 stars" } ]; private readonly List> 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" } ]; ``` \n**Cascading parameters**: ```razor ``` ```csharp private readonly BitChoiceGroupParams[] choiceGroupParams = [ new() { Gap = "0.5rem", FullWidth = true, Variant = BitVariant.Outline, } ]; ``` \n**Color**: ```razor

``` ```csharp private readonly List> 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" } ]; ``` \n**External Icons**: ```razor ``` ```csharp private readonly List> externalIconItems = [ new() { Text = "Day", Value = "Day", Icon = BitIconInfo.Fa("solid sun") }, new() { Text = "Week", Value = "Week", Icon = BitIconInfo.Css("fa-solid fa-calendar-week") }, new() { Text = "Month", Value = "Month", Icon = BitIconInfo.Bi("calendar-month") } ]; ``` \n**Size**: ```razor ``` ```csharp private readonly List> 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> 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 } ]; ``` \n**Style & Class**: ```razor

``` ```csharp private readonly List> 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> 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" } ]; ```

\n**Basic**: ```razor ``` ```csharp public class Order { public string Name { get; set; } public string ItemValue { get; set; } } private readonly List 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" } ]; ``` \n**Disabled & ReadOnly**: ```razor ``` ```csharp private string readOnlyValue = "A"; public class Order { public string Name { get; set; } public string ItemValue { get; set; } public bool IsDisabled { get; set; } } private readonly List 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 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" } ]; ``` \n**Item templates**: ```razor @(item.Idx + 1). (@item.ItemValue)

@custom.Name

``` ```csharp 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? Fragment { get; set; } public int Idx { get; set; } } private readonly List 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 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 itemTemplateCustoms = [ new() { Name = "Day", ItemValue = "Day" }, new() { Name = "Week", ItemValue = "Week" }, new() { Name = "Month", ItemValue = "Month" } ]; private List itemTemplateCustoms2 = default!; protected override void OnInitialized() { itemTemplateCustoms2 = [ new() { Name = "Day", ItemValue = "Day", Fragment = (item => @

@item.Name

) }, new() { Name = "Week", ItemValue = "Week", Fragment = (item => @

@item.Name

) }, new() { Name = "Month", ItemValue = "Month", Fragment = (item => @

@item.Name

) } ]; } ``` \n**Binding**: ```razor

Selected: @uncontrolledValue

``` ```csharp private string oneWayValue = "A"; private string twoWayValue = "A"; private string? uncontrolledValue = "A"; public class Order { public string? Name { get; set; } public string? ItemValue { get; set; } } private readonly List 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" } ]; ``` \n**Item descriptions**: ```razor ``` ```csharp public class Order { public string Name { get; set; } public string Summary { get; set; } public string ItemValue { get; set; } } private readonly List descriptionCustoms = [ new() { Name = "Daily", ItemValue = "Daily", Summary = "Backs up every night at 2 AM." }, new() { Name = "Weekly", ItemValue = "Weekly", Summary = "Backs up every Sunday at 2 AM." }, new() { Name = "Monthly", ItemValue = "Monthly", Summary = "Backs up on the first day of each month." } ]; ``` \n**Gap**: ```razor ``` ```csharp public class Order { public string Name { get; set; } public string ItemValue { get; set; } } private readonly List 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" } ]; ``` \n**Prefix & Suffix**: ```razor ``` ```csharp public class Order { public string Name { get; set; } public string Fee { get; set; } public string Prefix { get; set; } public string ItemValue { get; set; } } private readonly List prefixCustoms = [ new() { Name = "Standard", ItemValue = "Standard", Prefix = "$0 - " }, new() { Name = "Express", ItemValue = "Express", Prefix = "$10 - " }, new() { Name = "Overnight", ItemValue = "Overnight", Prefix = "$25 - " } ]; private readonly List suffixCustoms = [ new() { Name = "Standard", ItemValue = "Standard", Fee = "Free" }, new() { Name = "Express", ItemValue = "Express", Fee = "$10" }, new() { Name = "Overnight", ItemValue = "Overnight", Fee = "$25" } ]; ``` \n**Events**: ```razor

Changed value: @changedValue

Clicked custom: @clickedCustom

Focused custom: @focusedCustom

Blurred custom: @blurredCustom

``` ```csharp private string? changedValue; private string? clickedCustom; private string? focusedCustom; private string? blurredCustom; public class Order { public string Name { get; set; } public string ItemValue { get; set; } } private readonly List 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" } ]; ``` \n**Dynamic items**: ```razor Add item Remove item Reverse items @(custom.Idx + 1). ``` ```csharp public class Order { public string Name { get; set; } public string ItemValue { get; set; } public int Idx { get; set; } } private int dynamicCounter = 3; private string? dynamicValue = "1"; private List dynamicCustoms = [ new() { Name = "Custom 1", ItemValue = "1" }, new() { Name = "Custom 2", ItemValue = "2" }, new() { Name = "Custom 3", ItemValue = "3" } ]; private void AddDynamicCustom() { dynamicCounter++; dynamicCustoms = [.. dynamicCustoms, new Order { Name = $"Custom {dynamicCounter}", ItemValue = $"{dynamicCounter}" }]; } private void RemoveDynamicCustom() { if (dynamicCustoms.Count <= 1) return; dynamicCustoms = [.. dynamicCustoms.Take(dynamicCustoms.Count - 1)]; } private void ReverseDynamicCustoms() { dynamicCustoms = [.. Enumerable.Reverse(dynamicCustoms)]; } ``` \n**Group description**: ```razor

Only the selected environment receives the new build.

``` ```csharp public class Order { public string? Name { get; set; } public string? ItemValue { get; set; } } private readonly List deploymentCustoms = [ new() { Name = "Development", ItemValue = "Development" }, new() { Name = "Staging", ItemValue = "Staging" }, new() { Name = "Production", ItemValue = "Production" } ]; ``` \n**Item title**: ```razor ``` ```csharp public class Order { public string? Name { get; set; } public string? Tooltip { get; set; } public string? ItemValue { get; set; } } private readonly List titleCustoms = [ new() { Name = "1 h", ItemValue = "1h", Tooltip = "Delivered within one hour of dispatch" }, new() { Name = "24 h", ItemValue = "24h", Tooltip = "Delivered within one business day" }, new() { Name = "72 h", ItemValue = "72h", Tooltip = "Delivered within three business days" } ]; ``` \n**Variant**: ```razor ``` ```csharp public class Order { public string? Name { get; set; } public string? Summary { get; set; } public string? IconName { get; set; } public bool IsDisabled { get; set; } public string? ItemValue { get; set; } } private readonly List descriptionCustoms = [ new() { Name = "Daily", ItemValue = "Daily", Summary = "Backs up every night at 2 AM." }, new() { Name = "Weekly", ItemValue = "Weekly", Summary = "Backs up every Sunday at 2 AM." }, new() { Name = "Monthly", ItemValue = "Monthly", Summary = "Backs up on the first day of each month." } ]; private readonly List 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 } ]; ``` \n**Accessibility**: ```razor

How dense should the rows be?

Focus the ChoiceGroup below ``` ```csharp public class Order { public string? Name { get; set; } public string? ItemValue { get; set; } public string? ScreenReaderName { get; set; } } private BitChoiceGroup? focusRef; private readonly List sortCustoms = [ new() { Name = "Ascending", ItemValue = "Asc" }, new() { Name = "Descending", ItemValue = "Desc" } ]; private readonly List densityCustoms = [ new() { Name = "Compact", ItemValue = "Compact" }, new() { Name = "Cozy", ItemValue = "Cozy" }, new() { Name = "Comfortable", ItemValue = "Comfortable" } ]; private readonly List ratingCustoms = [ new() { Name = "1", ItemValue = "1", ScreenReaderName = "1 star" }, new() { Name = "2", ItemValue = "2", ScreenReaderName = "2 stars" }, new() { Name = "3", ItemValue = "3", ScreenReaderName = "3 stars" }, new() { Name = "4", ItemValue = "4", ScreenReaderName = "4 stars" }, new() { Name = "5", ItemValue = "5", ScreenReaderName = "5 stars" } ]; private readonly List 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" } ]; ``` \n**Cascading parameters**: ```razor ``` ```csharp private readonly BitChoiceGroupParams[] choiceGroupParams = [ new() { Gap = "0.5rem", FullWidth = true, Variant = BitVariant.Outline, } ]; ```

\n**Basic**: ```razor ``` \n**Disabled & ReadOnly**: ```razor ``` ```csharp private string readOnlyValue = "A"; ``` \n**Item templates**: ```razor @(option.Index + 1). (@option.Value)

@option.Text

``` ```csharp private string itemTemplateValue = "Day"; private string itemTemplateValue2 = "Day"; private string itemLabelTemplateValue = "Day"; ``` \n**Binding**: ```razor

Selected: @uncontrolledValue

``` ```csharp private string oneWayValue = "A"; private string twoWayValue = "A"; private string? uncontrolledValue = "A"; ``` \n**Item descriptions**: ```razor ``` \n**Gap**: ```razor ``` \n**Prefix & Suffix**: ```razor ``` \n**Events**: ```razor

Changed value: @changedValue

Clicked option: @clickedOption

Focused option: @focusedOption

Blurred option: @blurredOption

``` ```csharp private string? changedValue; private string? clickedOption; private string? focusedOption; private string? blurredOption; ``` \n**Dynamic items**: ```razor Add item Remove item Reverse items @(option.Index + 1). @foreach (var (text, value) in dynamicOptions) { } ``` ```csharp private int dynamicCounter = 3; private string? dynamicValue = "1"; private List<(string Text, string Value)> dynamicOptions = [ ("Option 1", "1"), ("Option 2", "2"), ("Option 3", "3") ]; private void AddDynamicOption() { dynamicCounter++; dynamicOptions = [.. dynamicOptions, ($"Option {dynamicCounter}", $"{dynamicCounter}")]; } private void RemoveDynamicOption() { if (dynamicOptions.Count <= 1) return; dynamicOptions = [.. dynamicOptions.Take(dynamicOptions.Count - 1)]; } private void ReverseDynamicOptions() { dynamicOptions = [.. Enumerable.Reverse(dynamicOptions)]; } ``` \n**Group description**: ```razor

Only the selected environment receives the new build.

``` \n**Item title**: ```razor ``` \n**Variant**: ```razor ``` \n**Accessibility**: ```razor

How dense should the rows be?

Focus the ChoiceGroup below ``` ```csharp private BitChoiceGroup, string>? focusRef; ``` \n**Cascading parameters**: ```razor ``` ```csharp private readonly BitChoiceGroupParams[] choiceGroupParams = [ new() { Gap = "0.5rem", FullWidth = true, Variant = BitVariant.Outline, } ]; ```