ChoiceGroup - bit BlazorUI

Overview
Getting started
Iconography
Theming

**ChoiceGroup** Radio,RadioButton,RadioGroup,RadioButtonGroup ChoiceGroup let people select a single option from two or more choices.

**Basic**: 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" } ]; **Disabled**: 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" } ]; **Images and Icons**: 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 } ]; **Horizontal**: 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> 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> 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 } ]; **Reversed**: 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> 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> 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 } ]; **LabelTemplate**:

Custom label

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" } ]; **Item templates**: @(item.Index + 1).

@item.Text

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

) } }; } **Binding**: private string oneWayValue = "A"; private string twoWayValue = "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" } ]; **Validation**: Submit 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" } ]; **Size**: 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 } ]; **Color**: 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" } ]; **External Icons**: 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") } ]; **Style & Class**: 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" } ]; **RTL**: private readonly List> rtlItems = new() { new() { Text = "بخش آ", Value = "A" }, new() { Text = "بخش ب", Value = "B" }, new() { Text = "بخش پ", Value = "C" }, new() { Text = "بخش ت", Value = "D" } };

**Basic**: 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" } ]; **Disabled**: 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" } ]; **Images and Icons**: 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 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 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 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 } ]; **Horizontal**: 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 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 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 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 } ]; **Reversed**: 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 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 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 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 } ]; **LabelTemplate**:

Custom label

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" } ]; **Item templates**: @(item.Idx + 1).

@custom.Name

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

) } ]; } **Binding**: private string oneWayValue = "A"; private string twoWayValue = "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" } ]; **Validation**: Submit 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 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" } ]; **Size**: 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 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 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 } ]; **Color**: 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" } ]; **External Icons**: public class Order { public string? Name { get; set; } public string? ItemValue { get; set; } public BitIconInfo? Icon { get; set; } } private readonly List externalIconCustoms = [ new() { Name = "Day", ItemValue = "Day", Icon = BitIconInfo.Fa("solid sun") }, new() { Name = "Week", ItemValue = "Week", Icon = BitIconInfo.Css("fa-solid fa-calendar-week") }, new() { Name = "Month", ItemValue = "Month", Icon = BitIconInfo.Bi("calendar-month") } ]; **Style & Class**: 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 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 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" } ]; **RTL**: public class Order { public string Name { get; set; } public string ItemValue { get; set; } } private readonly List rtlCustoms = [ new() { Name = "ویژه آ", ItemValue = "A" }, new() { Name = "ویژه ب", ItemValue = "B" }, new() { Name = "ویژه پ", ItemValue = "C" }, new() { Name = "ویژه ت", ItemValue = "D" } ];

**Basic**: **Disabled**: **Images and Icons**: **Horizontal**: **Reversed**: **LabelTemplate**:

Custom label

**Item templates**: @(option.Index + 1).

@option.Text

private string itemTemplateValue = "Day"; private string itemTemplateValue2 = "Day"; private string itemLabelTemplateValue = "Day"; **Binding**: private string oneWayValue = "A"; private string twoWayValue = "A"; **Validation**: Submit public class ChoiceGroupValidationModel { [Required(ErrorMessage = "Pick one")] public string Value { get; set; } } public ChoiceGroupValidationModel validationModel = new(); private void HandleValidSubmit() { } private void HandleInvalidSubmit() { } **Size**: **Color**: **External Icons**: **Style & Class**: **RTL**: