ChoiceGroup - bit BlazorUI

Accent color

ChoiceGroup, also known as Radio or RadioGroup, lets people select a single value from two or more mutually exclusive choices. Reach for it when all the options are worth showing at once (roughly two to seven of them) and the choice matters enough to stay visible; a Dropdown suits longer lists, and a Checkbox suits choices that are not mutually exclusive. It renders native radio inputs, so the browser provides the full keyboard behavior for free: the whole group is a single tab stop that lands on the checked item, and the arrow keys move the selection with wrapping and RTL awareness. On top of that it adds a group label and helper text, per-item icons, images, prefixes and descriptions, vertical, horizontal and full width layouts, and templates at every level, all through three interchangeable item APIs.

Notes

The BitChoiceGroup is a
Multi-API
component which can accept the list of Items in 3 different ways:
1. The
BitChoiceGroupItem
class
2. A
Custom Generic
class
3. The
BitChoiceGroupOption
component

ForceAnimation (whole page)

Usage

Basic

<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" }
    ];
}

The basic ChoiceGroup lets people select a single item from a set of mutually exclusive choices. It is fully keyboard accessible: Tab focuses the checked item and the arrow keys move the selection. The NoCircle mode removes the radio circle of each item.

Basic Items

Item A

Item B

Item C

Item D

NoCircle

Item A

Item B

Item C

Item D

Disabled

<BitChoiceGroup Label="Disabled ChoiceGroup"
                IsEnabled="false"
                Items="basicItems"
                DefaultValue="@("A")" />

<BitChoiceGroup Label="ChoiceGroup with Disabled Item"
                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" }
    ];
}

Disables the whole ChoiceGroup or its individual items. Disabled items cannot be selected and are skipped by the keyboard navigation.

Disabled ChoiceGroup

Item A

Item B

Item C

Item D

ChoiceGroup with Disabled Item

Item A

Item B

Item C

Item D

Images and Icons

<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 }
    ];
}

Horizontal

<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 }
    ];
}

LabelPosition

<BitChoiceGroup Label="End (default)" Items="basicItems" DefaultValue="@("A")" LabelPosition="BitLabelPosition.End" Horizontal />

<BitChoiceGroup Label="Start" Items="basicItems" DefaultValue="@("A")" LabelPosition="BitLabelPosition.Start" Horizontal />

<BitChoiceGroup Label="Top" Items="basicItems" DefaultValue="@("A")" LabelPosition="BitLabelPosition.Top" Horizontal />

<BitChoiceGroup Label="Bottom" Items="basicItems" DefaultValue="@("A")" LabelPosition="BitLabelPosition.Bottom" 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 }
    ];
}

LabelTemplate

<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" }
    ];
}

Replaces the plain text label of the ChoiceGroup with fully custom content using the LabelTemplate. The label element itself is still rendered and the group still points its aria-labelledby at it, so whatever the template renders becomes the accessible name of the radio group; keep readable text in there, and reach for AriaLabel or AriaLabelledBy when the template is purely decorative.

Custom label

Item A

Item B

Item C

Item D

Item templates

<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 & ItemSuffixTemplate" Items="basicItems" DefaultValue="@string.Empty">
    <ItemPrefixTemplate Context="item">
        @(item.Index + 1).&nbsp;
    </ItemPrefixTemplate>
    <ItemSuffixTemplate Context="item">
        &nbsp;<b>(@item.Value)</b>
    </ItemSuffixTemplate>
</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>)
            }
        };
    }
}

Binding

<BitChoiceGroup Label="Uncontrolled (DefaultValue)" Items="basicItems" DefaultValue="@("A")"
                OnChange="(string? value) => uncontrolledValue = value" />
<div>Selected: <b>@uncontrolledValue</b></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 string? uncontrolledValue = "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" }
    ];
}

Validation

<style>
    .validation-message {
        color: red;
    }
</style>

<EditForm Model="@validationModel" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit" novalidate>
    <DataAnnotationsValidator />
    
    <BitChoiceGroup Label="Pick one" Required 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" }
    ];
}

Integrates with EditForm and data annotations. While the field is invalid the radiogroup and its inputs carry aria-invalid and the radio circles turn red, until a choice is made. Required is separate from the validation attribute of the model: it adds the required asterisk to the label and the aria-required of the group, so set both.

Item descriptions

<BitChoiceGroup Label="Backup frequency" Items="descriptionItems" DefaultValue="@("Daily")" />
@code {
    private readonly List<BitChoiceGroupItem<string>> 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." }
    ];
}

Adds secondary text under each item using the Description property. The description is automatically linked to its input via aria-describedby, so screen readers announce it along with the item label.

Backup frequency

Daily Backs up every night at 2 AM.

Weekly Backs up every Sunday at 2 AM.

Monthly Backs up on the first day of each month.

ReadOnly

<BitChoiceGroup Label="ReadOnly" ReadOnly Items="basicItems" @bind-Value="readOnlyValue" />
@code {
    private string readOnlyValue = "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" }
    ];
}

Prevents changing the value while keeping the normal, non-disabled appearance. Unlike IsEnabled="false" the group stays fully reachable: Tab still lands on the checked item and the arrow keys still move the focus, so the choice can be read with the keyboard and a screen reader, and the value is still submitted with the form. The group reports aria-readonly, and every attempt to commit a change (a click, Space, or an arrow key) is cancelled, so the selection cannot move.

ReadOnly

Item A

Item B

Item C

Item D

Gap

<BitChoiceGroup Label="1rem gap" Gap="1rem" Items="basicItems" DefaultValue="@("A")" />

<BitChoiceGroup Label="3rem gap (Horizontal)" Gap="3rem" Items="basicItems" DefaultValue="@("A")" 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" }
    ];
}

Customizes the gap between the items using any CSS length value, overriding the default spacing of the current size.

1rem gap

Item A

Item B

Item C

Item D

3rem gap (Horizontal)

Item A

Item B

Item C

Item D

Prefix & Suffix

<BitChoiceGroup Label="Shipping method (Prefix)" Items="prefixItems" DefaultValue="@("Standard")" />

<BitChoiceGroup Label="Shipping method (Suffix)"
                Items="suffixItems"
                DefaultValue="@("Standard")"
                FullWidth
                Styles="@(new() { ItemSuffix = "margin-inline-start: auto;" })" />
@code {
    private readonly List<BitChoiceGroupItem<string>> 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<BitChoiceGroupItem<string>> suffixItems =
    [
        new() { Text = "Standard", Value = "Standard", Suffix = "Free" },
        new() { Text = "Express", Value = "Express", Suffix = "$10" },
        new() { Text = "Overnight", Value = "Overnight", Suffix = "$25" }
    ];
}

Wraps the content of each item in plain text: Prefix is rendered at the start of the item label, before the item text, and Suffix after the content of the item. Pairing Suffix with FullWidth and an auto inline start margin turns it into a trailing column, which is where a price or a hint usually belongs. For arbitrary content on either end, use the ItemPrefixTemplate and ItemSuffixTemplate shown in the Item templates section.

Shipping method (Prefix)

$0 -

Standard

$10 -

Express

$25 -

Overnight

Shipping method (Suffix)

StandardFree

Express$10

Overnight$25

Events

<BitChoiceGroup Label="Events" Items="basicItems" DefaultValue="@("A")"
                OnChange="(string? value) => changedValue = value"
                OnClick="(BitChoiceGroupItem<string> item) => clickedItem = item.Text"
                OnFocus="(BitChoiceGroupItem<string> item) => focusedItem = item.Text"
                OnBlur="(BitChoiceGroupItem<string> item) => blurredItem = item.Text" />
<div>Changed value: <b>@changedValue</b></div>
<div>Clicked item: <b>@clickedItem</b></div>
<div>Focused item: <b>@focusedItem</b></div>
<div>Blurred item: <b>@blurredItem</b></div>
@code {
    private string? changedValue;
    private string? clickedItem;
    private string? focusedItem;
    private string? blurredItem;
    
    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" }
    ];
}

Raises OnChange with the new value whenever the selection actually changes, and OnClick with the whole item on every activation of an enabled item, including a click on the already selected one and an arrow key press, which the browser also reports as a click. OnFocus and OnBlur fire with the item as the focus moves between the items. All four stay silent while the group is disabled or read-only.

Events

Item A

Item B

Item C

Item D

Changed value:

Clicked item:

Focused item:

Blurred item:

Dynamic items

<BitButton OnClick="AddDynamicItem">Add item</BitButton>
<BitButton OnClick="RemoveDynamicItem">Remove item</BitButton>
<BitButton OnClick="ReverseDynamicItems">Reverse items</BitButton>

<BitChoiceGroup Label="Dynamic items" Items="dynamicItems" @bind-Value="dynamicValue">
    <ItemPrefixTemplate Context="item">
        @(item.Index + 1).&nbsp;
    </ItemPrefixTemplate>
</BitChoiceGroup>
@code {
    private int dynamicCounter = 3;
    private string? dynamicValue = "1";
    private List<BitChoiceGroupItem<string>> 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<string> { 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)];
    }
}

Handles dynamic item collections: assigning a new Items collection re-renders the group and re-assigns the Index of each item (shown here as a number prefix), preserving the selected value as long as its item survives the change.

Dynamic items

Item 1

Item 2

Item 3

Group description

<style>
    .custom-description {
        gap: 0.25rem;
        display: flex;
        align-items: center;
    }
</style>

<BitChoiceGroup Label="Deployment target"
                Description="Only the selected environment receives the new build."
                Items="deploymentItems"
                DefaultValue="@("Staging")" />

<BitChoiceGroup Label="Deployment target" Items="deploymentItems" DefaultValue="@("Staging")">
    <DescriptionTemplate>
        <div class="custom-description">
            <BitIcon IconName="@BitIconName.Info" />
            <span>Only the selected environment receives the new build.</span>
        </div>
    </DescriptionTemplate>
</BitChoiceGroup>
@code {
    private readonly List<BitChoiceGroupItem<string>> deploymentItems =
    [
        new() { Text = "Development", Value = "Development" },
        new() { Text = "Staging", Value = "Staging" },
        new() { Text = "Production", Value = "Production" }
    ];
}

Adds a helper text under the label to explain the whole set of choices, as opposed to the per-item Description that explains a single item. The group points its aria-describedby at it, so a screen reader announces it right after the name of the group. DescriptionTemplate replaces the plain text with custom content and takes precedence over Description when both are set.

Deployment target

Only the selected environment receives the new build.

Development

Staging

Production

Deployment target

Only the selected environment receives the new build.

Development

Staging

Production

FullWidth

<BitChoiceGroup Label="Default (hugs the widest item)" Items="basicItems" DefaultValue="@("A")" Horizontal />

<BitChoiceGroup Label="FullWidth (horizontal, equal columns)" Items="basicItems" DefaultValue="@("A")" Horizontal FullWidth />

<BitChoiceGroup Label="FullWidth + LabelPosition.Start (items at the far edge)" Items="basicItems" DefaultValue="@("A")" LabelPosition="BitLabelPosition.Start" FullWidth />

<BitChoiceGroup Label="FullWidth + LabelPosition.Start + stretched item label (settings list)"
                Items="basicItems"
                DefaultValue="@("A")"
                LabelPosition="BitLabelPosition.Start"
                FullWidth
                Styles="@(new() { ItemLabel = "width: 100%; justify-content: space-between;" })" />
@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" }
    ];
}

Item title

<BitChoiceGroup Label="Delivery window (hover an item)" Items="titleItems" DefaultValue="@("24h")" />
@code {
    private readonly List<BitChoiceGroupItem<string>> 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" }
    ];
}

Sets the native browser tooltip of an item through its Title, which is handy when the item text is an abbreviation or gets clipped. Keep it supplementary: a title never appears on keyboard focus and is announced inconsistently by screen readers, so anything every user has to read belongs in the item text, its AriaLabel, or its Description.

Delivery window (hover an item)

1 h

24 h

72 h

AutoFocus

<BitButton OnClick="() => showAutoFocus = !showAutoFocus">@(showAutoFocus ? "Unmount" : "Mount") the auto focused ChoiceGroup</BitButton>

@if (showAutoFocus)
{
    <BitChoiceGroup AutoFocus Label="Auto focused" Items="basicItems" DefaultValue="@("B")" />
}
@code {
    private bool showAutoFocus;
    
    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" }
    ];
}

Moves the keyboard focus into the ChoiceGroup on its first render. It lands on the checked item, or on the first enabled item when nothing is checked, which is exactly the item the Tab key would reach, and it is skipped entirely while the group is disabled or read-only. The button below mounts a fresh ChoiceGroup so the focus move stays visible on demand instead of stealing the focus as soon as this page loads.

Color

<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" />

<div style="background:var(--bit-clr-fg-sec);color:var(--bit-clr-bg-sec);padding:1rem">
    <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" />
</div>

<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" />

<BitChoiceGroup IsEnabled="false"
                Color="BitColor.Primary"
                Label="Primary"
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[0].Value" />

<BitChoiceGroup IsEnabled="false"
                Color="BitColor.Secondary"
                Label="Secondary"
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[0].Value" />

<BitChoiceGroup IsEnabled="false"
                Color="BitColor.Tertiary"
                Label="Tertiary"
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[0].Value" />

<BitChoiceGroup IsEnabled="false"
                Color="BitColor.Info"
                Label="Info"
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[0].Value" />

<BitChoiceGroup IsEnabled="false"
                Color="BitColor.Success"
                Label="Success"
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[0].Value" />

<BitChoiceGroup IsEnabled="false"
                Color="BitColor.Warning"
                Label="Warning"
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[0].Value" />

<BitChoiceGroup IsEnabled="false"
                Color="BitColor.SevereWarning"
                Label="SevereWarning"
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[0].Value" />

<BitChoiceGroup IsEnabled="false"
                Color="BitColor.Error"
                Label="Error"
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[0].Value" />

<div style="background:var(--bit-clr-fg-sec);color:var(--bit-clr-bg-sec);padding:1rem">
    <BitChoiceGroup IsEnabled="false"
                    Color="BitColor.PrimaryBackground"
                    Label="PrimaryBackground"
                    Horizontal
                    Items="basicItems"
                    DefaultValue="basicItems[0].Value" />

    <BitChoiceGroup IsEnabled="false"
                    Color="BitColor.SecondaryBackground"
                    Label="SecondaryBackground"
                    Horizontal
                    Items="basicItems"
                    DefaultValue="basicItems[0].Value" />

    <BitChoiceGroup IsEnabled="false"
                    Color="BitColor.TertiaryBackground"
                    Label="TertiaryBackground"
                    Horizontal
                    Items="basicItems"
                    DefaultValue="basicItems[0].Value" />
</div>

<BitChoiceGroup IsEnabled="false"
                Color="BitColor.PrimaryForeground"
                Label="PrimaryForeground"
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[0].Value" />

<BitChoiceGroup IsEnabled="false"
                Color="BitColor.SecondaryForeground"
                Label="SecondaryForeground"
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[0].Value" />

<BitChoiceGroup IsEnabled="false"
                Color="BitColor.TertiaryForeground"
                Label="TertiaryForeground"
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[0].Value" />

<BitChoiceGroup IsEnabled="false"
                Color="BitColor.PrimaryBorder"
                Label="PrimaryBorder"
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[0].Value" />

<BitChoiceGroup IsEnabled="false"
                Color="BitColor.SecondaryBorder"
                Label="SecondaryBorder"
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[0].Value" />

<BitChoiceGroup IsEnabled="false"
                Color="BitColor.TertiaryBorder"
                Label="TertiaryBorder"
                Horizontal
                Items="basicItems"
                DefaultValue="basicItems[0].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" }
    ];
}

External Icons

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" />

<BitChoiceGroup Label="External Icons" Items="externalIconItems" DefaultValue="@("Day")" />

<BitChoiceGroup Label="External Icons (Inline)" Items="externalIconItems" DefaultValue="@("Day")" Inline />

<BitChoiceGroup Label="External Icons (Horizontal)" Items="externalIconItems" DefaultValue="@("Day")" Horizontal />
@code {
    private readonly List<BitChoiceGroupItem<string>> 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") }
    ];
}

Renders icons from external libraries like Font Awesome or Bootstrap Icons using the Icon parameter, instead of the built-in icon font used by IconName.

External Icons

Day

Week

Month

External Icons (Inline)

Day

Week

Month

External Icons (Horizontal)

Day

Week

Month

Size

<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 }
    ];
}

Style & Class

<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;
        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" }
    ];
}

RTL

<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() { Text = "بخش آ", Value = "A" },
        new() { Text = "بخش ب", Value = "B" },
        new() { Text = "بخش پ", Value = "C" },
        new() { Text = "بخش ت", Value = "D" }
    ];
}

Renders the ChoiceGroup in right-to-left mode; the layout is mirrored and the keyboard arrow keys follow the text direction.

ساده

بخش آ

بخش ب

بخش پ

بخش ت

غیرفعال

بخش آ

بخش ب

بخش پ

بخش ت

API

BitChoiceGroup parameters

Name	Type	Default value	Description
AriaLabelledBy	string?	null	Id of an element to use as the aria label for the ChoiceGroup.
AutoFocus	bool	false	Determines if the ChoiceGroup is auto focused on first render, focusing its checked item, or its first enabled item when nothing is checked. Nothing is focused when the ChoiceGroup is read-only or the target item is disabled.
AutoReorderOptions	bool	false	Keeps the assigned Index of each option in sync with the markup order of the options, even when an option is added, removed, or reordered conditionally after the first render.
ChildContent	RenderFragment?	null	The content of the ChoiceGroup, a list of BitChoiceGroupOption components.
Classes	BitChoiceGroupClassStyles?	null	Custom CSS classes for different parts of the BitChoiceGroup.
Color	BitColor?	null	The general color of the ChoiceGroup.
Description	string?	null	The description (helper text) of the ChoiceGroup, rendered under its label. The group references it through its aria-describedby, so screen readers announce it along with the name of the group.
DescriptionTemplate	RenderFragment?	null	Custom RenderFragment for the description (helper text) of the ChoiceGroup. Takes precedence over Description when both are set.
FullWidth	bool	false	Expands the ChoiceGroup to the full width of its container instead of hugging its widest item. In the horizontal layout the items also share that width equally.
Gap	string?	null	The gap between the items of the ChoiceGroup.
Horizontal	bool	false	Renders the items in the ChoiceGroup horizontally.
Inline	bool	false	Renders the icons and images in a single line with the items in the ChoiceGroup.
Items	IEnumerable<TItem>	new List<TItem>()	Sets the data source that populates the items of the list.
ItemLabelTemplate	RenderFragment<TItem>?		Used to customize the label for the Item Label content.
ItemPrefixTemplate	RenderFragment<TItem>?		Used to add a prefix to each item.
ItemSuffixTemplate	RenderFragment<TItem>?	null	Used to add a suffix to each item, rendered after the content of the item.
ItemTemplate	RenderFragment<TItem>?	null	Used to customize the label for the Item content.
Label	string?	null	The label for the ChoiceGroup.
LabelPosition	BitLabelPosition?	null	The position of the content of each item relative to its radio circle. Defaults to End, which renders the circle first and the content after it. Items rendered as image or icon tiles lay their own content out and ignore this parameter.
LabelTemplate	RenderFragment?	null	Custom RenderFragment for the label of the ChoiceGroup.
Name	string?	null	The name shared by the radio inputs of the items, which is what groups them into a single logical radio group. When not set, a unique name is generated for the ChoiceGroup.
NameSelectors	BitChoiceGroupNameSelectors<TItem, TValue>?	null	Names and selectors of the custom input type properties.
NoCircle	bool	false	Removes the circle from the start of each item.
OnBlur	EventCallback<TItem>		Callback for when an item of the ChoiceGroup loses focus.
OnChange	EventCallback<TValue?>		Callback for when the selected value changes.
OnClick	EventCallback<TItem>		Callback for when an enabled item is clicked, even the already selected one.
OnFocus	EventCallback<TItem>		Callback for when an item of the ChoiceGroup receives focus.
Options	RenderFragment?	null	Alias of ChildContent.
ReadOnly	bool	false	Prevents changing the value of the ChoiceGroup while keeping its normal (non-disabled) appearance.
Required	bool	false	Makes the ChoiceGroup required and adds the required asterisk to its label.
Size	BitSize?	null	The size of the BitChoiceGroup.
Styles	BitChoiceGroupClassStyles?	null	Custom CSS styles for different parts of the BitChoiceGroup.

BitInputBase parameters

Name	Type	Default value	Description
DefaultValue	TValue?	null	The default value of the input to be used in uncontrolled mode (i.e. when the Value is not bound), typically used alongside the OnChange callback.
DisplayName	string?	null	Gets or sets the display name for this field.
InputHtmlAttributes	IReadOnlyDictionary<string, object>?	null	Gets or sets a collection of additional attributes that will be applied to the created element.
Name	string?	null	Gets or sets the name of the element. Allows access by name from the associated form.
NoValidate	bool	false	Disables the validation of the input.
OnChange	EventCallback<TValue?>		Callback for when the input value changes.
ReadOnly	bool	false	Makes the input read-only.
Required	bool	false	Makes the input required.
Value	TValue?	null	Gets or sets the value of the input. This should be used with two-way binding.

BitInputBase public members

Name	Type	Description
InputElement	ElementReference	The ElementReference of the input element.
FocusAsync()	() => ValueTask	Gives focus to the input element.
FocusAsync(bool preventScroll)	(bool preventScroll) => ValueTask	Gives focus to the input element.

BitComponentBase parameters

Name	Type	Default value	Description
AriaLabel	string?	null	Gets or sets the accessible label for the component, used by assistive technologies.
Class	string?	null	Gets or sets the CSS class name(s) to apply to the rendered element.
Dir	BitDir?	null	Gets or sets the text directionality for the component's content.
ForceAnimation	bool	false	Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
HtmlAttributes	Dictionary<string, object>	new Dictionary<string, object>()	Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters.
Id	string?	null	Gets or sets the unique identifier for the component's root element.
IsEnabled	bool	true	Gets or sets a value indicating whether the component is enabled and can respond to user interaction.
Style	string?	null	Gets or sets the CSS style string to apply to the rendered element.
TabIndex	string?	null	Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility	BitVisibility	BitVisibility.Visible	Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name	Type	Default value	Description
UniqueId	Guid	Guid.NewGuid()	Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement	ElementReference		Gets the reference to the root HTML element associated with this component.

BitChoiceGroupItem properties

Name	Type	Default value	Description
AriaLabel	string?	null	AriaLabel attribute for the BitChoiceGroup item.
Class	string?	null	CSS class attribute for the BitChoiceGroup item.
Description	string?	null	The secondary text to show under the text of the BitChoiceGroup item.
Id	string?	null	Id attribute of the BitChoiceGroup item.
IsEnabled	bool	true	Whether the BitChoiceGroup item is enabled.
Icon	BitIconInfo?	null	The icon to show as content of the BitChoiceGroup item. Takes precedence over IconName when both are set.
IconName	string?	null	The icon name (built-in Fluent UI) to show as content of the BitChoiceGroup item.
ImageSrc	string?	null	The image address to show as the content of the BitChoiceGroup item.
ImageAlt	string?	null	The alt attribute for the image of the BitChoiceGroup item.
ImageSize	BitImageSize?	null	Provides Width and Height for the image of the BitChoiceGroup item.
Prefix	string?	null	The text to show as a prefix for the BitChoiceGroup item.
SelectedImageSrc	string?	null	Provides a new image for the selected state of the image of the BitChoiceGroup item.
Style	string?	null	CSS style attribute for the BitChoiceGroup item.
Suffix	string?	null	The text to show as a suffix for the BitChoiceGroup item, rendered after its content.
Template	RenderFragment<BitChoiceGroupItem<TValue>>?	null	The custom template for the BitChoiceGroup item.
Text	string?	null	Text to show as the content of BitChoiceGroup item.
Title	string?	null	The title attribute (the native tooltip) of the BitChoiceGroup item. Supplementary text only: content that has to reach every user belongs in Text (or a template) or in Description, both of which are visible and exposed to assistive technology. AriaLabel is not an alternative: it only replaces the accessible name for assistive technology and is never visible.
Value	TValue?	null	The value returned when BitChoiceGroup item is checked.
Index	int	0	Index of the BitChoiceGroup item. This property's value is set by the component at render.
IsSelected	bool	false	Determines if the item is selected. This property's value is assigned by the component.

BitChoiceGroupOption properties

Name	Type	Default value	Description
AriaLabel	string?	null	AriaLabel attribute for the BitChoiceGroup option.
Class	string?	null	CSS class attribute for the BitChoiceGroup option.
Description	string?	null	The secondary text to show under the text of the BitChoiceGroup option.
Id	string?	null	Id attribute of the BitChoiceGroup option.
IsEnabled	bool	true	Whether the BitChoiceGroup option is enabled.
Icon	BitIconInfo?	null	The icon to show as content of the BitChoiceGroup option. Takes precedence over IconName when both are set.
IconName	string?	null	The icon name (built-in Fluent UI) to show as content of the BitChoiceGroup option.
ImageSrc	string?	null	The image address to show as the content of the BitChoiceGroup option.
ImageAlt	string?	null	The alt attribute for the image of the BitChoiceGroup option.
ImageSize	BitImageSize?	null	Provides Width and Height for the image of the BitChoiceGroup option.
Prefix	string?	null	The text to show as a prefix for the BitChoiceGroup option.
SelectedImageSrc	string?	null	Provides a new image for the selected state of the image of the BitChoiceGroup option.
Style	string?	null	CSS style attribute for the BitChoiceGroup option.
Suffix	string?	null	The text to show as a suffix for the BitChoiceGroup option, rendered after its content.
Template	RenderFragment<BitChoiceGroupOption<TValue>>?	null	The custom template for the BitChoiceGroup option.
Text	string?	null	Text to show as the content of BitChoiceGroup option.
Title	string?	null	The title attribute (the native tooltip) of the BitChoiceGroup option. Supplementary text only: content that has to reach every user belongs in Text (or a template) or in Description, both of which are visible and exposed to assistive technology. AriaLabel is not an alternative: it only replaces the accessible name for assistive technology and is never visible.
Value	TValue?	null	The value returned when BitChoiceGroup option is checked.
Index	int	0	Index of the BitChoiceGroup option. This property's value is set by the component at render.
IsSelected	bool	false	Determines if the option is selected. This property's value is assigned by the component.

BitChoiceGroupNameSelectors<TItem, TValue> properties

Name	Type	Default value	Description
AriaLabel	BitNameSelectorPair<TItem, string?>	new(nameof(BitChoiceGroupItem<TValue>.AriaLabel))	AriaLabel attribute for the BitChoiceGroup option.
Class	BitNameSelectorPair<TItem, string?>	new(nameof(BitChoiceGroupItem<TValue>.Class))	CSS class attribute for the BitChoiceGroup option.
Description	BitNameSelectorPair<TItem, string?>	new(nameof(BitChoiceGroupItem<TValue>.Description))	The secondary text to show under the text of the BitChoiceGroup option.
Id	BitNameSelectorPair<TItem, string?>	new(nameof(BitChoiceGroupItem<TValue>.Id))	Id attribute of the BitChoiceGroup option.
IsEnabled	BitNameSelectorPair<TItem, bool>	new(nameof(BitChoiceGroupItem<TValue>.IsEnabled))	Whether the BitChoiceGroup option is enabled.
Icon	BitNameSelectorPair<TItem, BitIconInfo?>	new(nameof(BitChoiceGroupItem<TValue>.Icon))	Icon field name and selector of the custom input class.
IconName	BitNameSelectorPair<TItem, string?>	new(nameof(BitChoiceGroupItem<TValue>.IconName))	IconName field name and selector of the custom input class.
ImageSrc	BitNameSelectorPair<TItem, string?>	new(nameof(BitChoiceGroupItem<TValue>.ImageSrc))	The image address to show as the content of the BitChoiceGroup option.
ImageAlt	BitNameSelectorPair<TItem, string?>	new(nameof(BitChoiceGroupItem<TValue>.ImageAlt))	The alt attribute for the image of the BitChoiceGroup option.
ImageSize	BitNameSelectorPair<TItem, BitImageSize?>	new(nameof(BitChoiceGroupItem<TValue>.ImageSize))	Provides Width and Height for the image of the BitChoiceGroup option.
Prefix	BitNameSelectorPair<TItem, string?>	new(nameof(BitChoiceGroupItem<TValue>.Prefix))	The text to show as a prefix for the BitChoiceGroup option.
SelectedImageSrc	BitNameSelectorPair<TItem, string?>	new(nameof(BitChoiceGroupItem<TValue>.SelectedImageSrc))	Provides a new image for the selected state of the image of the BitChoiceGroup option.
Style	BitNameSelectorPair<TItem, string?>	new(nameof(BitChoiceGroupItem<TValue>.Style))	CSS style attribute for the BitChoiceGroup option.
Suffix	BitNameSelectorPair<TItem, string?>	new(nameof(BitChoiceGroupItem<TValue>.Suffix))	The text to show as a suffix for the BitChoiceGroup option, rendered after its content.
Template	BitNameSelectorPair<TItem, RenderFragment<TItem>?>	new(nameof(BitChoiceGroupItem<TValue>.Template))	Template field name and selector of the custom input class.
Text	BitNameSelectorPair<TItem, string?>	new(nameof(BitChoiceGroupItem<TValue>.Text))	Text to show as the content of BitChoiceGroup option.
Title	BitNameSelectorPair<TItem, string?>	new(nameof(BitChoiceGroupItem<TValue>.Title))	The title attribute (the native tooltip) of the BitChoiceGroup option.
Value	BitNameSelectorPair<TItem, TValue?>	new(nameof(BitChoiceGroupItem<TValue>.Value))	The value returned when BitChoiceGroup option is checked.
Index	string	nameof(BitChoiceGroupItem<TValue>.Index)	The Index field name of the custom input class. This property's value is set by the component at render.
IsSelected	string	nameof(BitChoiceGroupItem<TValue>.IsSelected)	The IsSelected field name of the custom input class. This property's value is assigned by the component.

BitChoiceGroupClassStyles properties

Name	Type	Default value	Description
Root	string?	null	Custom CSS classes/styles for the root element of the BitChoiceGroup.
LabelContainer	string?	null	Custom CSS classes/styles for the label container of the BitChoiceGroup.
Label	string?	null	Custom CSS classes/styles for the label of the BitChoiceGroup.
Description	string?	null	Custom CSS classes/styles for the description (helper text) of the BitChoiceGroup.
Container	string?	null	Custom CSS classes/styles for the container of the BitChoiceGroup.
ItemChecked	string?	null	Custom CSS classes/styles for the checked item of the BitChoiceGroup.
ItemContainer	string?	null	Custom CSS classes/styles for the container of each item of the BitChoiceGroup.
ItemLabel	string?	null	Custom CSS classes/styles for the label of each item of the BitChoiceGroup.
ItemImageContainer	string?	null	Custom CSS classes/styles for the image container of each item of the BitChoiceGroup.
ItemImageWrapper	string?	null	Custom CSS classes/styles for the image wrapper of each item of the BitChoiceGroup.
ItemRadioButton	string?	null	Custom CSS classes/styles for the radio button of each item of the BitChoiceGroup.
ItemImage	string?	null	Custom CSS classes/styles for the image of each item of the BitChoiceGroup.
ItemIconWrapper	string?	null	Custom CSS classes/styles for the icon wrapper of each item of the BitChoiceGroup.
ItemIcon	string?	null	Custom CSS classes/styles for the icon of each item of the BitChoiceGroup.
ItemPrefix	string?	null	Custom CSS classes/styles for the prefix of each item of the BitChoiceGroup.
ItemSuffix	string?	null	Custom CSS classes/styles for the suffix of each item of the BitChoiceGroup.
ItemTextWrapper	string?	null	Custom CSS classes/styles for the text wrapper of each item of the BitChoiceGroup.
ItemText	string?	null	Custom CSS classes/styles for the text of each item of the BitChoiceGroup.
ItemDescription	string?	null	Custom CSS classes/styles for the description of each item of the BitChoiceGroup.

BitIconInfo properties

Name	Type	Default value	Description
Name	string?	null	Gets or sets the name of the icon.
BaseClass	string?	null	Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty.
Prefix	string?	null	Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty.

BitColor enum

Name	Value	Description
Primary	0	Primary general color.
Secondary	1	Secondary general color.
Tertiary	2	Tertiary general color.
Info	3	Info general color.
Success	4	Success general color.
Warning	5	Warning general color.
SevereWarning	6	SevereWarning general color.
Error	7	Error general color.
PrimaryBackground	8	Primary background color.
SecondaryBackground	9	Secondary background color.
TertiaryBackground	10	Tertiary background color.
PrimaryForeground	11	Primary foreground color.
SecondaryForeground	12	Secondary foreground color.
TertiaryForeground	13	Tertiary foreground color.
PrimaryBorder	14	Primary border color.
SecondaryBorder	15	Secondary border color.
TertiaryBorder	16	Tertiary border color.

BitLabelPosition enum

Name	Value	Description
Top	0	Renders the content above the radio circle.
End	1	Renders the content after the radio circle. This is the default.
Bottom	2	Renders the content below the radio circle.
Start	3	Renders the content before the radio circle and aligns the items to the end of the group.

BitSize enum

Name	Value	Description
Small	0	The small size choice group.
Medium	1	The medium size choice group.
Large	2	The large size choice group.

BitVisibility enum

Name	Value	Description
Visible	0	The content of the component is visible.
Hidden	1	The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed	2	The component is hidden (display:none).

BitDir enum

Name	Value	Description
Ltr	0	Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl	1	Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto	2	Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.

Notes

The BitChoiceGroup is a Multi-API component which can accept the list of Items in 3 different ways: 1. The BitChoiceGroupItem class 2. A Custom Generic class 3. The BitChoiceGroupOption component

Usage

Basic

Disabled

Images and Icons

Horizontal

LabelPosition

LabelTemplate

Item templates

Binding

Validation

Item descriptions

ReadOnly

Gap

Prefix & Suffix

Events

Dynamic items

Group description

FullWidth

Item title

AutoFocus

Color

External Icons

Size

Style & Class

RTL

API

BitChoiceGroup parameters

BitInputBase parameters

BitInputBase public members

BitComponentBase parameters

BitComponentBase public members

BitChoiceGroupItem properties

BitChoiceGroupOption properties

BitChoiceGroupNameSelectors<TItem, TValue> properties

BitChoiceGroupClassStyles properties

BitIconInfo properties

BitColor enum

BitLabelPosition enum

BitSize enum

BitVisibility enum

BitDir enum

Feedback

The BitChoiceGroup is a
Multi-API
component which can accept the list of Items in 3 different ways:
1. The
BitChoiceGroupItem
class
2. A
Custom Generic
class
3. The
BitChoiceGroupOption
component