From 951e50552edbfc71b32287236e9dcdf60a090917 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Tue, 21 Jul 2026 17:46:39 +0330
Subject: [PATCH 01/19] apply BitChoiceGroup improvements #12740

---
 .../Inputs/ChoiceGroup/BitChoiceGroup.razor   |   6 +-
 .../ChoiceGroup/BitChoiceGroup.razor.cs       |  60 ++++
 .../Inputs/ChoiceGroup/BitChoiceGroup.scss    |  36 ++
 .../ChoiceGroup/BitChoiceGroupClassStyles.cs  |   5 +
 .../Inputs/ChoiceGroup/BitChoiceGroupItem.cs  |   5 +
 .../BitChoiceGroupNameSelectors.cs            |   5 +
 .../ChoiceGroup/BitChoiceGroupOption.cs       |   5 +
 .../ChoiceGroup/_BitChoiceGroupItem.razor     |  44 ++-
 .../ChoiceGroup/_BitChoiceGroupItem.razor.cs  |  11 +-
 .../ChoiceGroup/BitChoiceGroupDemo.razor      |   4 +-
 .../ChoiceGroup/BitChoiceGroupDemo.razor.cs   |  73 +++-
 .../Components/Inputs/ChoiceGroup/Order.cs    |   2 +
 .../_BitChoiceGroupCustomDemo.razor           | 272 ++++++++++-----
 .../_BitChoiceGroupCustomDemo.razor.cs        |  45 +++
 ..._BitChoiceGroupCustomDemo.razor.samples.cs | 328 +++++++++++++-----
 .../ChoiceGroup/_BitChoiceGroupItemDemo.razor | 207 +++++++----
 .../_BitChoiceGroupItemDemo.razor.cs          |  45 +++
 .../_BitChoiceGroupItemDemo.razor.samples.cs  | 220 ++++++++----
 .../_BitChoiceGroupOptionDemo.razor           | 267 +++++++++-----
 .../_BitChoiceGroupOptionDemo.razor.cs        |  31 ++
 ..._BitChoiceGroupOptionDemo.razor.samples.cs | 224 ++++++++----
 .../Inputs/ChoiceGroup/BitChoiceGroupTests.cs |  96 +++++
 22 files changed, 1524 insertions(+), 467 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor
index f7c399f7ef..6a1db60881 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor
@@ -10,7 +10,11 @@
      class="@ClassBuilder.Value"
      dir="@Dir?.ToString().ToLower()"
      aria-label="@AriaLabel"
-     aria-labelledby="@GetAriaLabelledBy()">
+     aria-labelledby="@GetAriaLabelledBy()"
+     aria-required="@(Required ? "true" : null)"
+     aria-readonly="@(ReadOnly ? "true" : null)"
+     aria-disabled="@(IsEnabled ? null : "true")"
+     aria-orientation="@(Horizontal ? "horizontal" : "vertical")">
 
     <label id="@_labelId"
            disabled="@(IsEnabled is false)"
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
index 1383a26c06..60ac442301 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
@@ -10,6 +10,7 @@ namespace Bit.BlazorUI;
 {
     private List<TItem> _items = [];
     private string _name = default!;
+    private bool _autoFocusDone;
     private string _labelId = default!;
     private bool _optionsOrderDirty;
     private string _optionsContainerId = default!;
@@ -26,6 +27,11 @@ namespace Bit.BlazorUI;
     /// </summary>
     [Parameter] public string? AriaLabelledBy { get; set; }
 
+    /// <summary>
+    /// Determines if the ChoiceGroup is auto focused on first render, focusing its checked item (or its first item).
+    /// </summary>
+    [Parameter] public bool AutoFocus { get; set; }
+
     /// <summary>
     /// 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 (an option that
@@ -52,6 +58,12 @@ namespace Bit.BlazorUI;
     [Parameter, ResetClassBuilder]
     public BitColor? Color { get; set; }
 
+    /// <summary>
+    /// The gap between the items of the ChoiceGroup.
+    /// </summary>
+    [Parameter, ResetStyleBuilder]
+    public string? Gap { get; set; }
+
     /// <summary>
     /// Renders the items in the ChoiceGroup horizontally.
     /// </summary>
@@ -313,6 +325,8 @@ protected override void RegisterCssClasses()
     protected override void RegisterCssStyles()
     {
         StyleBuilder.Register(() => Styles?.Root);
+
+        StyleBuilder.Register(() => Gap.HasValue() ? $"--bit-chg-item-gap:{Gap}" : string.Empty);
     }
 
     protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out TValue result, [NotNullWhen(false)] out string? validationErrorMessage)
@@ -357,6 +371,30 @@ private void SetIndexItems()
 
     internal string? GetInputId(TItem item) => GetId(item) ?? $"ChoiceGroup-{UniqueId}-Input-{GetValue(item)}";
 
+    internal string GetDescriptionId(TItem item) => $"{GetInputId(item)}-description";
+
+    // Keeps the InputElement of the base class pointing at the input of the checked item (or the first
+    // item when nothing is checked), so FocusAsync targets the same input the Tab key would land on.
+    // Called by each item after render; also performs the one-time AutoFocus on that input.
+    internal async Task SetInputElement(TItem item, ElementReference inputElement)
+    {
+        var isChecked = GetIsCheckedItem(item);
+
+        if (isChecked is false)
+        {
+            if (_items.Any(GetIsCheckedItem)) return;
+            if (ReferenceEquals(_items.FirstOrDefault(), item) is false) return;
+        }
+
+        InputElement = inputElement;
+
+        if (AutoFocus && _autoFocusDone is false && IsEnabled && ReadOnly is false && GetIsEnabled(item))
+        {
+            _autoFocusDone = true;
+            await InputElement.FocusAsync();
+        }
+    }
+
     internal async Task HandleClick(TItem item)
     {
         if (IsEnabled is false || ReadOnly || GetIsEnabled(item) is false) return;
@@ -680,6 +718,28 @@ internal BitImageSize GetImageSize(TItem item)
         return item.GetValueFromProperty<RenderFragment<TItem>?>(NameSelectors.Template.Name);
     }
 
+    internal string? GetDescription(TItem item)
+    {
+        if (item is BitChoiceGroupItem<TValue> choiceGroupItem)
+        {
+            return choiceGroupItem.Description;
+        }
+
+        if (item is BitChoiceGroupOption<TValue> choiceGroupOption)
+        {
+            return choiceGroupOption.Description;
+        }
+
+        if (NameSelectors is null) return null;
+
+        if (NameSelectors.Description.Selector is not null)
+        {
+            return NameSelectors.Description.Selector!(item);
+        }
+
+        return item.GetValueFromProperty<string?>(NameSelectors.Description.Name);
+    }
+
     internal string? GetText(TItem item)
     {
         if (item is BitChoiceGroupItem<TValue> choiceGroupItem)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss
index e0e852a80e..ddb0a2ad93 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss
@@ -132,6 +132,27 @@
     }
 }
 
+// The input is visually hidden but stays focusable, so the browser provides the full native radio
+// group keyboard interaction (a single tab stop landing on the checked item, arrow keys moving the
+// selection with wrapping and RTL awareness, and Space checking the focused item).
+.bit-chg-inp {
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    width: 1px;
+    height: 1px;
+    border: none;
+    overflow: hidden;
+    position: absolute;
+    pointer-events: none;
+    clip-path: inset(50%);
+}
+
+.bit-chg-inp:focus-visible + .bit-chg-itl {
+    outline-offset: spacing(0.25);
+    outline: spacing(0.25) solid var(--bit-chg-clr);
+}
+
 .bit-chg-itl {
     display: flex;
     cursor: pointer;
@@ -140,6 +161,17 @@
     flex-direction: var(--bit-chg-flex-direction);
 }
 
+.bit-chg-txd {
+    display: flex;
+    flex-direction: column;
+}
+
+.bit-chg-dsc {
+    display: block;
+    color: $clr-fg-sec;
+    font-size: calc(var(--bit-chg-fontsize) - #{spacing(0.25)});
+}
+
 .bit-chg-ili {
     margin: 0;
     display: flex;
@@ -339,6 +371,10 @@
     .bit-chg-ico {
         color: $clr-fg-dis;
     }
+
+    .bit-chg-dsc {
+        color: $clr-fg-dis;
+    }
 }
 
 .bit-chg-pri {
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupClassStyles.cs
index b532ee5c90..94f6267f5b 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupClassStyles.cs
@@ -81,4 +81,9 @@ public class BitChoiceGroupClassStyles
     /// Custom CSS classes/styles for the text of each item of the BitChoiceGroup.
     /// </summary>
     public string? ItemText { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the description of each item of the BitChoiceGroup.
+    /// </summary>
+    public string? ItemDescription { get; set; }
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupItem.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupItem.cs
index ae4013fe59..91be0f9bc3 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupItem.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupItem.cs
@@ -12,6 +12,11 @@ public class BitChoiceGroupItem<TValue>
     /// </summary>
     public string? Class { get; set; }
 
+    /// <summary>
+    /// The secondary text to show under the text of the BitChoiceGroup item.
+    /// </summary>
+    public string? Description { get; set; }
+
     /// <summary>
     /// Id attribute of the BitChoiceGroup item.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupNameSelectors.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupNameSelectors.cs
index 0dd9a83f9f..2e33da2ec6 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupNameSelectors.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupNameSelectors.cs
@@ -12,6 +12,11 @@ public class BitChoiceGroupNameSelectors<TItem, TValue>
     /// </summary>
     public BitNameSelectorPair<TItem, string?> Class { get; set; } = new(nameof(BitChoiceGroupItem<TValue>.Class));
 
+    /// <summary>
+    /// The Description field name and selector of the custom input class.
+    /// </summary>
+    public BitNameSelectorPair<TItem, string?> Description { get; set; } = new(nameof(BitChoiceGroupItem<TValue>.Description));
+
     /// <summary>
     /// The Id field name and selector of the custom input class.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupOption.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupOption.cs
index 571768cba9..d9da4da252 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupOption.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupOption.cs
@@ -20,6 +20,11 @@ public partial class BitChoiceGroupOption<TValue> : ComponentBase, IDisposable
     /// </summary>
     [Parameter] public string? Class { get; set; }
 
+    /// <summary>
+    /// The secondary text to show under the text of the BitChoiceGroup option.
+    /// </summary>
+    [Parameter] public string? Description { get; set; }
+
     /// <summary>
     /// Id attribute of the BitChoiceGroup option.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor
index 83e17b8c67..89e1fd7556 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor
@@ -7,9 +7,27 @@
     var inputId = ChoiceGroup.GetInputId(Item);
     var template = ChoiceGroup.GetTemplate(Item);
     var isChecked = ChoiceGroup.GetIsCheckedItem(Item);
+    var description = ChoiceGroup.GetDescription(Item);
+    var descriptionId = ChoiceGroup.GetDescriptionId(Item);
 }
 
 <div style="@ChoiceGroup.GetItemContainerCssStyles(Item)" class="@ChoiceGroup.GetItemContainerCssClasses(Item)" @attributes="ChoiceGroup.GetItemMarkerAttributes(Item)">
+    <input @ref="_inputElement" @attributes="ChoiceGroup.InputHtmlAttributes"
+           @onclick="e => ChoiceGroup.HandleClick(Item)"
+           @onclick:preventDefault="ChoiceGroup.ReadOnly"
+           @onchange="e => ChoiceGroup.HandleChange(Item)"
+           type="radio"
+           id="@inputId"
+           checked=@isChecked
+           class="bit-chg-inp"
+           name="@ChoiceGroup.GetName()"
+           required="@ChoiceGroup.Required"
+           tabindex="@(ChoiceGroup.ReadOnly ? "-1" : null)"
+           aria-label="@ChoiceGroup.GetAriaLabel(Item)"
+           aria-describedby="@(description.HasValue() ? descriptionId : null)"
+           value="@ChoiceGroup.GetValue(Item)?.ToString()"
+           disabled="@(ChoiceGroup.GetIsEnabled(Item) is false)" />
+
     <label for="@inputId" style="@ChoiceGroup.Styles?.ItemLabel" class="bit-chg-itl @ChoiceGroup.GetItemLabelCssClasses(Item) @ChoiceGroup.Classes?.ItemLabel">
         @if (template is not null)
         {
@@ -71,6 +89,17 @@
                 {
                     <div style="@ChoiceGroup.Styles?.ItemTextWrapper" class="bit-chg-itw @ChoiceGroup.Classes?.ItemTextWrapper">
                         <span style="@ChoiceGroup.Styles?.ItemText" class="bit-chg-itx @ChoiceGroup.Classes?.ItemText">@ChoiceGroup.GetText(Item)</span>
+                        @if (description.HasValue())
+                        {
+                            <span id="@descriptionId" style="@ChoiceGroup.Styles?.ItemDescription" class="bit-chg-dsc @ChoiceGroup.Classes?.ItemDescription">@description</span>
+                        }
+                    </div>
+                }
+                else if (description.HasValue())
+                {
+                    <div class="bit-chg-txd">
+                        <span style="@ChoiceGroup.Styles?.ItemText" class="bit-chg-itx @ChoiceGroup.Classes?.ItemText">@ChoiceGroup.GetText(Item)</span>
+                        <span id="@descriptionId" style="@ChoiceGroup.Styles?.ItemDescription" class="bit-chg-dsc @ChoiceGroup.Classes?.ItemDescription">@description</span>
                     </div>
                 }
                 else
@@ -80,17 +109,4 @@
             }
         }
     </label>
-
-    <input @attributes="ChoiceGroup.InputHtmlAttributes"
-           @onclick="e => ChoiceGroup.HandleClick(Item)"
-           @onchange="e => ChoiceGroup.HandleChange(Item)"
-           hidden
-           type="radio"
-           name="@ChoiceGroup.GetName()"
-           id="@inputId"
-           checked=@isChecked
-           required="@ChoiceGroup.Required"
-           aria-label="@ChoiceGroup.GetAriaLabel(Item)"
-           value="@ChoiceGroup.GetValue(Item)?.ToString()"
-           disabled="@(ChoiceGroup.GetIsEnabled(Item) is false)" />
-</div>
\ No newline at end of file
+</div>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor.cs
index 7e9ba342e0..dbb3a87a88 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor.cs
@@ -1,8 +1,17 @@
-namespace Bit.BlazorUI;
+namespace Bit.BlazorUI;
 
 public partial class _BitChoiceGroupItem<TItem, TValue> : ComponentBase where TItem : class, new ()
 {
+    private ElementReference _inputElement;
+
     [Parameter] public TItem Item { get; set; } = default!;
 
     [Parameter] public BitChoiceGroup<TItem, TValue> ChoiceGroup { get; set; } = default!;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+
+        await ChoiceGroup.SetInputElement(Item, _inputElement);
+    }
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor
index 7f23991586..433bd530fa 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor
@@ -4,12 +4,12 @@
 
 <PageOutlet Url="components/choicegroup"
             Title="ChoiceGroup"
-            Description="ChoiceGroup lets people select a single option from two or more choices." />
+            Description="ChoiceGroup, also known as Radio or RadioGroup, lets people select a single value from two or more mutually exclusive choices, using fully keyboard accessible native radio inputs with support for icons, images, descriptions, and custom templates." />
 
 <div>
     <DemoPage Name="ChoiceGroup"
               SecondaryNames="@(["Radio", "RadioButton", "RadioGroup", "RadioButtonGroup"])"
-              Description="ChoiceGroup lets people select a single option from two or more choices."
+              Description="ChoiceGroup, also known as Radio or RadioGroup, lets people select a single value from two or more mutually exclusive choices. It renders fully keyboard accessible native radio inputs and supports icons, images, prefixes, per-item descriptions, and custom templates through three different item APIs."
               Parameters="componentParameters"
               SubEnums="componentSubEnums"
               SubClasses="componentSubClasses"
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs
index 92a9b19d7c..cb88793d90 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs
@@ -14,6 +14,20 @@ public partial class BitChoiceGroupDemo
             Description = "Id of an element to use as the aria label for the ChoiceGroup."
         },
         new()
+        {
+            Name = "AutoFocus",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Determines if the ChoiceGroup is auto focused on first render, focusing its checked item (or its first item)."
+        },
+        new()
+        {
+            Name = "AutoReorderOptions",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "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."
+        },
+        new()
         {
             Name = "ChildContent",
             Type = "RenderFragment?",
@@ -39,6 +53,13 @@ public partial class BitChoiceGroupDemo
             Href = "#color-enum",
         },
         new()
+        {
+            Name = "Gap",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The gap between the items of the ChoiceGroup."
+        },
+        new()
         {
             Name = "Inline",
             Type = "bool",
@@ -118,10 +139,16 @@ public partial class BitChoiceGroupDemo
             Description = "Removes the circle from the start of each item."
         },
         new()
+        {
+            Name = "OnChange",
+            Type = "EventCallback<TValue?>",
+            Description = "Callback for when the selected value changes.",
+        },
+        new()
         {
             Name = "OnClick",
-            Type = "EventCallback<MouseEventArgs>",
-            Description = "Callback for when the option clicked.",
+            Type = "EventCallback<TItem>",
+            Description = "Callback for when an enabled item is clicked, even the already selected one.",
         },
         new()
         {
@@ -131,6 +158,20 @@ public partial class BitChoiceGroupDemo
             Description = "Alias of ChildContent."
         },
         new()
+        {
+            Name = "ReadOnly",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Prevents changing the value of the ChoiceGroup while keeping its normal (non-disabled) appearance."
+        },
+        new()
+        {
+            Name = "Required",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Makes the ChoiceGroup required and adds the required asterisk to its label."
+        },
+        new()
         {
             Name = "Reversed",
             Type = "bool",
@@ -322,6 +363,13 @@ public partial class BitChoiceGroupDemo
                    Description = "CSS class attribute for the BitChoiceGroup item.",
                },
                new()
+               {
+                   Name = "Description",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "The secondary text to show under the text of the BitChoiceGroup item.",
+               },
+               new()
                {
                    Name = "Id",
                    Type = "string?",
@@ -451,6 +499,13 @@ public partial class BitChoiceGroupDemo
                    Description = "CSS class attribute for the BitChoiceGroup option.",
                },
                new()
+               {
+                   Name = "Description",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "The secondary text to show under the text of the BitChoiceGroup option.",
+               },
+               new()
                {
                    Name = "Id",
                    Type = "string?",
@@ -580,6 +635,13 @@ public partial class BitChoiceGroupDemo
                    Description = "CSS class attribute for the BitChoiceGroup option.",
                },
                new()
+               {
+                   Name = "Description",
+                   Type = "BitNameSelectorPair<TItem, string?>",
+                   DefaultValue = "new(nameof(BitChoiceGroupItem<TValue>.Description))",
+                   Description = "The secondary text to show under the text of the BitChoiceGroup option.",
+               },
+               new()
                {
                    Name = "Id",
                    Type = "BitNameSelectorPair<TItem, string?>",
@@ -799,6 +861,13 @@ public partial class BitChoiceGroupDemo
                    DefaultValue = "null",
                    Description = "Custom CSS classes/styles for the text of each item of the BitChoiceGroup.",
                },
+               new()
+               {
+                   Name = "ItemDescription",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the description of each item of the BitChoiceGroup.",
+               },
             ]
         },
         new()
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/Order.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/Order.cs
index 9425534337..49413765a2 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/Order.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/Order.cs
@@ -3,6 +3,8 @@ namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.ChoiceGroup;
 public class Order
 {
     public string? Name { get; set; }
+    public string? Prefix { get; set; }
+    public string? Summary { get; set; }
     public string? ItemValue { get; set; }
     public string? ImageAddress { get; set; }
     public string? ImageDescription { get; set; }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor
index 818df6054f..68dacdff2d 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor
@@ -1,4 +1,6 @@
 <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
+    <div>The basic ChoiceGroup lets people select a single item from a set of mutually exclusive choices, using any custom class as its item type through the NameSelectors mapping. 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.</div>
+    <br />
     <div class="example-content">
         <BitChoiceGroup Label="Basic Customs"
                         Items="basicCustoms"
@@ -14,7 +16,7 @@
 </DemoExample>
 
 <DemoExample Title="Disabled" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2" PreventRenderForMcpClient>
-    <div>Illustrates how to disable the entire BitChoiceGroup and individual items.</div>
+    <div>Disables the whole ChoiceGroup or its individual items. Disabled items cannot be selected and are skipped by the keyboard navigation.</div>
     <br />
     <div class="example-content">
         <BitChoiceGroup Label="Disabled ChoiceGroup"
@@ -33,7 +35,7 @@
 </DemoExample>
 
 <DemoExample Title="Images and Icons" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3" PreventRenderForMcpClient>
-    <div>Showcases BitChoiceGroup with image and icon items.</div>
+    <div>Displays items as image or icon tiles. An image item can provide a different image for its checked state, and the Inline mode renders the image or icon on the same line as the item text.</div>
     <br /><br />
     <div class="example-content">
         <BitChoiceGroup Label="Image Customs"
@@ -80,7 +82,7 @@
 </DemoExample>
 
 <DemoExample Title="Horizontal" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4" PreventRenderForMcpClient>
-    <div>Displays the BitChoiceGroup component in a horizontal layout, demonstrating various configurations.</div>
+    <div>Lays out the items horizontally instead of the default vertical stack, wrapping onto new lines when the available width runs out.</div>
     <br />
     <div class="example-content column">
         <BitChoiceGroup Label="Basic"
@@ -119,7 +121,7 @@
 </DemoExample>
 
 <DemoExample Title="Reversed" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5" PreventRenderForMcpClient>
-    <div>Adjust the label position of BitChoiceGroup's item to be reversed.</div>
+    <div>Moves the radio circle to the far end of each item, rendering it after the item content.</div>
     <br />
     <div class="example-content column">
         <BitChoiceGroup Label="Reversed"
@@ -131,7 +133,7 @@
 </DemoExample>
 
 <DemoExample Title="LabelTemplate" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6" PreventRenderForMcpClient>
-    <div>Demonstrates how to customize the label of the BitChoiceGroup using a template.</div>
+    <div>Replaces the plain text label of the ChoiceGroup with fully custom content using the LabelTemplate.</div>
     <br />
     <BitChoiceGroup Items="basicCustoms"
                     DefaultValue="@("A")"
@@ -145,7 +147,7 @@
 </DemoExample>
 
 <DemoExample Title="Item templates" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
-    <div>Illustrates how to customize the appearance of BitChoiceGroup options using item templates.</div>
+    <div>Customizes the item rendering at different levels: ItemPrefixTemplate prepends content to each item, ItemLabelTemplate replaces the content next to the radio circle, and ItemTemplate or the per-item Template takes over the whole item rendering.</div>
     <br />
     <div class="example-content">
         <BitChoiceGroup Label="ItemPrefixTemplate" Items="basicCustoms" DefaultValue="@string.Empty"
@@ -189,7 +191,7 @@
 </DemoExample>
 
 <DemoExample Title="Binding" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
-    <div>Shows how to use one-way and two-way data binding with BitChoiceGroup.</div>
+    <div>Binds the selected value with one-way binding (Value), where only the model drives the ChoiceGroup, or two-way binding (@@bind-Value) that keeps the model and the ChoiceGroup in sync.</div>
     <br />
     <div class="example-content">
         <div>
@@ -210,14 +212,14 @@
 </DemoExample>
 
 <DemoExample Title="Validation" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9" PreventRenderForMcpClient>
-    <div>Shows how to use data annotations for validating the selected value in BitChoiceGroup.</div>
+    <div>Integrates with EditForm and data annotations, marking the group as invalid and showing the validation message until a choice is made. The Required parameter adds the required asterisk to the group label.</div>
     <br />
     @if (string.IsNullOrEmpty(successMessage))
     {
         <EditForm Model="@validationModel" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit">
             <DataAnnotationsValidator />
 
-            <BitChoiceGroup @bind-Value="validationModel.Value"
+            <BitChoiceGroup Label="Pick one" Required @bind-Value="validationModel.Value"
                             Items="basicCustoms"
                             NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />
             <ValidationMessage For="@(() => validationModel.Value)" />
@@ -235,93 +237,98 @@
     <BitButton Variant="BitVariant.Outline" OnClick="() => { validationModel = new(); successMessage=string.Empty; }">Reset</BitButton>
 </DemoExample>
 
-<DemoExample Title="Size" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10" PreventRenderForMcpClient>
-    <div>Varying sizes for BitChoiceGroup tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.</div>
-    <br /><br />
-    <div>Basic ChoiceGroup</div>
-    <div class="example-content column">
-        <BitChoiceGroup Size="BitSize.Small"
-                        Label="Small"
+<DemoExample Title="Descriptions" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
+    <div>Adds secondary text under each item using the Description name selector. The description is automatically linked to its input via aria-describedby, so screen readers announce it along with the item label.</div>
+    <br />
+    <div class="example-content">
+        <BitChoiceGroup Label="Backup frequency"
+                        Items="descriptionCustoms"
+                        DefaultValue="@("Daily")"
+                        NameSelectors="@(new() { Text = { Name = nameof(Order.Name) },
+                                                 Value = { Name = nameof(Order.ItemValue) },
+                                                 Description = { Name = nameof(Order.Summary) } })" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="ReadOnly" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
+    <div>Prevents changing the value using the ReadOnly parameter while keeping the normal (non-disabled) appearance; readonly items are also removed from the keyboard tab order.</div>
+    <br />
+    <div class="example-content">
+        <BitChoiceGroup Label="ReadOnly"
+                        ReadOnly
                         Items="basicCustoms"
-                        DefaultValue="basicCustoms[1].ItemValue"
-                        NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" Horizontal />
+                        @bind-Value="readOnlyValue"
+                        NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />
+    </div>
+</DemoExample>
 
-        <BitChoiceGroup Size="BitSize.Medium"
-                        Label="Medium"
+<DemoExample Title="Gap" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
+    <div>Customizes the gap between the items using any CSS length value, overriding the default spacing of the current size.</div>
+    <br />
+    <div class="example-content column">
+        <BitChoiceGroup Label="1rem gap"
+                        Gap="1rem"
                         Items="basicCustoms"
-                        DefaultValue="basicCustoms[1].ItemValue"
-                        NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" Horizontal />
+                        DefaultValue="@("A")"
+                        NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />
 
-        <BitChoiceGroup Size="BitSize.Large"
-                        Label="Large"
+        <BitChoiceGroup Label="3rem gap (Horizontal)"
+                        Gap="3rem"
+                        Horizontal
                         Items="basicCustoms"
-                        DefaultValue="basicCustoms[1].ItemValue"
-                        NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" Horizontal />
+                        DefaultValue="@("A")"
+                        NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />
     </div>
-    <br /><br />
-    <div>ChoiceGroup with inline icon</div>
-    <div class="example-content column">
-        <BitChoiceGroup Size="BitSize.Small"
-                        Label="Small"
-                        Items="iconCustoms"
-                        DefaultValue="@("Day")"
-                        NameSelectors="@(new() { Text = { Selector = i => i.Name },
-                                                 Value = { Selector = i => i.ItemValue },
-                                                 IconName = { Selector = i => i.IconName },
-                                                 IsEnabled = { Selector = i => i.IsDisabled is false } })" Horizontal Inline />
-
-        <BitChoiceGroup Size="BitSize.Medium"
-                        Label="Medium"
-                        Items="iconCustoms"
-                        DefaultValue="@("Day")"
-                        NameSelectors="@(new() { Text = { Selector = i => i.Name },
-                                                 Value = { Selector = i => i.ItemValue },
-                                                 IconName = { Selector = i => i.IconName },
-                                                 IsEnabled = { Selector = i => i.IsDisabled is false } })" Horizontal Inline />
+</DemoExample>
 
-        <BitChoiceGroup Size="BitSize.Large"
-                        Label="Large"
-                        Items="iconCustoms"
-                        DefaultValue="@("Day")"
-                        NameSelectors="@(new() { Text = { Selector = i => i.Name },
-                                                 Value = { Selector = i => i.ItemValue },
-                                                 IconName = { Selector = i => i.IconName },
-                                                 IsEnabled = { Selector = i => i.IsDisabled is false } })" Horizontal Inline />
+<DemoExample Title="Prefix" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
+    <div>Adds plain text in front of each item using the Prefix name selector, rendered before the radio circle. For arbitrary prefix content, use the ItemPrefixTemplate shown in the Item templates section.</div>
+    <br />
+    <div class="example-content">
+        <BitChoiceGroup Label="Shipping method"
+                        Items="prefixCustoms"
+                        DefaultValue="@("Standard")"
+                        NameSelectors="@(new() { Text = { Name = nameof(Order.Name) },
+                                                 Value = { Name = nameof(Order.ItemValue) },
+                                                 Prefix = { Name = nameof(Order.Prefix) } })" />
     </div>
-    <br /><br />
-    <div>ChoiceGroup with icon</div>
-    <div class="example-content column">
-        <BitChoiceGroup Size="BitSize.Small"
-                        Label="Small"
-                        Items="iconCustoms"
-                        DefaultValue="@("Day")"
-                        NameSelectors="@(new() { Text = { Selector = i => i.Name },
-                                                 Value = { Selector = i => i.ItemValue },
-                                                 IconName = { Selector = i => i.IconName },
-                                                 IsEnabled = { Selector = i => i.IsDisabled is false } })" Horizontal />
+</DemoExample>
 
-        <BitChoiceGroup Size="BitSize.Medium"
-                        Label="Medium"
-                        Items="iconCustoms"
-                        DefaultValue="@("Day")"
-                        NameSelectors="@(new() { Text = { Selector = i => i.Name },
-                                                 Value = { Selector = i => i.ItemValue },
-                                                 IconName = { Selector = i => i.IconName },
-                                                 IsEnabled = { Selector = i => i.IsDisabled is false } })" Horizontal />
+<DemoExample Title="Events" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
+    <div>Raises OnChange whenever the selected value changes, and OnClick on every click of an enabled item, including the already selected one.</div>
+    <br />
+    <div class="example-content column">
+        <BitChoiceGroup Label="Events" Items="basicCustoms" DefaultValue="@("A")"
+                        OnChange="(string? value) => changedValue = value"
+                        OnClick="(Order custom) => clickedCustom = custom.Name"
+                        NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />
+        <div>Changed value: <b>@changedValue</b></div>
+        <div>Clicked custom: <b>@clickedCustom</b></div>
+    </div>
+</DemoExample>
 
-        <BitChoiceGroup Size="BitSize.Large"
-                        Label="Large"
-                        Items="iconCustoms"
-                        DefaultValue="@("Day")"
-                        NameSelectors="@(new() { Text = { Selector = i => i.Name },
-                                                 Value = { Selector = i => i.ItemValue },
-                                                 IconName = { Selector = i => i.IconName },
-                                                 IsEnabled = { Selector = i => i.IsDisabled is false } })" Horizontal />
+<DemoExample Title="Dynamic items" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
+    <div>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.</div>
+    <br />
+    <div class="example-content column">
+        <div>
+            <BitButton OnClick="AddDynamicCustom">Add item</BitButton>
+            <BitButton OnClick="RemoveDynamicCustom">Remove item</BitButton>
+            <BitButton OnClick="ReverseDynamicCustoms">Reverse items</BitButton>
+        </div>
+        <BitChoiceGroup Label="Dynamic customs" Items="dynamicCustoms" @bind-Value="dynamicValue"
+                        NameSelectors="@(new() { Text = { Name = nameof(Order.Name) },
+                                                 Value = { Name = nameof(Order.ItemValue) },
+                                                 Index = nameof(Order.Idx) })">
+            <ItemPrefixTemplate Context="custom">
+                @(custom.Idx + 1).&nbsp;
+            </ItemPrefixTemplate>
+        </BitChoiceGroup>
     </div>
 </DemoExample>
 
-<DemoExample Title="Color" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11" PreventRenderForMcpClient>
-        <div>Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.</div>
+<DemoExample Title="Color" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16" PreventRenderForMcpClient>
+        <div>Colors the radio circle and the checked state of the items using the BitColor palette, with Primary being the default.</div>
         <br />
         <div>
             <div class="example-box">
@@ -485,8 +492,8 @@
         </div>
     </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12" PreventRenderForMcpClient>
-    <div>Use icons from external libraries like FontAwesome or Bootstrap Icons with the Icon parameter and NameSelectors.</div>
+<DemoExample Title="External Icons" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17" PreventRenderForMcpClient>
+    <div>Renders icons from external libraries like Font Awesome or Bootstrap Icons using the Icon name selector, instead of the built-in icon font used by IconName.</div>
     
     <br />
     
@@ -519,8 +526,93 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Style & Class" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13" PreventRenderForMcpClient>
-    <div>Explores styling and class customization for BitChoiceGroup, including component styles, custom classes, and detailed style items.</div>
+<DemoExample Title="Size" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18" PreventRenderForMcpClient>
+    <div>Comes in Small, Medium (default), and Large sizes that scale the radio circle, text, icons, and item spacing together.</div>
+    <br /><br />
+    <div>Basic ChoiceGroup</div>
+    <div class="example-content column">
+        <BitChoiceGroup Size="BitSize.Small"
+                        Label="Small"
+                        Items="basicCustoms"
+                        DefaultValue="basicCustoms[1].ItemValue"
+                        NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" Horizontal />
+
+        <BitChoiceGroup Size="BitSize.Medium"
+                        Label="Medium"
+                        Items="basicCustoms"
+                        DefaultValue="basicCustoms[1].ItemValue"
+                        NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" Horizontal />
+
+        <BitChoiceGroup Size="BitSize.Large"
+                        Label="Large"
+                        Items="basicCustoms"
+                        DefaultValue="basicCustoms[1].ItemValue"
+                        NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" Horizontal />
+    </div>
+    <br /><br />
+    <div>ChoiceGroup with inline icon</div>
+    <div class="example-content column">
+        <BitChoiceGroup Size="BitSize.Small"
+                        Label="Small"
+                        Items="iconCustoms"
+                        DefaultValue="@("Day")"
+                        NameSelectors="@(new() { Text = { Selector = i => i.Name },
+                                                 Value = { Selector = i => i.ItemValue },
+                                                 IconName = { Selector = i => i.IconName },
+                                                 IsEnabled = { Selector = i => i.IsDisabled is false } })" Horizontal Inline />
+
+        <BitChoiceGroup Size="BitSize.Medium"
+                        Label="Medium"
+                        Items="iconCustoms"
+                        DefaultValue="@("Day")"
+                        NameSelectors="@(new() { Text = { Selector = i => i.Name },
+                                                 Value = { Selector = i => i.ItemValue },
+                                                 IconName = { Selector = i => i.IconName },
+                                                 IsEnabled = { Selector = i => i.IsDisabled is false } })" Horizontal Inline />
+
+        <BitChoiceGroup Size="BitSize.Large"
+                        Label="Large"
+                        Items="iconCustoms"
+                        DefaultValue="@("Day")"
+                        NameSelectors="@(new() { Text = { Selector = i => i.Name },
+                                                 Value = { Selector = i => i.ItemValue },
+                                                 IconName = { Selector = i => i.IconName },
+                                                 IsEnabled = { Selector = i => i.IsDisabled is false } })" Horizontal Inline />
+    </div>
+    <br /><br />
+    <div>ChoiceGroup with icon</div>
+    <div class="example-content column">
+        <BitChoiceGroup Size="BitSize.Small"
+                        Label="Small"
+                        Items="iconCustoms"
+                        DefaultValue="@("Day")"
+                        NameSelectors="@(new() { Text = { Selector = i => i.Name },
+                                                 Value = { Selector = i => i.ItemValue },
+                                                 IconName = { Selector = i => i.IconName },
+                                                 IsEnabled = { Selector = i => i.IsDisabled is false } })" Horizontal />
+
+        <BitChoiceGroup Size="BitSize.Medium"
+                        Label="Medium"
+                        Items="iconCustoms"
+                        DefaultValue="@("Day")"
+                        NameSelectors="@(new() { Text = { Selector = i => i.Name },
+                                                 Value = { Selector = i => i.ItemValue },
+                                                 IconName = { Selector = i => i.IconName },
+                                                 IsEnabled = { Selector = i => i.IsDisabled is false } })" Horizontal />
+
+        <BitChoiceGroup Size="BitSize.Large"
+                        Label="Large"
+                        Items="iconCustoms"
+                        DefaultValue="@("Day")"
+                        NameSelectors="@(new() { Text = { Selector = i => i.Name },
+                                                 Value = { Selector = i => i.ItemValue },
+                                                 IconName = { Selector = i => i.IconName },
+                                                 IsEnabled = { Selector = i => i.IsDisabled is false } })" Horizontal />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Style & Class" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
+    <div>Customizes the appearance at every level: Style and Class on the root element, per-item styles and classes, and the Styles and Classes objects that target the internal parts of the component, including the checked state of the items.</div>
     <br /><br />
     <div>Component's Style & Class:</div>
     <br />
@@ -572,8 +664,8 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="RTL" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14" PreventRenderForMcpClient>
-    <div>Use BitChoiceGroup in right-to-left (RTL).</div>
+<DemoExample Title="RTL" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20" PreventRenderForMcpClient>
+    <div>Renders the ChoiceGroup in right-to-left mode; the layout is mirrored and the keyboard arrow keys follow the text direction.</div>
     <br />
     <div dir="rtl" class="example-content">
         <BitChoiceGroup Label="ساده"
@@ -627,4 +719,4 @@
             }
         };
     }
-}
\ No newline at end of file
+}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.cs
index 2f8cc4b539..5f9751b23b 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.cs
@@ -4,6 +4,19 @@ public partial class _BitChoiceGroupCustomDemo
 {
     private string oneWayValue = "A";
     private string twoWayValue = "A";
+    private string readOnlyValue = "A";
+
+    private string? changedValue;
+    private string? clickedCustom;
+
+    private int dynamicCounter = 3;
+    private string? dynamicValue = "1";
+    private List<Order> dynamicCustoms =
+    [
+        new() { Name = "Custom 1", ItemValue = "1" },
+        new() { Name = "Custom 2", ItemValue = "2" },
+        new() { Name = "Custom 3", ItemValue = "3" }
+    ];
     private string itemTemplateValue = "Day";
     private string itemTemplateValue2 = "Day";
     private string itemLabelTemplateValue = "Day";
@@ -93,6 +106,20 @@ public partial class _BitChoiceGroupCustomDemo
         new() { Name = "Custom D", ItemValue = "D", Class = "custom-item" }
     ];
 
+    private readonly List<Order> 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<Order> 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<Order> itemLabelTemplateCustoms =
     [
         new() { Name = "Day", ItemValue = "Day", IconName = BitIconName.CalendarDay },
@@ -116,6 +143,24 @@ public partial class _BitChoiceGroupCustomDemo
     ];
 
 
+    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)];
+    }
+
     private void HandleValidSubmit()
     {
         successMessage = "Form Submitted Successfully!";
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cs
index f7a5e2e121..ccea06a155 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cs
@@ -8,7 +8,7 @@ public partial class _BitChoiceGroupCustomDemo
                 DefaultValue=""basicCustoms[1].ItemValue""
                 NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })"" />
 
-<BitChoiceGroup Label=""Basic Customs""
+<BitChoiceGroup Label=""NoCircle""
                 NoCircle
                 Items=""basicCustoms""
                 DefaultValue=""basicCustoms[1].ItemValue""
@@ -520,7 +520,7 @@ public class Order
 <EditForm Model=""@validationModel"" OnValidSubmit=""@HandleValidSubmit"" OnInvalidSubmit=""@HandleInvalidSubmit"">
     <DataAnnotationsValidator />
     
-    <BitChoiceGroup @bind-Value=""validationModel.Value""
+    <BitChoiceGroup Label=""Pick one"" Required @bind-Value=""validationModel.Value""
                     Items=""basicCustoms""
                     NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })"" />
     <ValidationMessage For=""@(() => validationModel.Value)"" />
@@ -554,84 +554,115 @@ public class Order
 ];";
 
     private readonly string example10RazorCode = @"
-<BitChoiceGroup Size=""BitSize.Small""
-                Label=""Small""
-                Items=""basicCustoms""
-                DefaultValue=""basicCustoms[1].ItemValue""
-                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })"" Horizontal />
+<BitChoiceGroup Label=""Backup frequency""
+                Items=""descriptionCustoms""
+                DefaultValue=""@(""Daily"")""
+                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) },
+                                         Value = { Name = nameof(Order.ItemValue) },
+                                         Description = { Name = nameof(Order.Summary) } })"" />";
+    private readonly string example10CsharpCode = @"
+public class Order
+{
+    public string Name { get; set; }
+    public string Summary { get; set; }
+    public string ItemValue { get; set; }
+}
 
-<BitChoiceGroup Size=""BitSize.Medium""
-                Label=""Medium""
+private readonly List<Order> 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 string example11RazorCode = @"
+<BitChoiceGroup Label=""ReadOnly""
+                ReadOnly
                 Items=""basicCustoms""
-                DefaultValue=""basicCustoms[1].ItemValue""
-                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })"" Horizontal />
+                @bind-Value=""readOnlyValue""
+                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })"" />";
+    private readonly string example11CsharpCode = @"
+private string readOnlyValue = ""A"";
 
-<BitChoiceGroup Size=""BitSize.Large""
-                Label=""Large""
+public class Order
+{
+    public string Name { get; set; }
+    public string ItemValue { get; set; }
+}
+
+private readonly List<Order> basicCustoms =
+[
+    new() { Name = ""Custom A"", ItemValue = ""A"" },
+    new() { Name = ""Custom B"", ItemValue = ""B"" },
+    new() { Name = ""Custom C"", ItemValue = ""C"" },
+    new() { Name = ""Custom D"", ItemValue = ""D"" }
+];";
+
+    private readonly string example12RazorCode = @"
+<BitChoiceGroup Label=""1rem gap""
+                Gap=""1rem""
                 Items=""basicCustoms""
-                DefaultValue=""basicCustoms[1].ItemValue""
-                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })"" Horizontal />
+                DefaultValue=""@(""A"")""
+                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })"" />
 
-<BitChoiceGroup Size=""BitSize.Small""
-                Label=""Small""
-                Items=""iconCustoms""
-                DefaultValue=""@(""Day"")""
-                NameSelectors=""@(new() { Text = { Selector = i => i.Name },
-                                          Value = { Selector = i => i.ItemValue },
-                                          IconName = { Selector = i => i.IconName },
-                                          IsEnabled = { Selector = i => i.IsDisabled is false } })"" Horizontal Inline />
+<BitChoiceGroup Label=""3rem gap (Horizontal)""
+                Gap=""3rem""
+                Horizontal
+                Items=""basicCustoms""
+                DefaultValue=""@(""A"")""
+                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })"" />";
+    private readonly string example12CsharpCode = @"
+public class Order
+{
+    public string Name { get; set; }
+    public string ItemValue { get; set; }
+}
 
-<BitChoiceGroup Size=""BitSize.Medium""
-                Label=""Medium""
-                Items=""iconCustoms""
-                DefaultValue=""@(""Day"")""
-                NameSelectors=""@(new() { Text = { Selector = i => i.Name },
-                                          Value = { Selector = i => i.ItemValue },
-                                          IconName = { Selector = i => i.IconName },
-                                          IsEnabled = { Selector = i => i.IsDisabled is false } })"" Horizontal Inline />
+private readonly List<Order> basicCustoms =
+[
+    new() { Name = ""Custom A"", ItemValue = ""A"" },
+    new() { Name = ""Custom B"", ItemValue = ""B"" },
+    new() { Name = ""Custom C"", ItemValue = ""C"" },
+    new() { Name = ""Custom D"", ItemValue = ""D"" }
+];";
 
-<BitChoiceGroup Size=""BitSize.Large""
-                Label=""Large""
-                Items=""iconCustoms""
-                DefaultValue=""@(""Day"")""
-                NameSelectors=""@(new() { Text = { Selector = i => i.Name },
-                                          Value = { Selector = i => i.ItemValue },
-                                          IconName = { Selector = i => i.IconName },
-                                          IsEnabled = { Selector = i => i.IsDisabled is false } })"" Horizontal Inline />
+    private readonly string example13RazorCode = @"
+<BitChoiceGroup Label=""Shipping method""
+                Items=""prefixCustoms""
+                DefaultValue=""@(""Standard"")""
+                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) },
+                                         Value = { Name = nameof(Order.ItemValue) },
+                                         Prefix = { Name = nameof(Order.Prefix) } })"" />";
+    private readonly string example13CsharpCode = @"
+public class Order
+{
+    public string Name { get; set; }
+    public string Prefix { get; set; }
+    public string ItemValue { get; set; }
+}
 
-<BitChoiceGroup Size=""BitSize.Small""
-                Label=""Small""
-                Items=""iconCustoms""
-                DefaultValue=""@(""Day"")""
-                NameSelectors=""@(new() { Text = { Selector = i => i.Name },
-                                          Value = { Selector = i => i.ItemValue },
-                                          IconName = { Selector = i => i.IconName },
-                                          IsEnabled = { Selector = i => i.IsDisabled is false } })"" Horizontal />
+private readonly List<Order> prefixCustoms =
+[
+    new() { Name = ""Standard"", ItemValue = ""Standard"", Prefix = ""$0 — "" },
+    new() { Name = ""Express"", ItemValue = ""Express"", Prefix = ""$10 — "" },
+    new() { Name = ""Overnight"", ItemValue = ""Overnight"", Prefix = ""$25 — "" }
+];";
 
-<BitChoiceGroup Size=""BitSize.Medium""
-                Label=""Medium""
-                Items=""iconCustoms""
-                DefaultValue=""@(""Day"")""
-                NameSelectors=""@(new() { Text = { Selector = i => i.Name },
-                                          Value = { Selector = i => i.ItemValue },
-                                          IconName = { Selector = i => i.IconName },
-                                          IsEnabled = { Selector = i => i.IsDisabled is false } })"" Horizontal />
+    private readonly string example14RazorCode = @"
+<BitChoiceGroup Label=""Events"" Items=""basicCustoms"" DefaultValue=""@(""A"")""
+                OnChange=""(string? value) => changedValue = value""
+                OnClick=""(Order custom) => clickedCustom = custom.Name""
+                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })"" />
+<div>Changed value: <b>@changedValue</b></div>
+<div>Clicked custom: <b>@clickedCustom</b></div>";
+    private readonly string example14CsharpCode = @"
+private string? changedValue;
+private string? clickedCustom;
 
-<BitChoiceGroup Size=""BitSize.Large""
-                Label=""Large""
-                Items=""iconCustoms""
-                DefaultValue=""@(""Day"")""
-                NameSelectors=""@(new() { Text = { Selector = i => i.Name },
-                                          Value = { Selector = i => i.ItemValue },
-                                          IconName = { Selector = i => i.IconName },
-                                          IsEnabled = { Selector = i => i.IsDisabled is false } })"" Horizontal />";
-    private readonly string example10CsharpCode = @"
 public class Order
 {
     public string Name { get; set; }
     public string ItemValue { get; set; }
-    public string? IconName { get; set; }
-    public bool IsDisabled { get; set; }
 }
 
 private readonly List<Order> basicCustoms =
@@ -640,16 +671,57 @@ public class Order
     new() { Name = ""Custom B"", ItemValue = ""B"" },
     new() { Name = ""Custom C"", ItemValue = ""C"" },
     new() { Name = ""Custom D"", ItemValue = ""D"" }
-];
+];";
 
-private readonly List<Order> iconCustoms =
+    private readonly string example15RazorCode = @"
+<BitButton OnClick=""AddDynamicCustom"">Add item</BitButton>
+<BitButton OnClick=""RemoveDynamicCustom"">Remove item</BitButton>
+<BitButton OnClick=""ReverseDynamicCustoms"">Reverse items</BitButton>
+
+<BitChoiceGroup Label=""Dynamic customs"" Items=""dynamicCustoms"" @bind-Value=""dynamicValue""
+                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) },
+                                         Value = { Name = nameof(Order.ItemValue) },
+                                         Index = nameof(Order.Idx) })"">
+    <ItemPrefixTemplate Context=""custom"">
+        @(custom.Idx + 1).&nbsp;
+    </ItemPrefixTemplate>
+</BitChoiceGroup>";
+    private readonly string example15CsharpCode = @"
+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<Order> dynamicCustoms =
 [
-    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 }
-];";
+    new() { Name = ""Custom 1"", ItemValue = ""1"" },
+    new() { Name = ""Custom 2"", ItemValue = ""2"" },
+    new() { Name = ""Custom 3"", ItemValue = ""3"" }
+];
 
-    private readonly string example11RazorCode = @"
+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)];
+}";
+
+    private readonly string example16RazorCode = @"
 <BitChoiceGroup Color=""BitColor.Primary"" 
                 Label=""Primary"" 
                 Horizontal
@@ -768,7 +840,7 @@ public class Order
                 Items=""basicCustoms""
                 DefaultValue=""basicCustoms[1].ItemValue""
                 NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })"" />";
-    private readonly string example11CsharpCode = @"
+    private readonly string example16CsharpCode = @"
 public class Order
 {
     public string Name { get; set; }
@@ -783,7 +855,7 @@ public class Order
     new() { Name = ""Custom D"", ItemValue = ""D"" }
 ];";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example17RazorCode = @"
 <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/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
 
@@ -807,7 +879,7 @@ public class Order
                 NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, 
                                          Value = { Name = nameof(Order.ItemValue) }, 
                                          Icon = { Name = nameof(Order.Icon) } })"" />";
-    private readonly string example12CsharpCode = @"
+    private readonly string example17CsharpCode = @"
 public class Order
 {
     public string? Name { get; set; }
@@ -822,7 +894,103 @@ public class Order
     new() { Name = ""Month"", ItemValue = ""Month"", Icon = BitIconInfo.Bi(""calendar-month"") }
 ];";
 
-    private readonly string example13RazorCode = @"
+    private readonly string example18RazorCode = @"
+<BitChoiceGroup Size=""BitSize.Small""
+                Label=""Small""
+                Items=""basicCustoms""
+                DefaultValue=""basicCustoms[1].ItemValue""
+                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })"" Horizontal />
+
+<BitChoiceGroup Size=""BitSize.Medium""
+                Label=""Medium""
+                Items=""basicCustoms""
+                DefaultValue=""basicCustoms[1].ItemValue""
+                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })"" Horizontal />
+
+<BitChoiceGroup Size=""BitSize.Large""
+                Label=""Large""
+                Items=""basicCustoms""
+                DefaultValue=""basicCustoms[1].ItemValue""
+                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })"" Horizontal />
+
+<BitChoiceGroup Size=""BitSize.Small""
+                Label=""Small""
+                Items=""iconCustoms""
+                DefaultValue=""@(""Day"")""
+                NameSelectors=""@(new() { Text = { Selector = i => i.Name },
+                                          Value = { Selector = i => i.ItemValue },
+                                          IconName = { Selector = i => i.IconName },
+                                          IsEnabled = { Selector = i => i.IsDisabled is false } })"" Horizontal Inline />
+
+<BitChoiceGroup Size=""BitSize.Medium""
+                Label=""Medium""
+                Items=""iconCustoms""
+                DefaultValue=""@(""Day"")""
+                NameSelectors=""@(new() { Text = { Selector = i => i.Name },
+                                          Value = { Selector = i => i.ItemValue },
+                                          IconName = { Selector = i => i.IconName },
+                                          IsEnabled = { Selector = i => i.IsDisabled is false } })"" Horizontal Inline />
+
+<BitChoiceGroup Size=""BitSize.Large""
+                Label=""Large""
+                Items=""iconCustoms""
+                DefaultValue=""@(""Day"")""
+                NameSelectors=""@(new() { Text = { Selector = i => i.Name },
+                                          Value = { Selector = i => i.ItemValue },
+                                          IconName = { Selector = i => i.IconName },
+                                          IsEnabled = { Selector = i => i.IsDisabled is false } })"" Horizontal Inline />
+
+<BitChoiceGroup Size=""BitSize.Small""
+                Label=""Small""
+                Items=""iconCustoms""
+                DefaultValue=""@(""Day"")""
+                NameSelectors=""@(new() { Text = { Selector = i => i.Name },
+                                          Value = { Selector = i => i.ItemValue },
+                                          IconName = { Selector = i => i.IconName },
+                                          IsEnabled = { Selector = i => i.IsDisabled is false } })"" Horizontal />
+
+<BitChoiceGroup Size=""BitSize.Medium""
+                Label=""Medium""
+                Items=""iconCustoms""
+                DefaultValue=""@(""Day"")""
+                NameSelectors=""@(new() { Text = { Selector = i => i.Name },
+                                          Value = { Selector = i => i.ItemValue },
+                                          IconName = { Selector = i => i.IconName },
+                                          IsEnabled = { Selector = i => i.IsDisabled is false } })"" Horizontal />
+
+<BitChoiceGroup Size=""BitSize.Large""
+                Label=""Large""
+                Items=""iconCustoms""
+                DefaultValue=""@(""Day"")""
+                NameSelectors=""@(new() { Text = { Selector = i => i.Name },
+                                          Value = { Selector = i => i.ItemValue },
+                                          IconName = { Selector = i => i.IconName },
+                                          IsEnabled = { Selector = i => i.IsDisabled is false } })"" Horizontal />";
+    private readonly string example18CsharpCode = @"
+public class Order
+{
+    public string Name { get; set; }
+    public string ItemValue { get; set; }
+    public string? IconName { get; set; }
+    public bool IsDisabled { get; set; }
+}
+
+private readonly List<Order> basicCustoms =
+[
+    new() { Name = ""Custom A"", ItemValue = ""A"" },
+    new() { Name = ""Custom B"", ItemValue = ""B"" },
+    new() { Name = ""Custom C"", ItemValue = ""C"" },
+    new() { Name = ""Custom D"", ItemValue = ""D"" }
+];
+
+private readonly List<Order> iconCustoms =
+[
+    new() { Name = ""Day"", ItemValue = ""Day"", IconName = BitIconName.CalendarDay },
+    new() { Name = ""Week"", ItemValue = ""Week"", IconName = BitIconName.CalendarWeek },
+    new() { Name = ""Month"", ItemValue = ""Month"", IconName = BitIconName.Calendar, IsDisabled = true }
+];";
+
+    private readonly string example19RazorCode = @"
 <style>
     .custom-class {
         color: dodgerblue;
@@ -906,7 +1074,7 @@ public class Order
                                    ItemChecked = ""custom-checked"",
                                    ItemRadioButton = ""custom-radio-btn"" })""
                 NameSelectors=""@(new() { Text = { Selector = i => i.Name }, Value = { Selector = i => i.ItemValue } })""/>";
-    private readonly string example13CsharpCode = @"
+    private readonly string example19CsharpCode = @"
 public class Order
 {
     public string Name { get; set; }
@@ -931,7 +1099,7 @@ public class Order
     new() { Name = ""Custom D"", ItemValue = ""D"", Class = ""custom-item"" }
 ];";
 
-    private readonly string example14RazorCode = @"
+    private readonly string example20RazorCode = @"
 <BitChoiceGroup Label=""ساده""
                 Dir=""BitDir.Rtl""
                 DefaultValue=""@(""A"")""
@@ -944,7 +1112,7 @@ public class Order
                 DefaultValue=""@(""A"")""
                 Items=""rtlCustoms""
                 NameSelectors=""@(new() { Text = { Selector = i => i.Name }, Value = { Selector = i => i.ItemValue } })"" />";
-    private readonly string example14CsharpCode = @"
+    private readonly string example20CsharpCode = @"
 public class Order
 {
     public string Name { get; set; }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor
index 7b2beaea3f..1929f0a6f4 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor
@@ -1,4 +1,6 @@
 <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
+    <div>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.</div>
+    <br />
     <div class="example-content">
         <BitChoiceGroup Label="Basic Items"
                         Items="basicItems"
@@ -12,7 +14,7 @@
 </DemoExample>
 
 <DemoExample Title="Disabled" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
-    <div>Illustrates how to disable the entire BitChoiceGroup and individual items.</div>
+    <div>Disables the whole ChoiceGroup or its individual items. Disabled items cannot be selected and are skipped by the keyboard navigation.</div>
     <br />
     <div class="example-content">
         <BitChoiceGroup Label="Disabled ChoiceGroup"
@@ -27,7 +29,7 @@
 </DemoExample>
 
 <DemoExample Title="Images and Icons" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
-    <div>Showcases BitChoiceGroup with image and icon items.</div>
+    <div>Displays items as image or icon tiles. An image item can provide a different image for its checked state, and the Inline mode renders the image or icon on the same line as the item text.</div>
     <br /><br />
     <div class="example-content">
         <BitChoiceGroup Label="Image Items" Items="imageItems" DefaultValue="@("Bar")" />
@@ -42,7 +44,7 @@
 </DemoExample>
 
 <DemoExample Title="Horizontal" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4" PreventRenderForMcpClient>
-    <div>Displays the BitChoiceGroup component in a horizontal layout, demonstrating various configurations.</div>
+    <div>Lays out the items horizontally instead of the default vertical stack, wrapping onto new lines when the available width runs out.</div>
     <br />
     <div class="example-content column">
         <BitChoiceGroup Label="Basic" Items="basicItems" DefaultValue="@("A")" Horizontal />
@@ -53,7 +55,7 @@
 </DemoExample>
 
 <DemoExample Title="Reversed" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5" PreventRenderForMcpClient>
-    <div>Adjust the label position of BitChoiceGroup's item to be reversed.</div>
+    <div>Moves the radio circle to the far end of each item, rendering it after the item content.</div>
     <br />
     <div class="example-content column">
         <BitChoiceGroup Label="Reversed" Items="basicItems" DefaultValue="@("A")" Reversed Horizontal />
@@ -61,7 +63,7 @@
 </DemoExample>
 
 <DemoExample Title="LabelTemplate" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
-    <div>Demonstrates how to customize the label of the BitChoiceGroup using a template.</div>
+    <div>Replaces the plain text label of the ChoiceGroup with fully custom content using the LabelTemplate.</div>
     <br />
     <div class="example-content">
         <BitChoiceGroup Items="basicItems" DefaultValue="@("A")">
@@ -75,7 +77,7 @@
 </DemoExample>
 
 <DemoExample Title="Item templates" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
-    <div>Illustrates how to customize the appearance of BitChoiceGroup options using item templates.</div>
+    <div>Customizes the item rendering at different levels: ItemPrefixTemplate prepends content to each item, ItemLabelTemplate replaces the content next to the radio circle, and ItemTemplate or the per-item Template takes over the whole item rendering.</div>
     <br />
     <div class="example-content">
         <BitChoiceGroup Label="ItemPrefixTemplate" Items="basicItems" DefaultValue="@string.Empty">
@@ -111,7 +113,7 @@
 </DemoExample>
 
 <DemoExample Title="Binding" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8" PreventRenderForMcpClient>
-    <div>Shows how to use one-way and two-way data binding with BitChoiceGroup.</div>
+    <div>Binds the selected value with one-way binding (Value), where only the model drives the ChoiceGroup, or two-way binding (@@bind-Value) that keeps the model and the ChoiceGroup in sync.</div>
     <br />
     <div class="example-content">
         <div>
@@ -129,14 +131,14 @@
 </DemoExample>
 
 <DemoExample Title="Validation" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
-    <div>Shows how to use data annotations for validating the selected value in BitChoiceGroup.</div>
+    <div>Integrates with EditForm and data annotations, marking the group as invalid and showing the validation message until a choice is made. The Required parameter adds the required asterisk to the group label.</div>
     <br />
     @if (string.IsNullOrEmpty(successMessage))
     {
         <EditForm Model="@validationModel" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit">
             <DataAnnotationsValidator />
 
-            <BitChoiceGroup Items="basicItems" @bind-Value="validationModel.Value" />
+            <BitChoiceGroup Label="Pick one" Required Items="basicItems" @bind-Value="validationModel.Value" />
             <ValidationMessage For="@(() => validationModel.Value)" />
 
             <br />
@@ -152,72 +154,71 @@
     <BitButton Variant="BitVariant.Outline" OnClick="() => { validationModel = new(); successMessage=string.Empty; }">Reset</BitButton>
 </DemoExample>
 
-<DemoExample Title="Size" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
-    <div>Varying sizes for BitChoiceGroup tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.</div>
-    <br /><br />
-    <div>Basic ChoiceGroup</div>
-    <div class="example-content column">
-        <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 />
+<DemoExample Title="Descriptions" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
+    <div>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.</div>
+    <br />
+    <div class="example-content">
+        <BitChoiceGroup Label="Backup frequency" Items="descriptionItems" DefaultValue="@("Daily")" />
+    </div>
+</DemoExample>
 
-        <BitChoiceGroup Size="BitSize.Large"
-                        Label="Large"
-                        Items="basicItems"
-                        DefaultValue="basicItems[1].Value" Horizontal />
+<DemoExample Title="ReadOnly" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
+    <div>Prevents changing the value using the ReadOnly parameter while keeping the normal (non-disabled) appearance; readonly items are also removed from the keyboard tab order.</div>
+    <br />
+    <div class="example-content">
+        <BitChoiceGroup Label="ReadOnly" ReadOnly Items="basicItems" @bind-Value="readOnlyValue" />
     </div>
-    <br /><br />
-    <div>ChoiceGroup with inline icon</div>
+</DemoExample>
+
+<DemoExample Title="Gap" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
+    <div>Customizes the gap between the items using any CSS length value, overriding the default spacing of the current size.</div>
+    <br />
     <div class="example-content column">
-        <BitChoiceGroup Size="BitSize.Small"
-                        Label="Small"
-                        Items="iconItems" 
-                        DefaultValue="@("Day")"
-                        Horizontal Inline />
+        <BitChoiceGroup Label="1rem gap" Gap="1rem" Items="basicItems" DefaultValue="@("A")" />
 
-        <BitChoiceGroup Size="BitSize.Medium"
-                        Label="Medium"
-                        Items="iconItems" 
-                        DefaultValue="@("Day")"
-                        Horizontal Inline />
+        <BitChoiceGroup Label="3rem gap (Horizontal)" Gap="3rem" Items="basicItems" DefaultValue="@("A")" Horizontal />
+    </div>
+</DemoExample>
 
-        <BitChoiceGroup Size="BitSize.Large"
-                        Label="Large"
-                        Items="iconItems" 
-                        DefaultValue="@("Day")"
-                        Horizontal Inline />
+<DemoExample Title="Prefix" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
+    <div>Adds plain text in front of each item using the per-item Prefix, rendered before the radio circle. For arbitrary prefix content, use the ItemPrefixTemplate shown in the Item templates section.</div>
+    <br />
+    <div class="example-content">
+        <BitChoiceGroup Label="Shipping method" Items="prefixItems" DefaultValue="@("Standard")" />
     </div>
-    <br /><br />
-    <div>ChoiceGroup with icon</div>
-    <div class="example-content column">
-        <BitChoiceGroup Size="BitSize.Small"
-                        Label="Small"
-                        Items="iconItems" 
-                        DefaultValue="@("Day")"
-                        Horizontal />
+</DemoExample>
 
-        <BitChoiceGroup Size="BitSize.Medium"
-                        Label="Medium"
-                        Items="iconItems" 
-                        DefaultValue="@("Day")"
-                        Horizontal />
+<DemoExample Title="Events" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
+    <div>Raises OnChange whenever the selected value changes, and OnClick on every click of an enabled item, including the already selected one.</div>
+    <br />
+    <div class="example-content column">
+        <BitChoiceGroup Label="Events" Items="basicItems" DefaultValue="@("A")"
+                        OnChange="(string? value) => changedValue = value"
+                        OnClick="(BitChoiceGroupItem<string> item) => clickedItem = item.Text" />
+        <div>Changed value: <b>@changedValue</b></div>
+        <div>Clicked item: <b>@clickedItem</b></div>
+    </div>
+</DemoExample>
 
-        <BitChoiceGroup Size="BitSize.Large"
-                        Label="Large"
-                        Items="iconItems" 
-                        DefaultValue="@("Day")"
-                        Horizontal />
+<DemoExample Title="Dynamic items" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
+    <div>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.</div>
+    <br />
+    <div class="example-content column">
+        <div>
+            <BitButton OnClick="AddDynamicItem">Add item</BitButton>
+            <BitButton OnClick="RemoveDynamicItem">Remove item</BitButton>
+            <BitButton OnClick="ReverseDynamicItems">Reverse items</BitButton>
+        </div>
+        <BitChoiceGroup Label="Dynamic items" Items="dynamicItems" @bind-Value="dynamicValue">
+            <ItemPrefixTemplate Context="item">
+                @(item.Index + 1).&nbsp;
+            </ItemPrefixTemplate>
+        </BitChoiceGroup>
     </div>
 </DemoExample>
 
-<DemoExample Title="Color" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
-        <div>Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.</div>
+<DemoExample Title="Color" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
+        <div>Colors the radio circle and the checked state of the items using the BitColor palette, with Primary being the default.</div>
         <br />
         <div>
             <div class="example-box">
@@ -364,8 +365,8 @@
         </div>
     </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
-    <div>Use icons from external libraries like FontAwesome or Bootstrap Icons with the Icon parameter.</div>
+<DemoExample Title="External Icons" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17">
+    <div>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.</div>
 
     <br />
     
@@ -383,8 +384,72 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Style & Class" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
-    <div>Explores styling and class customization for BitChoiceGroup, including component styles, custom classes, and detailed style items.</div>
+<DemoExample Title="Size" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18">
+    <div>Comes in Small, Medium (default), and Large sizes that scale the radio circle, text, icons, and item spacing together.</div>
+    <br /><br />
+    <div>Basic ChoiceGroup</div>
+    <div class="example-content column">
+        <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 />
+    </div>
+    <br /><br />
+    <div>ChoiceGroup with inline icon</div>
+    <div class="example-content column">
+        <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 />
+    </div>
+    <br /><br />
+    <div>ChoiceGroup with icon</div>
+    <div class="example-content column">
+        <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 />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Style & Class" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19">
+    <div>Customizes the appearance at every level: Style and Class on the root element, per-item styles and classes, and the Styles and Classes objects that target the internal parts of the component, including the checked state of the items.</div>
     <br /><br />
     <div>Component's Style & Class:</div>
     <br />
@@ -427,8 +492,8 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="RTL" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14" PreventRenderForMcpClient>
-    <div>Use BitChoiceGroup in right-to-left (RTL).</div>
+<DemoExample Title="RTL" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20" PreventRenderForMcpClient>
+    <div>Renders the ChoiceGroup in right-to-left mode; the layout is mirrored and the keyboard arrow keys follow the text direction.</div>
     <br />
     <div dir="rtl" class="example-content">
         <BitChoiceGroup Label="ساده" Items="rtlItems" DefaultValue="@("A")" Dir="BitDir.Rtl" />
@@ -472,4 +537,4 @@
             }
         };
     }
-}
\ No newline at end of file
+}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.cs
index c57d545b0a..5ac464b021 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.cs
@@ -4,6 +4,19 @@ public partial class _BitChoiceGroupItemDemo
 {
     private string oneWayValue = "A";
     private string twoWayValue = "A";
+    private string readOnlyValue = "A";
+
+    private string? changedValue;
+    private string? clickedItem;
+
+    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 string itemTemplateValue = "Day";
     private string itemTemplateValue2 = "Day";
@@ -95,6 +108,20 @@ public partial class _BitChoiceGroupItemDemo
         new() { Text = "Item D", Value = "D", Class = "custom-item" }
     ];
 
+    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>> 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<BitChoiceGroupItem<string>> itemLabelTemplates =
     [
         new() { Text = "Day", Value = "Day", IconName = BitIconName.CalendarDay },
@@ -118,6 +145,24 @@ public partial class _BitChoiceGroupItemDemo
     ];
 
 
+    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)];
+    }
+
     private void HandleValidSubmit()
     {
         successMessage = "Form Submitted Successfully!";
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs
index fd446cc780..72060beb2b 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs
@@ -363,7 +363,7 @@ protected override void OnInitialized()
 <EditForm Model=""@validationModel"" OnValidSubmit=""@HandleValidSubmit"" OnInvalidSubmit=""@HandleInvalidSubmit"">
     <DataAnnotationsValidator />
     
-    <BitChoiceGroup Items=""basicItems"" @bind-Value=""validationModel.Value"" />
+    <BitChoiceGroup Label=""Pick one"" Required Items=""basicItems"" @bind-Value=""validationModel.Value"" />
     <ValidationMessage For=""@(() => validationModel.Value)"" />
     
     <BitButton ButtonType=""BitButtonType.Submit"">Submit</BitButton>
@@ -389,73 +389,108 @@ private void HandleInvalidSubmit() { }
 ];";
 
     private readonly string example10RazorCode = @"
-<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 Label=""Backup frequency"" Items=""descriptionItems"" DefaultValue=""@(""Daily"")"" />";
+    private readonly string example10CsharpCode = @"
+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."" }
+];";
 
-<BitChoiceGroup Size=""BitSize.Large""
-                Label=""Large""
-                Items=""basicItems""
-                DefaultValue=""basicItems[1].Value"" Horizontal />
+    private readonly string example11RazorCode = @"
+<BitChoiceGroup Label=""ReadOnly"" ReadOnly Items=""basicItems"" @bind-Value=""readOnlyValue"" />";
+    private readonly string example11CsharpCode = @"
+private string readOnlyValue = ""A"";
 
-<BitChoiceGroup Size=""BitSize.Small""
-                Label=""Small""
-                Items=""iconItems"" 
-                DefaultValue=""@(""Day"")""
-                Horizontal Inline />
+private readonly List<BitChoiceGroupItem<string>> basicItems =
+[
+    new() { Text = ""Item A"", Value = ""A"" },
+    new() { Text = ""Item B"", Value = ""B"" },
+    new() { Text = ""Item C"", Value = ""C"" },
+    new() { Text = ""Item D"", Value = ""D"" }
+];";
 
-<BitChoiceGroup Size=""BitSize.Medium""
-                Label=""Medium""
-                Items=""iconItems"" 
-                DefaultValue=""@(""Day"")""
-                Horizontal Inline />
+    private readonly string example12RazorCode = @"
+<BitChoiceGroup Label=""1rem gap"" Gap=""1rem"" Items=""basicItems"" DefaultValue=""@(""A"")"" />
 
-<BitChoiceGroup Size=""BitSize.Large""
-                Label=""Large""
-                Items=""iconItems"" 
-                DefaultValue=""@(""Day"")""
-                Horizontal Inline />
+<BitChoiceGroup Label=""3rem gap (Horizontal)"" Gap=""3rem"" Items=""basicItems"" DefaultValue=""@(""A"")"" Horizontal />";
+    private readonly string example12CsharpCode = @"
+private readonly List<BitChoiceGroupItem<string>> basicItems =
+[
+    new() { Text = ""Item A"", Value = ""A"" },
+    new() { Text = ""Item B"", Value = ""B"" },
+    new() { Text = ""Item C"", Value = ""C"" },
+    new() { Text = ""Item D"", Value = ""D"" }
+];";
 
-<BitChoiceGroup Size=""BitSize.Small""
-                Label=""Small""
-                Items=""iconItems"" 
-                DefaultValue=""@(""Day"")""
-                Horizontal />
+    private readonly string example13RazorCode = @"
+<BitChoiceGroup Label=""Shipping method"" Items=""prefixItems"" DefaultValue=""@(""Standard"")"" />";
+    private readonly string example13CsharpCode = @"
+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 — "" }
+];";
 
-<BitChoiceGroup Size=""BitSize.Medium""
-                Label=""Medium""
-                Items=""iconItems"" 
-                DefaultValue=""@(""Day"")""
-                Horizontal />
+    private readonly string example14RazorCode = @"
+<BitChoiceGroup Label=""Events"" Items=""basicItems"" DefaultValue=""@(""A"")""
+                OnChange=""(string? value) => changedValue = value""
+                OnClick=""(BitChoiceGroupItem<string> item) => clickedItem = item.Text"" />
+<div>Changed value: <b>@changedValue</b></div>
+<div>Clicked item: <b>@clickedItem</b></div>";
+    private readonly string example14CsharpCode = @"
+private string? changedValue;
+private string? clickedItem;
 
-<BitChoiceGroup Size=""BitSize.Large""
-                Label=""Large""
-                Items=""iconItems"" 
-                DefaultValue=""@(""Day"")""
-                Horizontal />";
-    private readonly string example10CsharpCode = @"
 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 =
+    private readonly string example15RazorCode = @"
+<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>";
+    private readonly string example15CsharpCode = @"
+private int dynamicCounter = 3;
+private string? dynamicValue = ""1"";
+private List<BitChoiceGroupItem<string>> dynamicItems =
 [
-    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 }
-];";
+    new() { Text = ""Item 1"", Value = ""1"" },
+    new() { Text = ""Item 2"", Value = ""2"" },
+    new() { Text = ""Item 3"", Value = ""3"" }
+];
 
-    private readonly string example11RazorCode = @"
+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)];
+}";
+
+    private readonly string example16RazorCode = @"
 <BitChoiceGroup Color=""BitColor.Primary"" 
                 Label=""Primary"" 
                 Horizontal
@@ -557,7 +592,7 @@ Horizontal Inline />
                 Horizontal
                 Items=""basicItems""
                 DefaultValue=""basicItems[1].Value"" />";
-    private readonly string example11CsharpCode = @"
+    private readonly string example16CsharpCode = @"
 private readonly List<BitChoiceGroupItem<string>> basicItems =
 [
     new() { Text = ""Item A"", Value = ""A"" },
@@ -566,7 +601,7 @@ Horizontal Inline />
     new() { Text = ""Item D"", Value = ""D"" }
 ];";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example17RazorCode = @"
 <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/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
 
@@ -575,7 +610,7 @@ Horizontal Inline />
 <BitChoiceGroup Label=""External Icons (Inline)"" Items=""externalIconItems"" DefaultValue=""@(""Day"")"" Inline />
 
 <BitChoiceGroup Label=""External Icons (Horizontal)"" Items=""externalIconItems"" DefaultValue=""@(""Day"")"" Horizontal />";
-    private readonly string example12CsharpCode = @"
+    private readonly string example17CsharpCode = @"
 private readonly List<BitChoiceGroupItem<string>> externalIconItems =
 [
     new() { Text = ""Day"", Value = ""Day"", Icon = BitIconInfo.Fa(""solid sun"") },
@@ -583,7 +618,74 @@ Horizontal Inline />
     new() { Text = ""Month"", Value = ""Month"", Icon = BitIconInfo.Bi(""calendar-month"") }
 ];";
 
-    private readonly string example13RazorCode = @"
+    private readonly string example18RazorCode = @"
+<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 />";
+    private readonly string example18CsharpCode = @"
+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 }
+];";
+
+    private readonly string example19RazorCode = @"
 <style>
     .custom-class {
         color: dodgerblue;
@@ -658,7 +760,7 @@ Horizontal Inline />
                                    ItemText = ""custom-text"",
                                    ItemChecked = ""custom-checked"",
                                    ItemRadioButton = ""custom-radio-btn"" })"" />";
-    private readonly string example13CsharpCode = @"
+    private readonly string example19CsharpCode = @"
 private readonly List<BitChoiceGroupItem<string>> basicItems =
 [
     new() { Text = ""Item A"", Value = ""A"" },
@@ -675,10 +777,10 @@ Horizontal Inline />
     new() { Text = ""Item D"", Value = ""D"", Class = ""custom-item"" }
 ];";
 
-    private readonly string example14RazorCode = @"
+    private readonly string example20RazorCode = @"
 <BitChoiceGroup Label=""ساده"" Items=""rtlItems"" DefaultValue=""@(""A"")"" Dir=""BitDir.Rtl"" />
 <BitChoiceGroup Label=""غیرفعال"" Items=""rtlItems"" IsEnabled=""false"" DefaultValue=""@(""A"")"" Dir=""BitDir.Rtl"" />";
-    private readonly string example14CsharpCode = @"
+    private readonly string example20CsharpCode = @"
 private readonly List<BitChoiceGroupItem<string>> rtlItems = new()
 {
     new() { Text = ""بخش آ"", Value = ""A"" },
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor
index 94883d7e11..d667cfea5e 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor
@@ -1,4 +1,6 @@
 <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
+    <div>The basic ChoiceGroup lets people select a single option from a set of mutually exclusive choices. It is fully keyboard accessible: Tab focuses the checked option and the arrow keys move the selection. The NoCircle mode removes the radio circle of each option.</div>
+    <br />
     <div class="example-content">
         <BitChoiceGroup Label="Basic Options" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string">
             <BitChoiceGroupOption Text="Option A" Value="@("A")" />
@@ -17,7 +19,7 @@
 </DemoExample>
 
 <DemoExample Title="Disabled" RazorCode="@example2RazorCode" Id="example2" PreventRenderForMcpClient>
-    <div>Illustrates how to disable the entire BitChoiceGroup and individual items.</div>
+    <div>Disables the whole ChoiceGroup or its individual items. Disabled items cannot be selected and are skipped by the keyboard navigation.</div>
     <br />
     <div class="example-content">
         <BitChoiceGroup Label="Disabled ChoiceGroup"
@@ -42,7 +44,7 @@
 </DemoExample>
 
 <DemoExample Title="Images and Icons" RazorCode="@example3RazorCode" Id="example3" PreventRenderForMcpClient>
-    <div>Showcases BitChoiceGroup with image and icon items.</div>
+    <div>Displays items as image or icon tiles. An image item can provide a different image for its checked state, and the Inline mode renders the image or icon on the same line as the item text.</div>
     <br /><br />
     <div class="example-content">
         <BitChoiceGroup Label="Image Options"
@@ -103,7 +105,7 @@
 </DemoExample>
 
 <DemoExample Title="Horizontal" RazorCode="@example4RazorCode" Id="example4" PreventRenderForMcpClient>
-    <div>Displays the BitChoiceGroup component in a horizontal layout, demonstrating various configurations.</div>
+    <div>Lays out the items horizontally instead of the default vertical stack, wrapping onto new lines when the available width runs out.</div>
     <br />
     <div class="example-content column">
         <BitChoiceGroup Label="Basic" TItem="BitChoiceGroupOption<string>" TValue="string" DefaultValue="@("A")" Horizontal>
@@ -144,7 +146,7 @@
 </DemoExample>
 
 <DemoExample Title="Reversed" RazorCode="@example5RazorCode" Id="example5" PreventRenderForMcpClient>
-    <div>Adjust the label position of BitChoiceGroup's item to be reversed.</div>
+    <div>Moves the radio circle to the far end of each item, rendering it after the item content.</div>
     <br />
     <div class="example-content column">
          <BitChoiceGroup Label="Reversed" TItem="BitChoiceGroupOption<string>" TValue="string" DefaultValue="@("A")" Reversed Horizontal>
@@ -157,7 +159,7 @@
 </DemoExample>
 
 <DemoExample Title="LabelTemplate" RazorCode="@example6RazorCode" Id="example6" PreventRenderForMcpClient>
-    <div>Demonstrates how to customize the label of the BitChoiceGroup using a template.</div>
+    <div>Replaces the plain text label of the ChoiceGroup with fully custom content using the LabelTemplate.</div>
     <br />
     <BitChoiceGroup TItem="BitChoiceGroupOption<string>" TValue="string" DefaultValue="@("A")">
         <LabelTemplate>
@@ -175,7 +177,7 @@
 </DemoExample>
 
 <DemoExample Title="Item templates" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
-    <div>Illustrates how to customize the appearance of BitChoiceGroup options using item templates.</div>
+    <div>Customizes the item rendering at different levels: ItemPrefixTemplate prepends content to each item, ItemLabelTemplate replaces the content next to the radio circle, and ItemTemplate or the per-item Template takes over the whole item rendering.</div>
     <br />
     <div class="example-content">
         <BitChoiceGroup Label="ItemPrefixTemplate" TItem="BitChoiceGroupOption<string>" TValue="string">
@@ -253,7 +255,7 @@
 </DemoExample>
 
 <DemoExample Title="Binding" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
-    <div>Shows how to use one-way and two-way data binding with BitChoiceGroup.</div>
+    <div>Binds the selected value with one-way binding (Value), where only the model drives the ChoiceGroup, or two-way binding (@@bind-Value) that keeps the model and the ChoiceGroup in sync.</div>
     <br />
     <div class="example-content">
         <div>
@@ -282,14 +284,14 @@
 </DemoExample>
 
 <DemoExample Title="Validation" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9" PreventRenderForMcpClient>
-    <div>Shows how to use data annotations for validating the selected value in BitChoiceGroup.</div>
+    <div>Integrates with EditForm and data annotations, marking the group as invalid and showing the validation message until a choice is made. The Required parameter adds the required asterisk to the group label.</div>
     <br />
     @if (string.IsNullOrEmpty(successMessage))
     {
         <EditForm Model="@validationModel" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit">
             <DataAnnotationsValidator />
 
-            <BitChoiceGroup TItem="BitChoiceGroupOption<string>" TValue="string" @bind-Value="validationModel.Value">
+            <BitChoiceGroup Label="Pick one" Required TItem="BitChoiceGroupOption<string>" TValue="string" @bind-Value="validationModel.Value">
                 <BitChoiceGroupOption Text="Option A" Value="@("A")" />
                 <BitChoiceGroupOption Text="Option B" Value="@("B")" />
                 <BitChoiceGroupOption Text="Option C" Value="@("C")" />
@@ -310,102 +312,105 @@
     <BitButton Variant="BitVariant.Outline" OnClick="() => { validationModel = new(); successMessage=string.Empty; }">Reset</BitButton>
 </DemoExample>
 
-<DemoExample Title="Size" RazorCode="@example10RazorCode" Id="example10" PreventRenderForMcpClient>
-    <div>Varying sizes for BitChoiceGroup tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.</div>
-    <br /><br />
-    <div>Basic ChoiceGroup</div>
-    <div class="example-content column">
-        <BitChoiceGroup Size="BitSize.Small" Label="Small" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
+<DemoExample Title="Descriptions" RazorCode="@example10RazorCode" Id="example10">
+    <div>Adds secondary text under each option using the Description parameter. The description is automatically linked to its input via aria-describedby, so screen readers announce it along with the option label.</div>
+    <br />
+    <div class="example-content">
+        <BitChoiceGroup Label="Backup frequency" DefaultValue="@("Daily")" TItem="BitChoiceGroupOption<string>" TValue="string">
+            <BitChoiceGroupOption Text="Daily" Value="@("Daily")" Description="Backs up every night at 2 AM." />
+            <BitChoiceGroupOption Text="Weekly" Value="@("Weekly")" Description="Backs up every Sunday at 2 AM." />
+            <BitChoiceGroupOption Text="Monthly" Value="@("Monthly")" Description="Backs up on the first day of each month." />
+        </BitChoiceGroup>
+    </div>
+</DemoExample>
+
+<DemoExample Title="ReadOnly" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
+    <div>Prevents changing the value using the ReadOnly parameter while keeping the normal (non-disabled) appearance; readonly items are also removed from the keyboard tab order.</div>
+    <br />
+    <div class="example-content">
+        <BitChoiceGroup Label="ReadOnly" ReadOnly @bind-Value="readOnlyValue" TItem="BitChoiceGroupOption<string>" TValue="string">
             <BitChoiceGroupOption Text="Option A" Value="@("A")" />
             <BitChoiceGroupOption Text="Option B" Value="@("B")" />
             <BitChoiceGroupOption Text="Option C" Value="@("C")" />
             <BitChoiceGroupOption Text="Option D" Value="@("D")" />
         </BitChoiceGroup>
+    </div>
+</DemoExample>
 
-        <BitChoiceGroup Size="BitSize.Medium" Label="Medium" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
+<DemoExample Title="Gap" RazorCode="@example12RazorCode" Id="example12">
+    <div>Customizes the gap between the items using any CSS length value, overriding the default spacing of the current size.</div>
+    <br />
+    <div class="example-content column">
+        <BitChoiceGroup Label="1rem gap" Gap="1rem" DefaultValue="@("A")" TItem="BitChoiceGroupOption<string>" TValue="string">
             <BitChoiceGroupOption Text="Option A" Value="@("A")" />
             <BitChoiceGroupOption Text="Option B" Value="@("B")" />
             <BitChoiceGroupOption Text="Option C" Value="@("C")" />
             <BitChoiceGroupOption Text="Option D" Value="@("D")" />
         </BitChoiceGroup>
 
-        <BitChoiceGroup Size="BitSize.Large" Label="Large" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
+        <BitChoiceGroup Label="3rem gap (Horizontal)" Gap="3rem" DefaultValue="@("A")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
             <BitChoiceGroupOption Text="Option A" Value="@("A")" />
             <BitChoiceGroupOption Text="Option B" Value="@("B")" />
             <BitChoiceGroupOption Text="Option C" Value="@("C")" />
             <BitChoiceGroupOption Text="Option D" Value="@("D")" />
         </BitChoiceGroup>
     </div>
-    <br /><br />
-    <div>ChoiceGroup with inline icon</div>
-    <div class="example-content column">
-        <BitChoiceGroup Size="BitSize.Small" 
-                        Label="Small" 
-                        DefaultValue="@("Day")"
-                        TItem="BitChoiceGroupOption<string>" 
-                        TValue="string" Horizontal Inline>
-            <BitChoiceGroupOption Text="Day" Value="@("Day")" IconName="@BitIconName.CalendarDay" />
-            <BitChoiceGroupOption Text="Week" Value="@("Week")" IconName="@BitIconName.CalendarWeek" />
-            <BitChoiceGroupOption Text="Month" Value="@("Month")" IconName="@BitIconName.Calendar" IsEnabled="false" />
-        </BitChoiceGroup>
-
-        <BitChoiceGroup Size="BitSize.Medium"
-                        Label="Medium"
-                        DefaultValue="@("Day")"
-                        TItem="BitChoiceGroupOption<string>" 
-                        TValue="string" Horizontal Inline>
-            <BitChoiceGroupOption Text="Day" Value="@("Day")" IconName="@BitIconName.CalendarDay" />
-            <BitChoiceGroupOption Text="Week" Value="@("Week")" IconName="@BitIconName.CalendarWeek" />
-            <BitChoiceGroupOption Text="Month" Value="@("Month")" IconName="@BitIconName.Calendar" IsEnabled="false" />
-        </BitChoiceGroup>
+</DemoExample>
 
-        <BitChoiceGroup Size="BitSize.Large"
-                        Label="Large"
-                        DefaultValue="@("Day")"
-                        TItem="BitChoiceGroupOption<string>" 
-                        TValue="string" Horizontal Inline>
-            <BitChoiceGroupOption Text="Day" Value="@("Day")" IconName="@BitIconName.CalendarDay" />
-            <BitChoiceGroupOption Text="Week" Value="@("Week")" IconName="@BitIconName.CalendarWeek" />
-            <BitChoiceGroupOption Text="Month" Value="@("Month")" IconName="@BitIconName.Calendar" IsEnabled="false" />
+<DemoExample Title="Prefix" RazorCode="@example13RazorCode" Id="example13">
+    <div>Adds plain text in front of each option using the Prefix parameter, rendered before the radio circle. For arbitrary prefix content, use the ItemPrefixTemplate shown in the Item templates section.</div>
+    <br />
+    <div class="example-content">
+        <BitChoiceGroup Label="Shipping method" DefaultValue="@("Standard")" TItem="BitChoiceGroupOption<string>" TValue="string">
+            <BitChoiceGroupOption Text="Standard" Value="@("Standard")" Prefix="$0 — " />
+            <BitChoiceGroupOption Text="Express" Value="@("Express")" Prefix="$10 — " />
+            <BitChoiceGroupOption Text="Overnight" Value="@("Overnight")" Prefix="$25 — " />
         </BitChoiceGroup>
     </div>
-    <br /><br />
-    <div>ChoiceGroup with icon</div>
-    <div class="example-content column">
-        <BitChoiceGroup Size="BitSize.Small"
-                        Label="Small"
-                        DefaultValue="@("Day")"
-                        TItem="BitChoiceGroupOption<string>" 
-                        TValue="string" Horizontal>
-            <BitChoiceGroupOption Text="Day" Value="@("Day")" IconName="@BitIconName.CalendarDay" />
-            <BitChoiceGroupOption Text="Week" Value="@("Week")" IconName="@BitIconName.CalendarWeek" />
-            <BitChoiceGroupOption Text="Month" Value="@("Month")" IconName="@BitIconName.Calendar" IsEnabled="false" />
-        </BitChoiceGroup>
+</DemoExample>
 
-        <BitChoiceGroup Size="BitSize.Medium"
-                        Label="Medium"
-                        DefaultValue="@("Day")"
-                        TItem="BitChoiceGroupOption<string>" 
-                        TValue="string" Horizontal>
-            <BitChoiceGroupOption Text="Day" Value="@("Day")" IconName="@BitIconName.CalendarDay" />
-            <BitChoiceGroupOption Text="Week" Value="@("Week")" IconName="@BitIconName.CalendarWeek" />
-            <BitChoiceGroupOption Text="Month" Value="@("Month")" IconName="@BitIconName.Calendar" IsEnabled="false" />
+<DemoExample Title="Events" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
+    <div>Raises OnChange whenever the selected value changes, and OnClick on every click of an enabled option, including the already selected one.</div>
+    <br />
+    <div class="example-content column">
+        <BitChoiceGroup Label="Events" DefaultValue="@("A")" TItem="BitChoiceGroupOption<string>" TValue="string"
+                        OnChange="(string? value) => changedValue = value"
+                        OnClick="(BitChoiceGroupOption<string> option) => clickedOption = option.Text">
+            <BitChoiceGroupOption Text="Option A" Value="@("A")" />
+            <BitChoiceGroupOption Text="Option B" Value="@("B")" />
+            <BitChoiceGroupOption Text="Option C" Value="@("C")" />
+            <BitChoiceGroupOption Text="Option D" Value="@("D")" />
         </BitChoiceGroup>
+        <div>Changed value: <b>@changedValue</b></div>
+        <div>Clicked option: <b>@clickedOption</b></div>
+    </div>
+</DemoExample>
 
-        <BitChoiceGroup Size="BitSize.Large"
-                        Label="Large"
-                        DefaultValue="@("Day")"
-                        TItem="BitChoiceGroupOption<string>" 
-                        TValue="string" Horizontal>
-            <BitChoiceGroupOption Text="Day" Value="@("Day")" IconName="@BitIconName.CalendarDay" />
-            <BitChoiceGroupOption Text="Week" Value="@("Week")" IconName="@BitIconName.CalendarWeek" />
-            <BitChoiceGroupOption Text="Month" Value="@("Month")" IconName="@BitIconName.Calendar" IsEnabled="false" />
+<DemoExample Title="Dynamic items" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
+    <div>Handles dynamic option collections: an option rendered after the first render registers itself at the end of the list, no matter where in the markup it is located, so its assigned Index (shown here as a number prefix) would be out of order; AutoReorderOptions reads the DOM order after each render to keep the indexes in sync with the markup, preserving the selected value as long as its option survives the change.</div>
+    <br />
+    <div class="example-content column">
+        <div>
+            <BitButton OnClick="AddDynamicOption">Add item</BitButton>
+            <BitButton OnClick="RemoveDynamicOption">Remove item</BitButton>
+            <BitButton OnClick="ReverseDynamicOptions">Reverse items</BitButton>
+        </div>
+        <BitChoiceGroup Label="Dynamic options" AutoReorderOptions @bind-Value="dynamicValue" TItem="BitChoiceGroupOption<string>" TValue="string">
+            <ItemPrefixTemplate Context="option">
+                @(option.Index + 1).&nbsp;
+            </ItemPrefixTemplate>
+            <Options>
+                @foreach (var (text, value) in dynamicOptions)
+                {
+                    <BitChoiceGroupOption @key="value" Text="@text" Value="@value" />
+                }
+            </Options>
         </BitChoiceGroup>
     </div>
 </DemoExample>
 
-<DemoExample Title="Color" RazorCode="@example11RazorCode" Id="example11" PreventRenderForMcpClient>
-        <div>Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.</div>
+<DemoExample Title="Color" RazorCode="@example16RazorCode" Id="example16" PreventRenderForMcpClient>
+        <div>Colors the radio circle and the checked state of the items using the BitColor palette, with Primary being the default.</div>
         <br />
         <div>
             <div class="example-box">
@@ -569,8 +574,8 @@
         </div>
     </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example12RazorCode" Id="example12" PreventRenderForMcpClient>
-    <div>Use icons from external libraries like FontAwesome or Bootstrap Icons with the Icon parameter.</div>
+<DemoExample Title="External Icons" RazorCode="@example17RazorCode" Id="example17" PreventRenderForMcpClient>
+    <div>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.</div>
     
     <br />
 
@@ -600,8 +605,102 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Style & Class" RazorCode="@example13RazorCode" Id="example13" PreventRenderForMcpClient>
-    <div>Explores styling and class customization for BitChoiceGroup, including component styles, custom classes, and detailed style items.</div>
+<DemoExample Title="Size" RazorCode="@example18RazorCode" Id="example18" PreventRenderForMcpClient>
+    <div>Comes in Small, Medium (default), and Large sizes that scale the radio circle, text, icons, and item spacing together.</div>
+    <br /><br />
+    <div>Basic ChoiceGroup</div>
+    <div class="example-content column">
+        <BitChoiceGroup Size="BitSize.Small" Label="Small" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
+            <BitChoiceGroupOption Text="Option A" Value="@("A")" />
+            <BitChoiceGroupOption Text="Option B" Value="@("B")" />
+            <BitChoiceGroupOption Text="Option C" Value="@("C")" />
+            <BitChoiceGroupOption Text="Option D" Value="@("D")" />
+        </BitChoiceGroup>
+
+        <BitChoiceGroup Size="BitSize.Medium" Label="Medium" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
+            <BitChoiceGroupOption Text="Option A" Value="@("A")" />
+            <BitChoiceGroupOption Text="Option B" Value="@("B")" />
+            <BitChoiceGroupOption Text="Option C" Value="@("C")" />
+            <BitChoiceGroupOption Text="Option D" Value="@("D")" />
+        </BitChoiceGroup>
+
+        <BitChoiceGroup Size="BitSize.Large" Label="Large" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>
+            <BitChoiceGroupOption Text="Option A" Value="@("A")" />
+            <BitChoiceGroupOption Text="Option B" Value="@("B")" />
+            <BitChoiceGroupOption Text="Option C" Value="@("C")" />
+            <BitChoiceGroupOption Text="Option D" Value="@("D")" />
+        </BitChoiceGroup>
+    </div>
+    <br /><br />
+    <div>ChoiceGroup with inline icon</div>
+    <div class="example-content column">
+        <BitChoiceGroup Size="BitSize.Small" 
+                        Label="Small" 
+                        DefaultValue="@("Day")"
+                        TItem="BitChoiceGroupOption<string>" 
+                        TValue="string" Horizontal Inline>
+            <BitChoiceGroupOption Text="Day" Value="@("Day")" IconName="@BitIconName.CalendarDay" />
+            <BitChoiceGroupOption Text="Week" Value="@("Week")" IconName="@BitIconName.CalendarWeek" />
+            <BitChoiceGroupOption Text="Month" Value="@("Month")" IconName="@BitIconName.Calendar" IsEnabled="false" />
+        </BitChoiceGroup>
+
+        <BitChoiceGroup Size="BitSize.Medium"
+                        Label="Medium"
+                        DefaultValue="@("Day")"
+                        TItem="BitChoiceGroupOption<string>" 
+                        TValue="string" Horizontal Inline>
+            <BitChoiceGroupOption Text="Day" Value="@("Day")" IconName="@BitIconName.CalendarDay" />
+            <BitChoiceGroupOption Text="Week" Value="@("Week")" IconName="@BitIconName.CalendarWeek" />
+            <BitChoiceGroupOption Text="Month" Value="@("Month")" IconName="@BitIconName.Calendar" IsEnabled="false" />
+        </BitChoiceGroup>
+
+        <BitChoiceGroup Size="BitSize.Large"
+                        Label="Large"
+                        DefaultValue="@("Day")"
+                        TItem="BitChoiceGroupOption<string>" 
+                        TValue="string" Horizontal Inline>
+            <BitChoiceGroupOption Text="Day" Value="@("Day")" IconName="@BitIconName.CalendarDay" />
+            <BitChoiceGroupOption Text="Week" Value="@("Week")" IconName="@BitIconName.CalendarWeek" />
+            <BitChoiceGroupOption Text="Month" Value="@("Month")" IconName="@BitIconName.Calendar" IsEnabled="false" />
+        </BitChoiceGroup>
+    </div>
+    <br /><br />
+    <div>ChoiceGroup with icon</div>
+    <div class="example-content column">
+        <BitChoiceGroup Size="BitSize.Small"
+                        Label="Small"
+                        DefaultValue="@("Day")"
+                        TItem="BitChoiceGroupOption<string>" 
+                        TValue="string" Horizontal>
+            <BitChoiceGroupOption Text="Day" Value="@("Day")" IconName="@BitIconName.CalendarDay" />
+            <BitChoiceGroupOption Text="Week" Value="@("Week")" IconName="@BitIconName.CalendarWeek" />
+            <BitChoiceGroupOption Text="Month" Value="@("Month")" IconName="@BitIconName.Calendar" IsEnabled="false" />
+        </BitChoiceGroup>
+
+        <BitChoiceGroup Size="BitSize.Medium"
+                        Label="Medium"
+                        DefaultValue="@("Day")"
+                        TItem="BitChoiceGroupOption<string>" 
+                        TValue="string" Horizontal>
+            <BitChoiceGroupOption Text="Day" Value="@("Day")" IconName="@BitIconName.CalendarDay" />
+            <BitChoiceGroupOption Text="Week" Value="@("Week")" IconName="@BitIconName.CalendarWeek" />
+            <BitChoiceGroupOption Text="Month" Value="@("Month")" IconName="@BitIconName.Calendar" IsEnabled="false" />
+        </BitChoiceGroup>
+
+        <BitChoiceGroup Size="BitSize.Large"
+                        Label="Large"
+                        DefaultValue="@("Day")"
+                        TItem="BitChoiceGroupOption<string>" 
+                        TValue="string" Horizontal>
+            <BitChoiceGroupOption Text="Day" Value="@("Day")" IconName="@BitIconName.CalendarDay" />
+            <BitChoiceGroupOption Text="Week" Value="@("Week")" IconName="@BitIconName.CalendarWeek" />
+            <BitChoiceGroupOption Text="Month" Value="@("Month")" IconName="@BitIconName.Calendar" IsEnabled="false" />
+        </BitChoiceGroup>
+    </div>
+</DemoExample>
+
+<DemoExample Title="Style & Class" RazorCode="@example19RazorCode" Id="example19" PreventRenderForMcpClient>
+    <div>Customizes the appearance at every level: Style and Class on the root element, per-item styles and classes, and the Styles and Classes objects that target the internal parts of the component, including the checked state of the items.</div>
     <br /><br />
     <div>Component's Style & Class:</div>
     <br />
@@ -665,8 +764,8 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="RTL" RazorCode="@example14RazorCode" Id="example14" PreventRenderForMcpClient>
-    <div>Use BitChoiceGroup in right-to-left (RTL).</div>
+<DemoExample Title="RTL" RazorCode="@example20RazorCode" Id="example20" PreventRenderForMcpClient>
+    <div>Renders the ChoiceGroup in right-to-left mode; the layout is mirrored and the keyboard arrow keys follow the text direction.</div>
     <br />
     <div dir="rtl" class="example-content">
         <BitChoiceGroup Label="ساده" TItem="BitChoiceGroupOption<string>" TValue="string" DefaultValue="@("A")" Dir="BitDir.Rtl">
@@ -683,4 +782,4 @@
             <BitChoiceGroupOption Text="گزینه ت" Value="@("D")" />
         </BitChoiceGroup>
     </div>
-</DemoExample>
\ No newline at end of file
+</DemoExample>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.cs
index dbc5527344..2c31680413 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.cs
@@ -4,6 +4,19 @@ public partial class _BitChoiceGroupOptionDemo
 {
     private string oneWayValue = "A";
     private string twoWayValue = "A";
+    private string readOnlyValue = "A";
+
+    private string? changedValue;
+    private string? clickedOption;
+
+    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 string itemTemplateValue = "Day";
     private string itemTemplateValue2 = "Day";
     private string itemLabelTemplateValue = "Day";
@@ -11,6 +24,24 @@ public partial class _BitChoiceGroupOptionDemo
     public string? successMessage;
 
 
+    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)];
+    }
+
     private void HandleValidSubmit()
     {
         successMessage = "Form Submitted Successfully!";
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs
index a4ae96f13c..413a803f0d 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs
@@ -301,7 +301,7 @@ public partial class _BitChoiceGroupOptionDemo
 <EditForm Model=""@validationModel"" OnValidSubmit=""@HandleValidSubmit"" OnInvalidSubmit=""@HandleInvalidSubmit"">
     <DataAnnotationsValidator />
     
-    <BitChoiceGroup TItem=""BitChoiceGroupOption<string>"" TValue=""string"" @bind-Value=""validationModel.Value"">
+    <BitChoiceGroup Label=""Pick one"" Required TItem=""BitChoiceGroupOption<string>"" TValue=""string"" @bind-Value=""validationModel.Value"">
         <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
         <BitChoiceGroupOption Text=""Option B"" Value=""@(""B"")"" />
         <BitChoiceGroupOption Text=""Option C"" Value=""@(""C"")"" />
@@ -324,88 +324,104 @@ private void HandleValidSubmit() { }
 private void HandleInvalidSubmit() { }";
 
     private readonly string example10RazorCode = @"
-<BitChoiceGroup Size=""BitSize.Small"" Label=""Small"" DefaultValue=""@(""B"")"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"" Horizontal>
+<BitChoiceGroup Label=""Backup frequency"" DefaultValue=""@(""Daily"")"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"">
+    <BitChoiceGroupOption Text=""Daily"" Value=""@(""Daily"")"" Description=""Backs up every night at 2 AM."" />
+    <BitChoiceGroupOption Text=""Weekly"" Value=""@(""Weekly"")"" Description=""Backs up every Sunday at 2 AM."" />
+    <BitChoiceGroupOption Text=""Monthly"" Value=""@(""Monthly"")"" Description=""Backs up on the first day of each month."" />
+</BitChoiceGroup>";
+
+    private readonly string example11RazorCode = @"
+<BitChoiceGroup Label=""ReadOnly"" ReadOnly @bind-Value=""readOnlyValue"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"">
     <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
     <BitChoiceGroupOption Text=""Option B"" Value=""@(""B"")"" />
     <BitChoiceGroupOption Text=""Option C"" Value=""@(""C"")"" />
     <BitChoiceGroupOption Text=""Option D"" Value=""@(""D"")"" />
-</BitChoiceGroup>
+</BitChoiceGroup>";
+    private readonly string example11CsharpCode = @"
+private string readOnlyValue = ""A"";";
 
-<BitChoiceGroup Size=""BitSize.Medium"" Label=""Medium"" DefaultValue=""@(""B"")"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"" Horizontal>
+    private readonly string example12RazorCode = @"
+<BitChoiceGroup Label=""1rem gap"" Gap=""1rem"" DefaultValue=""@(""A"")"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"">
     <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
     <BitChoiceGroupOption Text=""Option B"" Value=""@(""B"")"" />
     <BitChoiceGroupOption Text=""Option C"" Value=""@(""C"")"" />
     <BitChoiceGroupOption Text=""Option D"" Value=""@(""D"")"" />
 </BitChoiceGroup>
 
-<BitChoiceGroup Size=""BitSize.Large"" Label=""Large"" DefaultValue=""@(""B"")"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"" Horizontal>
+<BitChoiceGroup Label=""3rem gap (Horizontal)"" Gap=""3rem"" DefaultValue=""@(""A"")"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"" Horizontal>
     <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
     <BitChoiceGroupOption Text=""Option B"" Value=""@(""B"")"" />
     <BitChoiceGroupOption Text=""Option C"" Value=""@(""C"")"" />
     <BitChoiceGroupOption Text=""Option D"" Value=""@(""D"")"" />
-</BitChoiceGroup>
+</BitChoiceGroup>";
 
-<BitChoiceGroup Size=""BitSize.Small"" 
-                Label=""Small"" 
-                DefaultValue=""@(""Day"")""
-                TItem=""BitChoiceGroupOption<string>"" 
-                TValue=""string"" Horizontal Inline>
-    <BitChoiceGroupOption Text=""Day"" Value=""@(""Day"")"" IconName=""@BitIconName.CalendarDay"" />
-    <BitChoiceGroupOption Text=""Week"" Value=""@(""Week"")"" IconName=""@BitIconName.CalendarWeek"" />
-    <BitChoiceGroupOption Text=""Month"" Value=""@(""Month"")"" IconName=""@BitIconName.Calendar"" IsEnabled=""false"" />
-</BitChoiceGroup>
+    private readonly string example13RazorCode = @"
+<BitChoiceGroup Label=""Shipping method"" DefaultValue=""@(""Standard"")"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"">
+    <BitChoiceGroupOption Text=""Standard"" Value=""@(""Standard"")"" Prefix=""$0 — "" />
+    <BitChoiceGroupOption Text=""Express"" Value=""@(""Express"")"" Prefix=""$10 — "" />
+    <BitChoiceGroupOption Text=""Overnight"" Value=""@(""Overnight"")"" Prefix=""$25 — "" />
+</BitChoiceGroup>";
 
-<BitChoiceGroup Size=""BitSize.Medium""
-                Label=""Medium""
-                DefaultValue=""@(""Day"")""
-                TItem=""BitChoiceGroupOption<string>"" 
-                TValue=""string"" Horizontal Inline>
-    <BitChoiceGroupOption Text=""Day"" Value=""@(""Day"")"" IconName=""@BitIconName.CalendarDay"" />
-    <BitChoiceGroupOption Text=""Week"" Value=""@(""Week"")"" IconName=""@BitIconName.CalendarWeek"" />
-    <BitChoiceGroupOption Text=""Month"" Value=""@(""Month"")"" IconName=""@BitIconName.Calendar"" IsEnabled=""false"" />
+    private readonly string example14RazorCode = @"
+<BitChoiceGroup Label=""Events"" DefaultValue=""@(""A"")"" TItem=""BitChoiceGroupOption<string>"" TValue=""string""
+                OnChange=""(string? value) => changedValue = value""
+                OnClick=""(BitChoiceGroupOption<string> option) => clickedOption = option.Text"">
+    <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
+    <BitChoiceGroupOption Text=""Option B"" Value=""@(""B"")"" />
+    <BitChoiceGroupOption Text=""Option C"" Value=""@(""C"")"" />
+    <BitChoiceGroupOption Text=""Option D"" Value=""@(""D"")"" />
 </BitChoiceGroup>
+<div>Changed value: <b>@changedValue</b></div>
+<div>Clicked option: <b>@clickedOption</b></div>";
+    private readonly string example14CsharpCode = @"
+private string? changedValue;
+private string? clickedOption;";
 
-<BitChoiceGroup Size=""BitSize.Large""
-                Label=""Large""
-                DefaultValue=""@(""Day"")""
-                TItem=""BitChoiceGroupOption<string>"" 
-                TValue=""string"" Horizontal Inline>
-    <BitChoiceGroupOption Text=""Day"" Value=""@(""Day"")"" IconName=""@BitIconName.CalendarDay"" />
-    <BitChoiceGroupOption Text=""Week"" Value=""@(""Week"")"" IconName=""@BitIconName.CalendarWeek"" />
-    <BitChoiceGroupOption Text=""Month"" Value=""@(""Month"")"" IconName=""@BitIconName.Calendar"" IsEnabled=""false"" />
-</BitChoiceGroup>
+    private readonly string example15RazorCode = @"
+<BitButton OnClick=""AddDynamicOption"">Add item</BitButton>
+<BitButton OnClick=""RemoveDynamicOption"">Remove item</BitButton>
+<BitButton OnClick=""ReverseDynamicOptions"">Reverse items</BitButton>
 
-<BitChoiceGroup Size=""BitSize.Small""
-                Label=""Small""
-                DefaultValue=""@(""Day"")""
-                TItem=""BitChoiceGroupOption<string>"" 
-                TValue=""string"" Horizontal Inline>
-    <BitChoiceGroupOption Text=""Day"" Value=""@(""Day"")"" IconName=""@BitIconName.CalendarDay"" />
-    <BitChoiceGroupOption Text=""Week"" Value=""@(""Week"")"" IconName=""@BitIconName.CalendarWeek"" />
-    <BitChoiceGroupOption Text=""Month"" Value=""@(""Month"")"" IconName=""@BitIconName.Calendar"" IsEnabled=""false"" />
-</BitChoiceGroup>
+<BitChoiceGroup Label=""Dynamic options"" AutoReorderOptions @bind-Value=""dynamicValue"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"">
+    <ItemPrefixTemplate Context=""option"">
+        @(option.Index + 1).&nbsp;
+    </ItemPrefixTemplate>
+    <Options>
+        @foreach (var (text, value) in dynamicOptions)
+        {
+            <BitChoiceGroupOption @key=""value"" Text=""@text"" Value=""@value"" />
+        }
+    </Options>
+</BitChoiceGroup>";
+    private readonly string example15CsharpCode = @"
+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}"")];
+}
 
-<BitChoiceGroup Size=""BitSize.Medium""
-                Label=""Medium""
-                DefaultValue=""@(""Day"")""
-                TItem=""BitChoiceGroupOption<string>"" 
-                TValue=""string"" Horizontal Inline>
-    <BitChoiceGroupOption Text=""Day"" Value=""@(""Day"")"" IconName=""@BitIconName.CalendarDay"" />
-    <BitChoiceGroupOption Text=""Week"" Value=""@(""Week"")"" IconName=""@BitIconName.CalendarWeek"" />
-    <BitChoiceGroupOption Text=""Month"" Value=""@(""Month"")"" IconName=""@BitIconName.Calendar"" IsEnabled=""false"" />
-</BitChoiceGroup>
+private void RemoveDynamicOption()
+{
+    if (dynamicOptions.Count <= 1) return;
 
-<BitChoiceGroup Size=""BitSize.Large""
-                Label=""Large""
-                DefaultValue=""@(""Day"")""
-                TItem=""BitChoiceGroupOption<string>"" 
-                TValue=""string"" Horizontal Inline>
-    <BitChoiceGroupOption Text=""Day"" Value=""@(""Day"")"" IconName=""@BitIconName.CalendarDay"" />
-    <BitChoiceGroupOption Text=""Week"" Value=""@(""Week"")"" IconName=""@BitIconName.CalendarWeek"" />
-    <BitChoiceGroupOption Text=""Month"" Value=""@(""Month"")"" IconName=""@BitIconName.Calendar"" IsEnabled=""false"" />
-</BitChoiceGroup>";
+    dynamicOptions = [.. dynamicOptions.Take(dynamicOptions.Count - 1)];
+}
 
-    private readonly string example11RazorCode = @"
+private void ReverseDynamicOptions()
+{
+    dynamicOptions = [.. Enumerable.Reverse(dynamicOptions)];
+}";
+
+    private readonly string example16RazorCode = @"
 <BitChoiceGroup Color=""BitColor.Primary"" Label=""Primary"" DefaultValue=""@(""B"")"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"" Horizontal>
     <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
     <BitChoiceGroupOption Text=""Option B"" Value=""@(""B"")"" />
@@ -525,7 +541,7 @@ private void HandleValidSubmit() { }
     <BitChoiceGroupOption Text=""Option D"" Value=""@(""D"")"" />
 </BitChoiceGroup>";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example17RazorCode = @"
 <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/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
 
@@ -547,7 +563,89 @@ private void HandleValidSubmit() { }
     <BitChoiceGroupOption Text=""Month"" Value=""@(""Month"")"" Icon=""@BitIconInfo.Bi(""calendar-month"")"" />
 </BitChoiceGroup>";
 
-    private readonly string example13RazorCode = @"
+    private readonly string example18RazorCode = @"
+<BitChoiceGroup Size=""BitSize.Small"" Label=""Small"" DefaultValue=""@(""B"")"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"" Horizontal>
+    <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
+    <BitChoiceGroupOption Text=""Option B"" Value=""@(""B"")"" />
+    <BitChoiceGroupOption Text=""Option C"" Value=""@(""C"")"" />
+    <BitChoiceGroupOption Text=""Option D"" Value=""@(""D"")"" />
+</BitChoiceGroup>
+
+<BitChoiceGroup Size=""BitSize.Medium"" Label=""Medium"" DefaultValue=""@(""B"")"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"" Horizontal>
+    <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
+    <BitChoiceGroupOption Text=""Option B"" Value=""@(""B"")"" />
+    <BitChoiceGroupOption Text=""Option C"" Value=""@(""C"")"" />
+    <BitChoiceGroupOption Text=""Option D"" Value=""@(""D"")"" />
+</BitChoiceGroup>
+
+<BitChoiceGroup Size=""BitSize.Large"" Label=""Large"" DefaultValue=""@(""B"")"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"" Horizontal>
+    <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
+    <BitChoiceGroupOption Text=""Option B"" Value=""@(""B"")"" />
+    <BitChoiceGroupOption Text=""Option C"" Value=""@(""C"")"" />
+    <BitChoiceGroupOption Text=""Option D"" Value=""@(""D"")"" />
+</BitChoiceGroup>
+
+<BitChoiceGroup Size=""BitSize.Small"" 
+                Label=""Small"" 
+                DefaultValue=""@(""Day"")""
+                TItem=""BitChoiceGroupOption<string>"" 
+                TValue=""string"" Horizontal Inline>
+    <BitChoiceGroupOption Text=""Day"" Value=""@(""Day"")"" IconName=""@BitIconName.CalendarDay"" />
+    <BitChoiceGroupOption Text=""Week"" Value=""@(""Week"")"" IconName=""@BitIconName.CalendarWeek"" />
+    <BitChoiceGroupOption Text=""Month"" Value=""@(""Month"")"" IconName=""@BitIconName.Calendar"" IsEnabled=""false"" />
+</BitChoiceGroup>
+
+<BitChoiceGroup Size=""BitSize.Medium""
+                Label=""Medium""
+                DefaultValue=""@(""Day"")""
+                TItem=""BitChoiceGroupOption<string>"" 
+                TValue=""string"" Horizontal Inline>
+    <BitChoiceGroupOption Text=""Day"" Value=""@(""Day"")"" IconName=""@BitIconName.CalendarDay"" />
+    <BitChoiceGroupOption Text=""Week"" Value=""@(""Week"")"" IconName=""@BitIconName.CalendarWeek"" />
+    <BitChoiceGroupOption Text=""Month"" Value=""@(""Month"")"" IconName=""@BitIconName.Calendar"" IsEnabled=""false"" />
+</BitChoiceGroup>
+
+<BitChoiceGroup Size=""BitSize.Large""
+                Label=""Large""
+                DefaultValue=""@(""Day"")""
+                TItem=""BitChoiceGroupOption<string>"" 
+                TValue=""string"" Horizontal Inline>
+    <BitChoiceGroupOption Text=""Day"" Value=""@(""Day"")"" IconName=""@BitIconName.CalendarDay"" />
+    <BitChoiceGroupOption Text=""Week"" Value=""@(""Week"")"" IconName=""@BitIconName.CalendarWeek"" />
+    <BitChoiceGroupOption Text=""Month"" Value=""@(""Month"")"" IconName=""@BitIconName.Calendar"" IsEnabled=""false"" />
+</BitChoiceGroup>
+
+<BitChoiceGroup Size=""BitSize.Small""
+                Label=""Small""
+                DefaultValue=""@(""Day"")""
+                TItem=""BitChoiceGroupOption<string>"" 
+                TValue=""string"" Horizontal Inline>
+    <BitChoiceGroupOption Text=""Day"" Value=""@(""Day"")"" IconName=""@BitIconName.CalendarDay"" />
+    <BitChoiceGroupOption Text=""Week"" Value=""@(""Week"")"" IconName=""@BitIconName.CalendarWeek"" />
+    <BitChoiceGroupOption Text=""Month"" Value=""@(""Month"")"" IconName=""@BitIconName.Calendar"" IsEnabled=""false"" />
+</BitChoiceGroup>
+
+<BitChoiceGroup Size=""BitSize.Medium""
+                Label=""Medium""
+                DefaultValue=""@(""Day"")""
+                TItem=""BitChoiceGroupOption<string>"" 
+                TValue=""string"" Horizontal Inline>
+    <BitChoiceGroupOption Text=""Day"" Value=""@(""Day"")"" IconName=""@BitIconName.CalendarDay"" />
+    <BitChoiceGroupOption Text=""Week"" Value=""@(""Week"")"" IconName=""@BitIconName.CalendarWeek"" />
+    <BitChoiceGroupOption Text=""Month"" Value=""@(""Month"")"" IconName=""@BitIconName.Calendar"" IsEnabled=""false"" />
+</BitChoiceGroup>
+
+<BitChoiceGroup Size=""BitSize.Large""
+                Label=""Large""
+                DefaultValue=""@(""Day"")""
+                TItem=""BitChoiceGroupOption<string>"" 
+                TValue=""string"" Horizontal Inline>
+    <BitChoiceGroupOption Text=""Day"" Value=""@(""Day"")"" IconName=""@BitIconName.CalendarDay"" />
+    <BitChoiceGroupOption Text=""Week"" Value=""@(""Week"")"" IconName=""@BitIconName.CalendarWeek"" />
+    <BitChoiceGroupOption Text=""Month"" Value=""@(""Month"")"" IconName=""@BitIconName.Calendar"" IsEnabled=""false"" />
+</BitChoiceGroup>";
+
+    private readonly string example19RazorCode = @"
 <style>
     .custom-class {
         color: dodgerblue;
@@ -644,7 +742,7 @@ private void HandleValidSubmit() { }
     <BitChoiceGroupOption Text=""Option D"" Value=""@(""D"")"" />
 </BitChoiceGroup>";
 
-    private readonly string example14RazorCode = @"
+    private readonly string example20RazorCode = @"
 <BitChoiceGroup Label=""ساده"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"" DefaultValue=""@(""A"")"" Dir=""BitDir.Rtl"">
     <BitChoiceGroupOption Text=""گزینه آ"" Value=""@(""A"")"" />
     <BitChoiceGroupOption Text=""گزینه ب"" Value=""@(""B"")"" />
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupTests.cs
index 6bfd96afcf..3f445150c2 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupTests.cs
@@ -234,6 +234,102 @@ public void BitChoiceGroupShouldTakeCustomVisibility(BitVisibility visibility)
         }
     }
 
+    [TestMethod]
+    public void BitChoiceGroupShouldRenderFocusableInputs()
+    {
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, GetChoiceGroupItems());
+        });
+
+        var inputs = component.FindAll(".bit-chg-icn input");
+
+        Assert.AreEqual(4, inputs.Count);
+
+        foreach (var input in inputs)
+        {
+            Assert.IsFalse(input.HasAttribute("hidden"));
+            Assert.IsTrue(input.ClassList.Contains("bit-chg-inp"));
+            Assert.IsFalse(input.HasAttribute("tabindex"));
+        }
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldRemoveInputsFromTabOrderWhenReadOnly()
+    {
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, GetChoiceGroupItems());
+            parameters.Add(p => p.ReadOnly, true);
+        });
+
+        var inputs = component.FindAll(".bit-chg-icn input");
+
+        foreach (var input in inputs)
+        {
+            Assert.AreEqual("-1", input.GetAttribute("tabindex"));
+        }
+
+        var bitChoiceGroup = component.Find(".bit-chg");
+        Assert.AreEqual("true", bitChoiceGroup.GetAttribute("aria-readonly"));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldRenderDescriptions()
+    {
+        var items = new List<BitChoiceGroupItem<string>>()
+        {
+            new() { Text = "Item A", Value = "A", Description = "Description A" },
+            new() { Text = "Item B", Value = "B" },
+        };
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+        });
+
+        var descriptions = component.FindAll(".bit-chg-dsc");
+
+        Assert.AreEqual(1, descriptions.Count);
+        Assert.AreEqual("Description A", descriptions[0].TextContent);
+
+        var describedInput = component.Find(".bit-chg-icn input");
+        Assert.AreEqual(descriptions[0].Id, describedInput.GetAttribute("aria-describedby"));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldTakeCustomGap()
+    {
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, GetChoiceGroupItems());
+            parameters.Add(p => p.Gap, "2rem");
+        });
+
+        var bitChoiceGroup = component.Find(".bit-chg");
+
+        Assert.IsTrue(bitChoiceGroup?.GetAttribute("style")?.Contains("--bit-chg-item-gap:2rem"));
+    }
+
+    [TestMethod,
+      DataRow(true),
+      DataRow(false)
+    ]
+    public void BitChoiceGroupShouldTakeCorrectGroupAria(bool horizontal)
+    {
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, GetChoiceGroupItems());
+            parameters.Add(p => p.Required, true);
+            parameters.Add(p => p.Horizontal, horizontal);
+        });
+
+        var bitChoiceGroup = component.Find(".bit-chg");
+
+        Assert.AreEqual("true", bitChoiceGroup.GetAttribute("aria-required"));
+        Assert.AreEqual(horizontal ? "horizontal" : "vertical", bitChoiceGroup.GetAttribute("aria-orientation"));
+    }
+
     private List<BitChoiceGroupItem<string>> GetChoiceGroupItems()
     {
         return new List<BitChoiceGroupItem<string>>()

From 904f917cfd15727023c66b24f14baf7601a17d99 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Tue, 21 Jul 2026 18:19:21 +0330
Subject: [PATCH 02/19] resolve review comments

---
 .../_BitChoiceGroupOptionDemo.razor.samples.cs       | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs
index 413a803f0d..2ff5034e18 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs
@@ -618,8 +618,8 @@ private void ReverseDynamicOptions()
 <BitChoiceGroup Size=""BitSize.Small""
                 Label=""Small""
                 DefaultValue=""@(""Day"")""
-                TItem=""BitChoiceGroupOption<string>"" 
-                TValue=""string"" Horizontal Inline>
+                TItem=""BitChoiceGroupOption<string>""
+                TValue=""string"" Horizontal>
     <BitChoiceGroupOption Text=""Day"" Value=""@(""Day"")"" IconName=""@BitIconName.CalendarDay"" />
     <BitChoiceGroupOption Text=""Week"" Value=""@(""Week"")"" IconName=""@BitIconName.CalendarWeek"" />
     <BitChoiceGroupOption Text=""Month"" Value=""@(""Month"")"" IconName=""@BitIconName.Calendar"" IsEnabled=""false"" />
@@ -628,8 +628,8 @@ private void ReverseDynamicOptions()
 <BitChoiceGroup Size=""BitSize.Medium""
                 Label=""Medium""
                 DefaultValue=""@(""Day"")""
-                TItem=""BitChoiceGroupOption<string>"" 
-                TValue=""string"" Horizontal Inline>
+                TItem=""BitChoiceGroupOption<string>""
+                TValue=""string"" Horizontal>
     <BitChoiceGroupOption Text=""Day"" Value=""@(""Day"")"" IconName=""@BitIconName.CalendarDay"" />
     <BitChoiceGroupOption Text=""Week"" Value=""@(""Week"")"" IconName=""@BitIconName.CalendarWeek"" />
     <BitChoiceGroupOption Text=""Month"" Value=""@(""Month"")"" IconName=""@BitIconName.Calendar"" IsEnabled=""false"" />
@@ -638,8 +638,8 @@ private void ReverseDynamicOptions()
 <BitChoiceGroup Size=""BitSize.Large""
                 Label=""Large""
                 DefaultValue=""@(""Day"")""
-                TItem=""BitChoiceGroupOption<string>"" 
-                TValue=""string"" Horizontal Inline>
+                TItem=""BitChoiceGroupOption<string>""
+                TValue=""string"" Horizontal>
     <BitChoiceGroupOption Text=""Day"" Value=""@(""Day"")"" IconName=""@BitIconName.CalendarDay"" />
     <BitChoiceGroupOption Text=""Week"" Value=""@(""Week"")"" IconName=""@BitIconName.CalendarWeek"" />
     <BitChoiceGroupOption Text=""Month"" Value=""@(""Month"")"" IconName=""@BitIconName.Calendar"" IsEnabled=""false"" />

From 4dba0c3fe2d3f080d8e9a191a23bbbfe7bb6ff25 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Sun, 26 Jul 2026 08:32:31 +0330
Subject: [PATCH 03/19] resolve local review findings

---
 .../Inputs/ChoiceGroup/BitChoiceGroup.razor   |  28 +-
 .../ChoiceGroup/BitChoiceGroup.razor.cs       | 253 ++++++++++++------
 .../Inputs/ChoiceGroup/BitChoiceGroup.scss    |  59 ++--
 .../ChoiceGroup/_BitChoiceGroupItem.razor     |  29 +-
 .../ChoiceGroup/BitChoiceGroupDemo.razor.cs   |  41 ++-
 .../ChoiceGroup/BitChoiceGroupDemo.razor.scss |   4 +-
 .../_BitChoiceGroupCustomDemo.razor           |   6 +-
 .../_BitChoiceGroupCustomDemo.razor.cs        |   2 +
 ..._BitChoiceGroupCustomDemo.razor.samples.cs |  10 +-
 .../ChoiceGroup/_BitChoiceGroupItemDemo.razor |   8 +-
 .../_BitChoiceGroupItemDemo.razor.cs          |   2 +
 .../_BitChoiceGroupItemDemo.razor.samples.cs  |  12 +-
 .../_BitChoiceGroupOptionDemo.razor           |   8 +-
 .../_BitChoiceGroupOptionDemo.razor.cs        |   2 +
 ..._BitChoiceGroupOptionDemo.razor.samples.cs |  14 +-
 .../BitChoiceGroupAccessibilityTests.cs       | 214 +++++++++++++++
 .../ChoiceGroup/BitChoiceGroupEventsTests.cs  | 167 ++++++++++++
 .../BitChoiceGroupItemContentTests.cs         | 126 +++++++++
 .../BitChoiceGroupOptionsApiTests.cs          | 129 +++++++++
 .../BitChoiceGroupOptionsTest.razor           |  45 ++++
 .../ChoiceGroup/BitChoiceGroupStateTests.cs   | 173 ++++++++++++
 .../BitChoiceGroupStyleClassTests.cs          | 141 ++++++++++
 ...itChoiceGroupUncontrolledOptionsTest.razor |  25 ++
 23 files changed, 1328 insertions(+), 170 deletions(-)
 create mode 100644 src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupAccessibilityTests.cs
 create mode 100644 src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupEventsTests.cs
 create mode 100644 src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupItemContentTests.cs
 create mode 100644 src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupOptionsApiTests.cs
 create mode 100644 src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupOptionsTest.razor
 create mode 100644 src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupStateTests.cs
 create mode 100644 src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupStyleClassTests.cs
 create mode 100644 src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupUncontrolledOptionsTest.razor

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor
index 6a1db60881..a9bffc9b52 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor
@@ -16,19 +16,21 @@
      aria-disabled="@(IsEnabled ? null : "true")"
      aria-orientation="@(Horizontal ? "horizontal" : "vertical")">
 
-    <label id="@_labelId"
-           disabled="@(IsEnabled is false)"
-           style="@Styles?.LabelContainer"
-           class="@Classes?.LabelContainer">
-        @if (LabelTemplate is not null)
-        {
-            @LabelTemplate
-        }
-        else if (Label.HasValue())
-        {
-            <span style="@Styles?.Label" class="bit-chg-lbl @Classes?.Label">@Label</span>
-        }
-    </label>
+    @if (HasLabel)
+    {
+        <label id="@_labelId"
+               style="@Styles?.LabelContainer"
+               class="@Classes?.LabelContainer">
+            @if (LabelTemplate is not null)
+            {
+                @LabelTemplate
+            }
+            else
+            {
+                <span style="@Styles?.Label" class="bit-chg-lbl @Classes?.Label">@Label</span>
+            }
+        </label>
+    }
 
     <div id="@_optionsContainerId" style="@Styles?.Container" class="bit-chg-cnt @Classes?.Container">
         @if (Options is not null || ChildContent is not null)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
index 60ac442301..92a341fe5a 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
@@ -1,5 +1,4 @@
-using System.Text;
-using System.Diagnostics.CodeAnalysis;
+using System.Diagnostics.CodeAnalysis;
 
 namespace Bit.BlazorUI;
 
@@ -13,8 +12,9 @@ namespace Bit.BlazorUI;
     private bool _autoFocusDone;
     private string _labelId = default!;
     private bool _optionsOrderDirty;
+    private bool _defaultValueApplied;
+    private TValue? _appliedDefaultValue;
     private string _optionsContainerId = default!;
-    private IEnumerable<TItem>? _oldItems;
 
 
 
@@ -117,11 +117,21 @@ namespace Bit.BlazorUI;
     [Parameter, ResetClassBuilder]
     public bool NoCircle { get; set; }
 
+    /// <summary>
+    /// Callback for when an item of the ChoiceGroup loses focus.
+    /// </summary>
+    [Parameter] public EventCallback<TItem> OnBlur { get; set; }
+
     /// <summary>
     /// Callback for when the option clicked.
     /// </summary>
     [Parameter] public EventCallback<TItem> OnClick { get; set; }
 
+    /// <summary>
+    /// Callback for when an item of the ChoiceGroup receives focus.
+    /// </summary>
+    [Parameter] public EventCallback<TItem> OnFocus { get; set; }
+
     /// <summary>
     /// Alias of ChildContent.
     /// </summary>
@@ -155,6 +165,8 @@ internal void RegisterOption(BitChoiceGroupOption<TValue> option)
 
         InitDefaultValue();
 
+        UpdateIsSelected();
+
         StateHasChanged();
     }
 
@@ -263,16 +275,33 @@ protected override void OnParametersSet()
         // choice group's own parameters (Value, Styles, NoCircle, ...) change, so push a re-render to each one.
         RefreshOptions();
 
-        if (ChildContent is not null || Options is not null || Items is null || Items.Any() is false) return;
+        // A new DefaultValue has to be applied again, the previous one has already had its chance.
+        if (EqualityComparer<TValue>.Default.Equals(DefaultValue, _appliedDefaultValue) is false)
+        {
+            _appliedDefaultValue = DefaultValue;
+            _defaultValueApplied = false;
+        }
 
-        if (_oldItems is not null && Items.SequenceEqual(_oldItems)) return;
+        if (ChildContent is null && Options is null)
+        {
+            // The comparison is against the items the component currently holds (not against the previously
+            // assigned collection), so an in-place mutation of the same collection instance is detected too,
+            // and clearing the collection actually clears the rendered items.
+            var items = Items ?? [];
 
-        _oldItems = Items;
-        _items = [.. Items];
+            if (_items.SequenceEqual(items) is false)
+            {
+                _items = [.. items];
 
-        SetIndexItems();
+                SetIndexItems();
+            }
+        }
 
         InitDefaultValue();
+
+        // Value can change without the items changing (one-way binding, a programmatic assignment, ...),
+        // so the IsSelected of every item is refreshed on each parameters set, not only when the items change.
+        UpdateIsSelected();
     }
 
     protected override string RootElementClass => "bit-chg";
@@ -334,56 +363,51 @@ protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(fa
 
 
 
+    // Applies the DefaultValue of the uncontrolled mode at most once per assigned DefaultValue, so a later
+    // change of the items (or an option registering itself afterwards) cannot revert the user's own choice.
     private void InitDefaultValue()
     {
-        if (ValueHasBeenSet)
-        {
-            var item = _items.FirstOrDefault(item => EqualityComparer<TValue>.Default.Equals(GetValue(item), Value));
-            if (item is not null)
-            {
-                SetIsSelectedForSelectedItem(item);
-            }
-        }
-        else if (DefaultValue is not null)
-        {
-            var item = _items.FirstOrDefault(item => EqualityComparer<TValue>.Default.Equals(GetValue(item), DefaultValue));
-            if (item is not null)
-            {
-                SetIsSelectedForSelectedItem(item);
-                Value = DefaultValue;
-            }
-        }
+        if (ValueHasBeenSet || _defaultValueApplied || DefaultValue is null) return;
+
+        var item = _items.FirstOrDefault(item => EqualityComparer<TValue>.Default.Equals(GetValue(item), DefaultValue));
+        if (item is null) return;
+
+        _defaultValueApplied = true;
+
+        Value = DefaultValue;
     }
 
     private void SetIndexItems()
     {
-        if (_items.Any() is false) return;
-
         for (var i = 0; i < _items.Count; i++)
         {
-            var index = i;
-            var item = _items[i];
-            SetIndex(item, index);
+            SetIndex(_items[i], i);
         }
     }
 
-    private string GetAriaLabelledBy() => AriaLabelledBy ?? _labelId;
+    // The internal label element is only rendered (and therefore only worth referencing) when there is a
+    // label to show. Referencing it unconditionally would point the radiogroup at an empty element, and
+    // since aria-labelledby wins over aria-label that would leave the group without an accessible name.
+    internal bool HasLabel => LabelTemplate is not null || Label.HasValue();
+
+    private string? GetAriaLabelledBy() => AriaLabelledBy ?? (HasLabel ? _labelId : null);
 
-    internal string? GetInputId(TItem item) => GetId(item) ?? $"ChoiceGroup-{UniqueId}-Input-{GetValue(item)}";
+    // The index is used instead of the value, because a value is free-form (it can contain spaces or any
+    // other character that is not valid in an id) and is not guaranteed to be unique among the items,
+    // while the id has to be a valid, unique IDREF for the label's "for" and for aria-describedby.
+    internal string? GetInputId(TItem item) => GetId(item) ?? $"ChoiceGroup-{UniqueId}-Input-{GetItemIndex(item)}";
 
-    internal string GetDescriptionId(TItem item) => $"{GetInputId(item)}-description";
+    private int GetItemIndex(TItem item) => _items.FindIndex(i => ReferenceEquals(i, item));
 
-    // Keeps the InputElement of the base class pointing at the input of the checked item (or the first
-    // item when nothing is checked), so FocusAsync targets the same input the Tab key would land on.
-    // Called by each item after render; also performs the one-time AutoFocus on that input.
+    // Keeps the InputElement of the base class pointing at the input the Tab key would land on: the input
+    // of the checked item, or the first enabled one when nothing is checked (the browser skips a disabled
+    // radio when tabbing into the group). Called by each item after render; also performs the one-time AutoFocus.
     internal async Task SetInputElement(TItem item, ElementReference inputElement)
     {
-        var isChecked = GetIsCheckedItem(item);
-
-        if (isChecked is false)
+        if (GetIsCheckedItem(item) is false)
         {
             if (_items.Any(GetIsCheckedItem)) return;
-            if (ReferenceEquals(_items.FirstOrDefault(), item) is false) return;
+            if (ReferenceEquals(GetTabTargetItem(), item) is false) return;
         }
 
         InputElement = inputElement;
@@ -395,6 +419,18 @@ internal async Task SetInputElement(TItem item, ElementReference inputElement)
         }
     }
 
+    private TItem? GetTabTargetItem() => _items.FirstOrDefault(GetIsItemEnabled) ?? _items.FirstOrDefault();
+
+    internal async Task HandleFocus(TItem item)
+    {
+        await OnFocus.InvokeAsync(item);
+    }
+
+    internal async Task HandleBlur(TItem item)
+    {
+        await OnBlur.InvokeAsync(item);
+    }
+
     internal async Task HandleClick(TItem item)
     {
         if (IsEnabled is false || ReadOnly || GetIsEnabled(item) is false) return;
@@ -406,10 +442,12 @@ internal void HandleChange(TItem item)
     {
         if (IsEnabled is false || ReadOnly || GetIsEnabled(item) is false) return;
 
-        SetIsSelectedForSelectedItem(item);
-
         CurrentValue = GetValue(item);
 
+        // After the value has been written, so an assignment the base class rejects
+        // (a bound Value without a way to write it back) does not leave a wrong IsSelected behind.
+        UpdateIsSelected();
+
         RefreshOptions();
 
         StateHasChanged();
@@ -433,69 +471,82 @@ internal bool GetIsCheckedItem(TItem item)
         return EqualityComparer<TValue>.Default.Equals(GetValue(item), CurrentValue);
     }
 
+    // The parts are joined with a semicolon: they are separate declaration lists and a value that does not
+    // already end with one (a plain "color:red" of an item's Style) would otherwise merge into the next part.
     internal string GetItemContainerCssStyles(TItem item)
     {
-        StringBuilder cssStyle = new();
+        List<string> styles = [];
 
-        if (GetStyle(item).HasValue())
+        var itemStyle = GetStyle(item);
+        if (itemStyle.HasValue())
         {
-            cssStyle.Append(GetStyle(item));
+            styles.Add(itemStyle!);
         }
 
-        if (string.IsNullOrEmpty(Styles?.ItemContainer) is false)
+        if (Styles?.ItemContainer.HasValue() ?? false)
         {
-            cssStyle.Append(' ').Append(Styles?.ItemContainer);
+            styles.Add(Styles.ItemContainer!);
         }
 
-        if (GetIsCheckedItem(item))
+        if (GetIsCheckedItem(item) && (Styles?.ItemChecked.HasValue() ?? false))
         {
-            cssStyle.Append(' ').Append(Styles?.ItemChecked);
+            styles.Add(Styles.ItemChecked!);
         }
 
-        return cssStyle.ToString();
+        return string.Join(';', styles);
     }
 
     internal string GetItemContainerCssClasses(TItem item)
     {
-        StringBuilder cssClass = new("bit-chg-icn");
+        List<string> classes = ["bit-chg-icn"];
 
-        if (GetClass(item).HasValue())
+        var itemClass = GetClass(item);
+        if (itemClass.HasValue())
         {
-            cssClass.Append(' ').Append(GetClass(item));
+            classes.Add(itemClass!);
         }
 
-        if (string.IsNullOrEmpty(Classes?.ItemContainer) is false)
+        if (Classes?.ItemContainer.HasValue() ?? false)
         {
-            cssClass.Append(' ').Append(Classes?.ItemContainer);
+            classes.Add(Classes.ItemContainer!);
         }
 
-        if (ItemTemplate is not null) return cssClass.ToString();
-
+        // The checked and disabled markers are emitted for every rendering mode, including the templated
+        // ones, so Classes.ItemChecked stays in sync with Styles.ItemChecked and a custom template can
+        // style its checked and disabled states through the same hooks the built-in rendering uses.
         if (GetIsCheckedItem(item))
         {
-            cssClass.Append(' ').Append("bit-chg-ich");
-            cssClass.Append(' ').Append(Classes?.ItemChecked);
-        }
+            classes.Add("bit-chg-ich");
 
-        if (ItemLabelTemplate is not null) return cssClass.ToString();
+            if (Classes?.ItemChecked.HasValue() ?? false)
+            {
+                classes.Add(Classes.ItemChecked!);
+            }
+        }
 
-        if (IsEnabled is false || GetIsEnabled(item) is false)
+        if (GetIsItemEnabled(item) is false)
         {
-            cssClass.Append(' ').Append("bit-chg-ids");
+            classes.Add("bit-chg-ids");
         }
 
-        if (GetImageSrc(item).HasValue() || GetIcon(item) is not null)
+        // Only meaningful for the built-in item content, a template renders its own image or icon.
+        if (GetTemplate(item) is null && ItemTemplate is null && ItemLabelTemplate is null &&
+            (GetImageSrc(item).HasValue() || GetIcon(item) is not null))
         {
-            cssClass.Append(' ').Append("bit-chg-ihi");
+            classes.Add("bit-chg-ihi");
         }
 
-        return cssClass.ToString();
+        return string.Join(' ', classes);
     }
 
+    // The tile layout only applies to the built-in image/icon markup of an item, so it follows the exact
+    // same conditions that markup is rendered under; a template renders its own content and lays it out itself.
     internal string GetItemLabelCssClasses(TItem item)
     {
-        var hasImageOrIcon = GetImageSrc(item).HasValue() || GetIcon(item) is not null;
-        return hasImageOrIcon && ItemLabelTemplate is null && Inline is false
+        if (Inline) return string.Empty;
+        if (GetTemplate(item) is not null || ItemTemplate is not null || ItemLabelTemplate is not null) return string.Empty;
+
+        return GetImageSrc(item).HasValue() || GetIcon(item) is not null
                 ? "bit-chg-ili"
                 : string.Empty;
     }
@@ -527,6 +578,11 @@ internal string GetName()
         return item.GetValueFromProperty<string?>(NameSelectors.AriaLabel.Name);
     }
 
+    /// <summary>
+    /// An item is only interactive when both the ChoiceGroup and the item itself are enabled.
+    /// </summary>
+    internal bool GetIsItemEnabled(TItem item) => IsEnabled && GetIsEnabled(item);
+
     internal bool GetIsEnabled(TItem item)
     {
         if (item is BitChoiceGroupItem<TValue> choiceGroupItem)
@@ -630,26 +686,60 @@ internal bool GetIsEnabled(TItem item)
         return item.GetValueFromProperty<string?>(NameSelectors.ImageAlt.Name);
     }
 
-    internal BitImageSize GetImageSize(TItem item)
+    // Null when no size was provided, so the image keeps its intrinsic size instead of collapsing
+    // to the 0x0 an unset size would otherwise render as.
+    internal BitImageSize? GetImageSize(TItem item)
     {
         if (item is BitChoiceGroupItem<TValue> choiceGroupItem)
         {
-            return choiceGroupItem.ImageSize ?? new BitImageSize(0, 0);
+            return choiceGroupItem.ImageSize;
         }
 
         if (item is BitChoiceGroupOption<TValue> choiceGroupOption)
         {
-            return choiceGroupOption.ImageSize ?? new BitImageSize(0, 0);
+            return choiceGroupOption.ImageSize;
         }
 
-        if (NameSelectors is null) return new BitImageSize(0, 0);
+        if (NameSelectors is null) return null;
 
         if (NameSelectors.ImageSize.Selector is not null)
         {
-            return NameSelectors.ImageSize.Selector!(item) ?? new BitImageSize(0, 0);
+            return NameSelectors.ImageSize.Selector!(item);
+        }
+
+        return item.GetValueFromProperty<BitImageSize?>(NameSelectors.ImageSize.Name);
+    }
+
+    internal string GetImageWrapperCssStyles(TItem item)
+    {
+        var imageSize = GetImageSize(item);
+
+        List<string> styles = [];
+
+        if (imageSize is not null)
+        {
+            styles.Add(FormattableString.Invariant($"width:{imageSize.Value.Width}px;height:{imageSize.Value.Height}px"));
+        }
+
+        if (Styles?.ItemImageWrapper.HasValue() ?? false)
+        {
+            styles.Add(Styles.ItemImageWrapper!);
         }
 
-        return item.GetValueFromProperty<BitImageSize?>(NameSelectors.ImageSize.Name) ?? new BitImageSize(0, 0);
+        return string.Join(';', styles);
+    }
+
+    // The checked state only swaps the image when a dedicated one was provided, otherwise the item keeps
+    // showing its normal image instead of losing it as soon as it gets selected.
+    internal string? GetImageSrcForState(TItem item, bool isChecked)
+    {
+        var imageSrc = GetImageSrc(item);
+
+        if (isChecked is false) return imageSrc;
+
+        var selectedImageSrc = GetSelectedImageSrc(item);
+
+        return selectedImageSrc.HasValue() ? selectedImageSrc : imageSrc;
     }
 
     internal string? GetPrefix(TItem item)
@@ -855,11 +945,13 @@ private void SetIndex(TItem item, int value)
         if (item is BitChoiceGroupItem<TValue> choiceGroupItem)
         {
             choiceGroupItem.Index = value;
+            return;
         }
 
         if (item is BitChoiceGroupOption<TValue> choiceGroupOption)
         {
             choiceGroupOption.Index = value;
+            return;
         }
 
         if (NameSelectors is null) return;
@@ -872,11 +964,13 @@ private void SetIsSelected(TItem item, bool value)
         if (item is BitChoiceGroupItem<TValue> choiceGroupItem)
         {
             choiceGroupItem.IsSelected = value;
+            return;
         }
 
         if (item is BitChoiceGroupOption<TValue> choiceGroupOption)
         {
             choiceGroupOption.IsSelected = value;
+            return;
         }
 
         if (NameSelectors is null) return;
@@ -884,13 +978,14 @@ private void SetIsSelected(TItem item, bool value)
         item.SetValueToProperty(NameSelectors.IsSelected, value);
     }
 
-    private void SetIsSelectedForSelectedItem(TItem item)
+    // Mirrors the current value onto the IsSelected of every item. The value can change without the items
+    // changing at all (one-way binding, a programmatic assignment, a reset to null), so this runs on every
+    // parameters set and after every change, not only when an item is picked.
+    private void UpdateIsSelected()
     {
-        foreach (var itm in _items)
+        foreach (var item in _items)
         {
-            SetIsSelected(itm, false);
+            SetIsSelected(item, GetIsCheckedItem(item));
         }
-
-        SetIsSelected(item, true);
     }
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss
index ddb0a2ad93..7a4b6d9962 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss
@@ -1,4 +1,4 @@
-@import "../../../Styles/functions.scss";
+@import "../../../Styles/functions.scss";
 
 .bit-chg {
     display: flex;
@@ -18,7 +18,7 @@
             &::after {
                 content: " *";
                 color: $clr-req;
-                padding-right: spacing(1.5);
+                padding-inline-end: spacing(1.5);
             }
         }
     }
@@ -103,20 +103,25 @@
         transition: border-color 0.2s cubic-bezier(0.4, 0, 0.23, 1);
     }
 
+    // Centered with "inset:0 + margin:auto" rather than an inset/translate pair, which would disagree in
+    // RTL: a logical inset flips side there while a physical translate does not, so the two would compound
+    // and push the dot off center by half its width instead of cancelling out.
+    // The dot has its own size (rather than being derived as half the circle) so that the space left over
+    // around it is always an even number of pixels. Halving an odd leftover would put the dot on a half
+    // pixel while the ring stays on the pixel grid, which reads as an off center dot at the small and
+    // large sizes; only the medium size happens to divide evenly.
     &::after {
-        top: 50%;
+        inset: 0;
         opacity: 0;
         content: "";
-        aspect-ratio: 1;
+        margin: auto;
         position: absolute;
         border-radius: 50%;
         box-sizing: border-box;
-        inset-inline-start: 50%;
-        transform: translate(-50%, -50%);
         background-color: $clr-fg-sec-hover;
-        transition-property: background-color;
-        width: calc(var(--bit-chg-circle-size) / 2);
-        transition: border-width 0.2s cubic-bezier(0.4, 0, 0.23, 1);
+        width: var(--bit-chg-dot-size, calc(var(--bit-chg-circle-size) / 2));
+        height: var(--bit-chg-dot-size, calc(var(--bit-chg-circle-size) / 2));
+        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.23, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.23, 1);
     }
 
     @media (hover: hover) {
@@ -192,7 +197,7 @@
     .bit-chg-rad {
         position: absolute;
         top: calc(var(--bit-chg-circle-size) / 4);
-        right: calc(var(--bit-chg-circle-size) / 4);
+        inset-inline-end: calc(var(--bit-chg-circle-size) / 4);
 
         &::before {
             opacity: 0;
@@ -212,9 +217,6 @@
     }
 }
 
-.bit-chg-ncr {
-}
-
 .bit-chg-itx {
     display: inline-block;
 }
@@ -263,7 +265,6 @@
 .bit-chg-ico {
     speak: none;
     display: inline-block;
-    //width: var(--bit-chg-ico-size);
 }
 
 .bit-chg-inl {
@@ -281,10 +282,6 @@
         padding: 0;
         font-size: calc(var(--bit-chg-fontsize) + spacing(0.25));
     }
-
-    .bit-chg-ico {
-        //width: unset;
-    }
 }
 
 .bit-chg-ich {
@@ -380,41 +377,35 @@
 .bit-chg-pri {
     --bit-chg-clr: #{$clr-pri};
     --bit-chg-clr-bg: #{$clr-bg-sec};
-    --bit-chg-clr-brd: #{$clr-brd-pri};
     --bit-chg-clr-hover: #{$clr-pri-hover};
 }
 
 .bit-chg-sec {
     --bit-chg-clr: #{$clr-sec};
     --bit-chg-clr-bg: #{$clr-bg-sec};
-    --bit-chg-clr-brd: #{$clr-brd-sec};
     --bit-chg-clr-hover: #{$clr-sec-hover};
 }
 
 .bit-chg-ter {
     --bit-chg-clr: #{$clr-ter};
     --bit-chg-clr-bg: #{$clr-bg-sec};
-    --bit-chg-clr-brd: #{$clr-brd-ter};
     --bit-chg-clr-hover: #{$clr-ter-hover};
 }
 
 .bit-chg-inf {
     --bit-chg-clr: #{$clr-inf};
     --bit-chg-clr-bg: #{$clr-bg-sec};
-    --bit-chg-clr-brd: #{$clr-inf};
     --bit-chg-clr-hover: #{$clr-inf-hover};
 }
 
 .bit-chg-suc {
     --bit-chg-clr: #{$clr-suc};
     --bit-chg-clr-bg: #{$clr-bg-sec};
-    --bit-chg-clr-brd: #{$clr-suc};
     --bit-chg-clr-hover: #{$clr-suc-hover};
 }
 
 .bit-chg-wrn {
     --bit-chg-clr: #{$clr-wrn};
-    --bit-chg-clr-brd: #{$clr-wrn};
     --bit-chg-clr-hover: #{$clr-wrn-hover};
     --bit-chg-clr-bg: #{$clr-bg-sec};
 }
@@ -422,13 +413,11 @@
 .bit-chg-swr {
     --bit-chg-clr: #{$clr-swr};
     --bit-chg-clr-bg: #{$clr-bg-sec};
-    --bit-chg-clr-brd: #{$clr-swr};
     --bit-chg-clr-hover: #{$clr-swr-hover};
 }
 
 .bit-chg-err {
     --bit-chg-clr: #{$clr-err};
-    --bit-chg-clr-brd: #{$clr-err};
     --bit-chg-clr-hover: #{$clr-err-hover};
     --bit-chg-clr-bg: #{$clr-bg-sec};
 }
@@ -436,20 +425,17 @@
 .bit-chg-pbg {
     --bit-chg-clr: #{$clr-bg-pri};
     --bit-chg-clr-bg: #{$clr-fg-pri};
-    --bit-chg-clr-brd: #{$clr-bg-pri};
     --bit-chg-clr-hover: #{$clr-bg-pri-hover};
 }
 
 .bit-chg-sbg {
     --bit-chg-clr: #{$clr-bg-sec};
     --bit-chg-clr-bg: #{$clr-fg-pri};
-    --bit-chg-clr-brd: #{$clr-bg-sec};
     --bit-chg-clr-hover: #{$clr-bg-sec-hover};
 }
 
 .bit-chg-tbg {
     --bit-chg-clr: #{$clr-bg-ter};
-    --bit-chg-clr-brd: #{$clr-bg-ter};
     --bit-chg-clr-hover: #{$clr-bg-ter-hover};
     --bit-chg-clr-bg: #{$clr-fg-pri};
 }
@@ -457,13 +443,11 @@
 .bit-chg-pfg {
     --bit-chg-clr: #{$clr-fg-pri};
     --bit-chg-clr-bg: #{$clr-bg-sec};
-    --bit-chg-clr-brd: #{$clr-fg-pri};
     --bit-chg-clr-hover: #{$clr-fg-pri-hover};
 }
 
 .bit-chg-sfg {
     --bit-chg-clr: #{$clr-fg-sec};
-    --bit-chg-clr-brd: #{$clr-fg-sec};
     --bit-chg-clr-hover: #{$clr-fg-sec-hover};
     --bit-chg-clr-bg: #{$clr-bg-sec};
 }
@@ -471,13 +455,11 @@
 .bit-chg-tfg {
     --bit-chg-clr: #{$clr-fg-ter};
     --bit-chg-clr-bg: #{$clr-bg-sec};
-    --bit-chg-clr-brd: #{$clr-fg-ter};
     --bit-chg-clr-hover: #{$clr-fg-ter-hover};
 }
 
 .bit-chg-pbr {
     --bit-chg-clr: #{$clr-brd-pri};
-    --bit-chg-clr-brd: #{$clr-brd-pri};
     --bit-chg-clr-hover: #{$clr-brd-pri-hover};
     --bit-chg-clr-bg: #{$clr-bg-sec};
 }
@@ -485,23 +467,24 @@
 .bit-chg-sbr {
     --bit-chg-clr: #{$clr-brd-sec};
     --bit-chg-clr-bg: #{$clr-bg-sec};
-    --bit-chg-clr-brd: #{$clr-brd-sec};
     --bit-chg-clr-hover: #{$clr-brd-sec-hover};
 }
 
 .bit-chg-tbr {
     --bit-chg-clr: #{$clr-brd-ter};
     --bit-chg-clr-bg: #{$clr-bg-sec};
-    --bit-chg-clr-brd: #{$clr-brd-ter};
     --bit-chg-clr-hover: #{$clr-brd-ter-hover};
 }
 
+// The dot size of each size is picked so that the circle size minus the dot size stays an even number of
+// pixels at the default spacing scale, which is what keeps the centered dot on the pixel grid: 14-6, 20-10
+// and 26-12. Deriving it as half the circle instead would leave an odd 7 and 13 for small and large.
 .bit-chg-sm {
     --bit-chg-item-gap: #{spacing(1)};
     --bit-chg-ico-size: #{spacing(3)};
     --bit-chg-fontsize: #{spacing(1.5)};
     --bit-chg-circle-size: #{spacing(1.75)};
-    --bit-chg-dot-position: #{spacing(0.8125)};
+    --bit-chg-dot-size: #{spacing(0.75)};
 }
 
 .bit-chg-md {
@@ -509,7 +492,7 @@
     --bit-chg-ico-size: #{spacing(4)};
     --bit-chg-fontsize: #{spacing(1.75)};
     --bit-chg-circle-size: #{spacing(2.5)};
-    --bit-chg-dot-position: #{spacing(1)};
+    --bit-chg-dot-size: #{spacing(1.25)};
 }
 
 .bit-chg-lg {
@@ -517,7 +500,7 @@
     --bit-chg-ico-size: #{spacing(5)};
     --bit-chg-fontsize: #{spacing(2)};
     --bit-chg-circle-size: #{spacing(3.25)};
-    --bit-chg-dot-position: #{spacing(1.25)};
+    --bit-chg-dot-size: #{spacing(1.5)};
 }
 
 .bit-chg-hor {
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor
index 89e1fd7556..cfe752ba51 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor
@@ -1,4 +1,4 @@
-@namespace Bit.BlazorUI
+@namespace Bit.BlazorUI
 @typeparam TItem
 @typeparam TValue
 
@@ -8,7 +8,15 @@
     var template = ChoiceGroup.GetTemplate(Item);
     var isChecked = ChoiceGroup.GetIsCheckedItem(Item);
     var description = ChoiceGroup.GetDescription(Item);
-    var descriptionId = ChoiceGroup.GetDescriptionId(Item);
+    var descriptionId = $"{inputId}-description";
+
+    // The description element belongs to the built-in item content, so a template that takes the content
+    // over also takes the description over. aria-describedby is only emitted when the element it points
+    // at is actually rendered, otherwise it would be a dangling reference.
+    var hasDescription = description.HasValue()
+                      && template is null
+                      && ChoiceGroup.ItemTemplate is null
+                      && ChoiceGroup.ItemLabelTemplate is null;
 }
 
 <div style="@ChoiceGroup.GetItemContainerCssStyles(Item)" class="@ChoiceGroup.GetItemContainerCssClasses(Item)" @attributes="ChoiceGroup.GetItemMarkerAttributes(Item)">
@@ -16,6 +24,8 @@
            @onclick="e => ChoiceGroup.HandleClick(Item)"
            @onclick:preventDefault="ChoiceGroup.ReadOnly"
            @onchange="e => ChoiceGroup.HandleChange(Item)"
+           @onfocus="e => ChoiceGroup.HandleFocus(Item)"
+           @onblur="e => ChoiceGroup.HandleBlur(Item)"
            type="radio"
            id="@inputId"
            checked=@isChecked
@@ -24,9 +34,9 @@
            required="@ChoiceGroup.Required"
            tabindex="@(ChoiceGroup.ReadOnly ? "-1" : null)"
            aria-label="@ChoiceGroup.GetAriaLabel(Item)"
-           aria-describedby="@(description.HasValue() ? descriptionId : null)"
+           aria-describedby="@(hasDescription ? descriptionId : null)"
            value="@ChoiceGroup.GetValue(Item)?.ToString()"
-           disabled="@(ChoiceGroup.GetIsEnabled(Item) is false)" />
+           disabled="@(ChoiceGroup.GetIsItemEnabled(Item) is false)" />
 
     <label for="@inputId" style="@ChoiceGroup.Styles?.ItemLabel" class="bit-chg-itl @ChoiceGroup.GetItemLabelCssClasses(Item) @ChoiceGroup.Classes?.ItemLabel">
         @if (template is not null)
@@ -39,7 +49,7 @@
         }
         else
         {
-            @if (prefix is not null)
+            @if (prefix.HasValue())
             {
                 <span style="@ChoiceGroup.Styles?.ItemPrefix" class="@ChoiceGroup.Classes?.ItemPrefix">@prefix</span>
             }
@@ -62,13 +72,12 @@
                 var imageSrc = ChoiceGroup.GetImageSrc(Item);
                 @if (imageSrc.HasValue())
                 {
-                    var imageSize = ChoiceGroup.GetImageSize(Item);
-
                     <div style="@ChoiceGroup.Styles?.ItemImageContainer" class="bit-chg-iic @ChoiceGroup.Classes?.ItemImageContainer">
-                        <div style="@(FormattableString.Invariant($"width:{imageSize.Width}px; height:{imageSize.Height}px;")) @ChoiceGroup.Styles?.ItemImageWrapper"
+                        <div style="@ChoiceGroup.GetImageWrapperCssStyles(Item)"
                              class="bit-chg-iiw @ChoiceGroup.Classes?.ItemImageWrapper">
-                            <img src="@(isChecked? ChoiceGroup.GetSelectedImageSrc(Item) : imageSrc)"
-                                 alt="@ChoiceGroup.GetImageAlt(Item)"
+                            @* An empty alt marks the image as decorative: the text of the item is the accessible name. *@
+                            <img src="@ChoiceGroup.GetImageSrcForState(Item, isChecked)"
+                                 alt="@(ChoiceGroup.GetImageAlt(Item) ?? string.Empty)"
                                  style="@ChoiceGroup.Styles?.ItemImage"
                                  class="@ChoiceGroup.Classes?.ItemImage">
                         </div>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs
index cb88793d90..944cae7f26 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs
@@ -61,17 +61,17 @@ public partial class BitChoiceGroupDemo
         },
         new()
         {
-            Name = "Inline",
+            Name = "Horizontal",
             Type = "bool",
             DefaultValue = "false",
-            Description = "Renders the icons and images in a single line with the items in the ChoiceGroup."
+            Description = "Renders the items in the ChoiceGroup horizontally."
         },
         new()
         {
-            Name = "Horizontal",
+            Name = "Inline",
             Type = "bool",
             DefaultValue = "false",
-            Description = "Renders the items in the ChoiceGroup horizontally."
+            Description = "Renders the icons and images in a single line with the items in the ChoiceGroup."
         },
         new()
         {
@@ -118,9 +118,9 @@ public partial class BitChoiceGroupDemo
         new()
         {
             Name = "Name",
-            Type = "string",
-            DefaultValue = "Guid.NewGuid().ToString()",
-            Description = "Name of the ChoiceGroup, this unique name is used to group each item into the same logical component."
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "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."
         },
         new()
         {
@@ -139,6 +139,12 @@ public partial class BitChoiceGroupDemo
             Description = "Removes the circle from the start of each item."
         },
         new()
+        {
+            Name = "OnBlur",
+            Type = "EventCallback<TItem>",
+            Description = "Callback for when an item of the ChoiceGroup loses focus.",
+        },
+        new()
         {
             Name = "OnChange",
             Type = "EventCallback<TValue?>",
@@ -151,6 +157,12 @@ public partial class BitChoiceGroupDemo
             Description = "Callback for when an enabled item is clicked, even the already selected one.",
         },
         new()
+        {
+            Name = "OnFocus",
+            Type = "EventCallback<TItem>",
+            Description = "Callback for when an item of the ChoiceGroup receives focus.",
+        },
+        new()
         {
             Name = "Options",
             Type = "RenderFragment?",
@@ -458,7 +470,7 @@ public partial class BitChoiceGroupDemo
                new()
                {
                    Name = "Value",
-                   Type = "string?",
+                   Type = "TValue?",
                    DefaultValue = "null",
                    Description = "The value returned when BitChoiceGroup item is checked.",
                },
@@ -466,7 +478,7 @@ public partial class BitChoiceGroupDemo
                {
                    Name = "Index",
                    Type = "int",
-                   DefaultValue = "null",
+                   DefaultValue = "0",
                    Description = "Index of the BitChoiceGroup item. This property's value is set by the component at render.",
                },
                new()
@@ -594,7 +606,7 @@ public partial class BitChoiceGroupDemo
                new()
                {
                    Name = "Value",
-                   Type = "string?",
+                   Type = "TValue?",
                    DefaultValue = "null",
                    Description = "The value returned when BitChoiceGroup option is checked.",
                },
@@ -602,7 +614,7 @@ public partial class BitChoiceGroupDemo
                {
                    Name = "Index",
                    Type = "int",
-                   DefaultValue = "null",
+                   DefaultValue = "0",
                    Description = "Index of the BitChoiceGroup option. This property's value is set by the component at render.",
                },
                new()
@@ -693,6 +705,13 @@ public partial class BitChoiceGroupDemo
                    Description = "Provides Width and Height for the image of the BitChoiceGroup option.",
                },
                new()
+               {
+                   Name = "Prefix",
+                   Type = "BitNameSelectorPair<TItem, string?>",
+                   DefaultValue = "new(nameof(BitChoiceGroupItem<TValue>.Prefix))",
+                   Description = "The text to show as a prefix for the BitChoiceGroup option.",
+               },
+               new()
                {
                    Name = "SelectedImageSrc",
                    Type = "BitNameSelectorPair<TItem, string?>",
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.scss
index aa7edd5062..bb4de350cb 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.scss
@@ -31,11 +31,11 @@
         font-weight: bold;
     }
 
+    // Only the look of the dot is customized here, never its position: the ChoiceGroup centers the dot
+    // in the circle itself, so a hard coded offset would fight that and depend on component internals.
     .custom-radio-btn::after {
         width: 8px;
         height: 8px;
-        border: none;
-        inset-inline-start: 6px;
         background-color: whitesmoke;
     }
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor
index 68dacdff2d..580088779a 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor
@@ -295,15 +295,19 @@
 </DemoExample>
 
 <DemoExample Title="Events" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
-    <div>Raises OnChange whenever the selected value changes, and OnClick on every click of an enabled item, including the already selected one.</div>
+    <div>Raises OnChange whenever the selected value changes, OnClick on every click of an enabled item, including the already selected one, and OnFocus and OnBlur as the focus moves between the items.</div>
     <br />
     <div class="example-content column">
         <BitChoiceGroup Label="Events" Items="basicCustoms" DefaultValue="@("A")"
                         OnChange="(string? value) => changedValue = value"
                         OnClick="(Order custom) => clickedCustom = custom.Name"
+                        OnFocus="(Order custom) => focusedCustom = custom.Name"
+                        OnBlur="(Order custom) => blurredCustom = custom.Name"
                         NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />
         <div>Changed value: <b>@changedValue</b></div>
         <div>Clicked custom: <b>@clickedCustom</b></div>
+        <div>Focused custom: <b>@focusedCustom</b></div>
+        <div>Blurred custom: <b>@blurredCustom</b></div>
     </div>
 </DemoExample>
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.cs
index 5f9751b23b..b7a9a978ca 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.cs
@@ -8,6 +8,8 @@ public partial class _BitChoiceGroupCustomDemo
 
     private string? changedValue;
     private string? clickedCustom;
+    private string? focusedCustom;
+    private string? blurredCustom;
 
     private int dynamicCounter = 3;
     private string? dynamicValue = "1";
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cs
index ccea06a155..343bd51213 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cs
@@ -652,12 +652,18 @@ public class Order
 <BitChoiceGroup Label=""Events"" Items=""basicCustoms"" DefaultValue=""@(""A"")""
                 OnChange=""(string? value) => changedValue = value""
                 OnClick=""(Order custom) => clickedCustom = custom.Name""
+                OnFocus=""(Order custom) => focusedCustom = custom.Name""
+                OnBlur=""(Order custom) => blurredCustom = custom.Name""
                 NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })"" />
 <div>Changed value: <b>@changedValue</b></div>
-<div>Clicked custom: <b>@clickedCustom</b></div>";
+<div>Clicked custom: <b>@clickedCustom</b></div>
+<div>Focused custom: <b>@focusedCustom</b></div>
+<div>Blurred custom: <b>@blurredCustom</b></div>";
     private readonly string example14CsharpCode = @"
 private string? changedValue;
 private string? clickedCustom;
+private string? focusedCustom;
+private string? blurredCustom;
 
 public class Order
 {
@@ -1017,8 +1023,6 @@ public class Order
     .custom-radio-btn::after {
         width: 8px;
         height: 8px;
-        border: none;
-        inset-inline-start: 6px;
         background-color: whitesmoke;
     }
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor
index 1929f0a6f4..a949fa8b7f 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor
@@ -189,14 +189,18 @@
 </DemoExample>
 
 <DemoExample Title="Events" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
-    <div>Raises OnChange whenever the selected value changes, and OnClick on every click of an enabled item, including the already selected one.</div>
+    <div>Raises OnChange whenever the selected value changes, OnClick on every click of an enabled item, including the already selected one, and OnFocus and OnBlur as the focus moves between the items.</div>
     <br />
     <div class="example-content column">
         <BitChoiceGroup Label="Events" Items="basicItems" DefaultValue="@("A")"
                         OnChange="(string? value) => changedValue = value"
-                        OnClick="(BitChoiceGroupItem<string> item) => clickedItem = item.Text" />
+                        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>
     </div>
 </DemoExample>
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.cs
index 5ac464b021..9352ab2f12 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.cs
@@ -8,6 +8,8 @@ public partial class _BitChoiceGroupItemDemo
 
     private string? changedValue;
     private string? clickedItem;
+    private string? focusedItem;
+    private string? blurredItem;
 
     private int dynamicCounter = 3;
     private string? dynamicValue = "1";
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs
index 72060beb2b..6417f33dfd 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs
@@ -437,12 +437,18 @@ private void HandleInvalidSubmit() { }
     private readonly string example14RazorCode = @"
 <BitChoiceGroup Label=""Events"" Items=""basicItems"" DefaultValue=""@(""A"")""
                 OnChange=""(string? value) => changedValue = value""
-                OnClick=""(BitChoiceGroupItem<string> item) => clickedItem = item.Text"" />
+                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>Clicked item: <b>@clickedItem</b></div>
+<div>Focused item: <b>@focusedItem</b></div>
+<div>Blurred item: <b>@blurredItem</b></div>";
     private readonly string example14CsharpCode = @"
 private string? changedValue;
 private string? clickedItem;
+private string? focusedItem;
+private string? blurredItem;
 
 private readonly List<BitChoiceGroupItem<string>> basicItems =
 [
@@ -712,8 +718,6 @@ Horizontal Inline />
     .custom-radio-btn::after {
         width: 8px;
         height: 8px;
-        border: none;
-        inset-inline-start: 6px;
         background-color: whitesmoke;
     }
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor
index d667cfea5e..a548240958 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor
@@ -370,12 +370,14 @@
 </DemoExample>
 
 <DemoExample Title="Events" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
-    <div>Raises OnChange whenever the selected value changes, and OnClick on every click of an enabled option, including the already selected one.</div>
+    <div>Raises OnChange whenever the selected value changes, OnClick on every click of an enabled option, including the already selected one, and OnFocus and OnBlur as the focus moves between the options.</div>
     <br />
     <div class="example-content column">
         <BitChoiceGroup Label="Events" DefaultValue="@("A")" TItem="BitChoiceGroupOption<string>" TValue="string"
                         OnChange="(string? value) => changedValue = value"
-                        OnClick="(BitChoiceGroupOption<string> option) => clickedOption = option.Text">
+                        OnClick="(BitChoiceGroupOption<string> option) => clickedOption = option.Text"
+                        OnFocus="(BitChoiceGroupOption<string> option) => focusedOption = option.Text"
+                        OnBlur="(BitChoiceGroupOption<string> option) => blurredOption = option.Text">
             <BitChoiceGroupOption Text="Option A" Value="@("A")" />
             <BitChoiceGroupOption Text="Option B" Value="@("B")" />
             <BitChoiceGroupOption Text="Option C" Value="@("C")" />
@@ -383,6 +385,8 @@
         </BitChoiceGroup>
         <div>Changed value: <b>@changedValue</b></div>
         <div>Clicked option: <b>@clickedOption</b></div>
+        <div>Focused option: <b>@focusedOption</b></div>
+        <div>Blurred option: <b>@blurredOption</b></div>
     </div>
 </DemoExample>
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.cs
index 2c31680413..145d71f6b8 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.cs
@@ -8,6 +8,8 @@ public partial class _BitChoiceGroupOptionDemo
 
     private string? changedValue;
     private string? clickedOption;
+    private string? focusedOption;
+    private string? blurredOption;
 
     private int dynamicCounter = 3;
     private string? dynamicValue = "1";
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs
index 2ff5034e18..ebe4fc2a1a 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs
@@ -365,17 +365,23 @@ private void HandleValidSubmit() { }
     private readonly string example14RazorCode = @"
 <BitChoiceGroup Label=""Events"" DefaultValue=""@(""A"")"" TItem=""BitChoiceGroupOption<string>"" TValue=""string""
                 OnChange=""(string? value) => changedValue = value""
-                OnClick=""(BitChoiceGroupOption<string> option) => clickedOption = option.Text"">
+                OnClick=""(BitChoiceGroupOption<string> option) => clickedOption = option.Text""
+                OnFocus=""(BitChoiceGroupOption<string> option) => focusedOption = option.Text""
+                OnBlur=""(BitChoiceGroupOption<string> option) => blurredOption = option.Text"">
     <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
     <BitChoiceGroupOption Text=""Option B"" Value=""@(""B"")"" />
     <BitChoiceGroupOption Text=""Option C"" Value=""@(""C"")"" />
     <BitChoiceGroupOption Text=""Option D"" Value=""@(""D"")"" />
 </BitChoiceGroup>
 <div>Changed value: <b>@changedValue</b></div>
-<div>Clicked option: <b>@clickedOption</b></div>";
+<div>Clicked option: <b>@clickedOption</b></div>
+<div>Focused option: <b>@focusedOption</b></div>
+<div>Blurred option: <b>@blurredOption</b></div>";
     private readonly string example14CsharpCode = @"
 private string? changedValue;
-private string? clickedOption;";
+private string? clickedOption;
+private string? focusedOption;
+private string? blurredOption;";
 
     private readonly string example15RazorCode = @"
 <BitButton OnClick=""AddDynamicOption"">Add item</BitButton>
@@ -672,8 +678,6 @@ private void ReverseDynamicOptions()
     .custom-radio-btn::after {
         width: 8px;
         height: 8px;
-        border: none;
-        inset-inline-start: 6px;
         background-color: whitesmoke;
     }
 
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupAccessibilityTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupAccessibilityTests.cs
new file mode 100644
index 0000000000..869faec5d4
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupAccessibilityTests.cs
@@ -0,0 +1,214 @@
+using System.Collections.Generic;
+using System.Linq;
+using Bunit;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+
+namespace Bit.BlazorUI.Tests.Components.Inputs.ChoiceGroup;
+
+/// <summary>
+/// Covers the accessibility contract of the ChoiceGroup: the accessible name of the group, the disabled
+/// state of its inputs, and the id/IDREF wiring between each input, its label and its description.
+/// </summary>
+[TestClass]
+public class BitChoiceGroupAccessibilityTests : BunitTestContext
+{
+    private static List<BitChoiceGroupItem<string>> GetItems() =>
+    [
+        new() { Text = "Item A", Value = "A" },
+        new() { Text = "Item B", Value = "B" },
+    ];
+
+    [TestMethod]
+    public void BitChoiceGroupShouldDisableAllInputsWhenTheGroupIsDisabled()
+    {
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, GetItems());
+            parameters.Add(p => p.IsEnabled, false);
+        });
+
+        var inputs = component.FindAll(".bit-chg-icn input");
+
+        Assert.AreEqual(2, inputs.Count);
+        Assert.IsTrue(inputs.All(i => i.HasAttribute("disabled")));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldDisableOnlyTheDisabledItemWhenTheGroupIsEnabled()
+    {
+        var items = GetItems();
+        items[1].IsEnabled = false;
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+        });
+
+        var inputs = component.FindAll(".bit-chg-icn input");
+
+        Assert.IsFalse(inputs[0].HasAttribute("disabled"));
+        Assert.IsTrue(inputs[1].HasAttribute("disabled"));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldMarkTheItemsOfADisabledGroupAsDisabled()
+    {
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, GetItems());
+            parameters.Add(p => p.IsEnabled, false);
+        });
+
+        Assert.IsTrue(component.FindAll(".bit-chg-icn").All(i => i.ClassList.Contains("bit-chg-ids")));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldNotRenderAnEmptyLabelElement()
+    {
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, GetItems());
+        });
+
+        // Only the labels of the items, no empty group label.
+        Assert.AreEqual(2, component.FindAll("label").Count);
+        Assert.IsTrue(component.FindAll("label").All(l => l.HasAttribute("for")));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldNotReferenceAMissingLabelWithAriaLabelledBy()
+    {
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, GetItems());
+            parameters.Add(p => p.AriaLabel, "Choose one");
+        });
+
+        var root = component.Find(".bit-chg");
+
+        // aria-labelledby wins over aria-label, so it must not be emitted while there is no label element.
+        Assert.IsFalse(root.HasAttribute("aria-labelledby"));
+        Assert.AreEqual("Choose one", root.GetAttribute("aria-label"));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldReferenceItsLabelWithAriaLabelledBy()
+    {
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, GetItems());
+            parameters.Add(p => p.Label, "Pick one");
+        });
+
+        var labelledBy = component.Find(".bit-chg").GetAttribute("aria-labelledby");
+
+        Assert.IsNotNull(labelledBy);
+        Assert.AreEqual("Pick one", component.Find($"#{labelledBy}").TextContent);
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldReferenceItsLabelTemplateWithAriaLabelledBy()
+    {
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, GetItems());
+            parameters.Add(p => p.LabelTemplate, "<span>Templated</span>");
+        });
+
+        var labelledBy = component.Find(".bit-chg").GetAttribute("aria-labelledby");
+
+        Assert.IsNotNull(labelledBy);
+        Assert.AreEqual("Templated", component.Find($"#{labelledBy}").TextContent);
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldGenerateValidInputIdsForValuesWithSpecialCharacters()
+    {
+        var items = new List<BitChoiceGroupItem<string>>
+        {
+            new() { Text = "A", Value = "Prefer not to say", Description = "desc" },
+            new() { Text = "B", Value = "with \"quotes\" & #hash" },
+        };
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+        });
+
+        var inputs = component.FindAll(".bit-chg-icn input");
+        var labels = component.FindAll(".bit-chg-icn label");
+
+        foreach (var input in inputs)
+        {
+            Assert.IsFalse(string.IsNullOrWhiteSpace(input.Id));
+            Assert.IsFalse(input.Id!.Any(char.IsWhiteSpace), $"the id '{input.Id}' contains whitespace");
+        }
+
+        Assert.AreEqual(inputs.Count, inputs.Select(i => i.Id).Distinct().Count());
+
+        for (var i = 0; i < inputs.Count; i++)
+        {
+            Assert.AreEqual(inputs[i].Id, labels[i].GetAttribute("for"));
+        }
+
+        var describedBy = inputs[0].GetAttribute("aria-describedby");
+        Assert.IsNotNull(describedBy);
+        Assert.AreEqual(1, component.FindAll($"#{describedBy}").Count);
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldGenerateUniqueInputIdsForDuplicateValues()
+    {
+        var items = new List<BitChoiceGroupItem<string>>
+        {
+            new() { Text = "First", Value = "same" },
+            new() { Text = "Second", Value = "same" },
+        };
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+        });
+
+        var ids = component.FindAll(".bit-chg-icn input").Select(i => i.Id).ToList();
+
+        Assert.AreEqual(2, ids.Distinct().Count());
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldNotReferenceADescriptionThatIsNotRendered()
+    {
+        var items = new List<BitChoiceGroupItem<string>>
+        {
+            new() { Text = "A", Value = "A", Description = "desc A" },
+        };
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.ItemLabelTemplate, (BitChoiceGroupItem<string> item) => builder => builder.AddContent(0, item.Text));
+        });
+
+        Assert.AreEqual(0, component.FindAll(".bit-chg-dsc").Count);
+        Assert.IsFalse(component.Find(".bit-chg-icn input").HasAttribute("aria-describedby"));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldReferenceARenderedDescription()
+    {
+        var items = new List<BitChoiceGroupItem<string>>
+        {
+            new() { Text = "A", Value = "A", Description = "desc A" },
+        };
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+        });
+
+        var describedBy = component.Find(".bit-chg-icn input").GetAttribute("aria-describedby");
+
+        Assert.IsNotNull(describedBy);
+        Assert.AreEqual("desc A", component.Find($"#{describedBy}").TextContent);
+    }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupEventsTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupEventsTests.cs
new file mode 100644
index 0000000000..cf55eebf4b
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupEventsTests.cs
@@ -0,0 +1,167 @@
+using System.Collections.Generic;
+using System.Linq;
+using Bunit;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+
+namespace Bit.BlazorUI.Tests.Components.Inputs.ChoiceGroup;
+
+/// <summary>
+/// Covers the callbacks of the ChoiceGroup and which item the base class exposes as its InputElement.
+/// </summary>
+[TestClass]
+public class BitChoiceGroupEventsTests : BunitTestContext
+{
+    private static List<BitChoiceGroupItem<string>> GetItems() =>
+    [
+        new() { Text = "Item A", Value = "A" },
+        new() { Text = "Item B", Value = "B" },
+        new() { Text = "Item C", Value = "C" },
+    ];
+
+    [TestMethod]
+    public void BitChoiceGroupShouldRaiseOnFocusAndOnBlurWithTheItem()
+    {
+        BitChoiceGroupItem<string>? focused = null;
+        BitChoiceGroupItem<string>? blurred = null;
+
+        var items = GetItems();
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.OnFocus, (BitChoiceGroupItem<string> item) => focused = item);
+            parameters.Add(p => p.OnBlur, (BitChoiceGroupItem<string> item) => blurred = item);
+        });
+
+        var inputs = component.FindAll(".bit-chg-icn input");
+
+        inputs[1].Focus();
+        Assert.AreSame(items[1], focused);
+
+        inputs[1].Blur();
+        Assert.AreSame(items[1], blurred);
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldRaiseOnClickForTheAlreadySelectedItem()
+    {
+        var clicks = new List<string?>();
+        var items = GetItems();
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.DefaultValue, "A");
+            parameters.Add(p => p.OnClick, (BitChoiceGroupItem<string> item) => clicks.Add(item.Value));
+        });
+
+        component.FindAll(".bit-chg-icn input")[0].Click();
+        component.FindAll(".bit-chg-icn input")[0].Click();
+
+        CollectionAssert.AreEqual(new[] { "A", "A" }, clicks.ToArray());
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldNotRaiseOnClickForADisabledItem()
+    {
+        var clicks = new List<string?>();
+        var items = GetItems();
+        items[1].IsEnabled = false;
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.OnClick, (BitChoiceGroupItem<string> item) => clicks.Add(item.Value));
+        });
+
+        component.FindAll(".bit-chg-icn input")[1].Click();
+
+        Assert.AreEqual(0, clicks.Count);
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldNotChangeTheValueWhenReadOnly()
+    {
+        var value = "A";
+        var items = GetItems();
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.ReadOnly, true);
+            parameters.Bind(p => p.Value, value, v => value = v);
+        });
+
+        component.FindAll(".bit-chg-icn input")[2].Change(true);
+
+        Assert.AreEqual("A", value);
+        Assert.IsTrue(items[0].IsSelected);
+        Assert.IsFalse(items[2].IsSelected);
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldNotChangeTheValueWhenTheGroupIsDisabled()
+    {
+        var value = "A";
+        var items = GetItems();
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.IsEnabled, false);
+            parameters.Bind(p => p.Value, value, v => value = v);
+        });
+
+        component.FindAll(".bit-chg-icn input")[2].Change(true);
+
+        Assert.AreEqual("A", value);
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldAutoFocusTheCheckedItem()
+    {
+        RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, GetItems());
+            parameters.Add(p => p.DefaultValue, "B");
+            parameters.Add(p => p.AutoFocus, true);
+        });
+
+        Assert.AreEqual(1, FocusInvocationCount());
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldAutoFocusTheFirstEnabledItemWhenNothingIsChecked()
+    {
+        var items = GetItems();
+        items[0].IsEnabled = false;
+
+        RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.AutoFocus, true);
+        });
+
+        // Tabbing into the group skips the disabled first radio, so the focus target has to skip it too,
+        // otherwise the auto focus lands on a disabled input and silently does nothing.
+        Assert.AreEqual(1, FocusInvocationCount());
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldNotAutoFocusWhenReadOnly()
+    {
+        RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, GetItems());
+            parameters.Add(p => p.AutoFocus, true);
+            parameters.Add(p => p.ReadOnly, true);
+        });
+
+        Assert.AreEqual(0, FocusInvocationCount());
+    }
+
+    private int FocusInvocationCount()
+    {
+        return Context.JSInterop.Invocations.Count(i => i.Identifier.Contains("focus", System.StringComparison.OrdinalIgnoreCase));
+    }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupItemContentTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupItemContentTests.cs
new file mode 100644
index 0000000000..d9c51344ae
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupItemContentTests.cs
@@ -0,0 +1,126 @@
+using System.Collections.Generic;
+using Bunit;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+
+namespace Bit.BlazorUI.Tests.Components.Inputs.ChoiceGroup;
+
+/// <summary>
+/// Covers the built-in content of an item: its prefix, its image (size, alt and the checked state image)
+/// and how they interact with the templates of the component.
+/// </summary>
+[TestClass]
+public class BitChoiceGroupItemContentTests : BunitTestContext
+{
+    [TestMethod]
+    public void BitChoiceGroupShouldNotSizeTheImageWrapperWhenNoImageSizeIsGiven()
+    {
+        var items = new List<BitChoiceGroupItem<string>>
+        {
+            new() { Text = "A", Value = "A", ImageSrc = "a.png" },
+        };
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+        });
+
+        // A 0x0 wrapper would hide the image, since the image itself is sized to 100% of the wrapper.
+        Assert.AreEqual(string.Empty, component.Find(".bit-chg-iiw").GetAttribute("style"));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldSizeTheImageWrapperFromTheImageSize()
+    {
+        var items = new List<BitChoiceGroupItem<string>>
+        {
+            new() { Text = "A", Value = "A", ImageSrc = "a.png", ImageSize = new BitImageSize(32, 24) },
+        };
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.Styles, new BitChoiceGroupClassStyles { ItemImageWrapper = "opacity:0.5" });
+        });
+
+        Assert.AreEqual("width:32px;height:24px;opacity:0.5", component.Find(".bit-chg-iiw").GetAttribute("style"));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldKeepTheImageOfACheckedItemWithoutASelectedImage()
+    {
+        var items = new List<BitChoiceGroupItem<string>>
+        {
+            new() { Text = "A", Value = "A", ImageSrc = "a.png" },
+        };
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.Value, "A");
+        });
+
+        Assert.AreEqual("a.png", component.Find(".bit-chg-iiw img").GetAttribute("src"));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldSwapToTheSelectedImageOfACheckedItem()
+    {
+        var items = new List<BitChoiceGroupItem<string>>
+        {
+            new() { Text = "A", Value = "A", ImageSrc = "a.png", SelectedImageSrc = "a-selected.png" },
+        };
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+        });
+
+        Assert.AreEqual("a.png", component.Find(".bit-chg-iiw img").GetAttribute("src"));
+
+        component.Render(parameters => parameters.Add(p => p.Value, "A"));
+
+        Assert.AreEqual("a-selected.png", component.Find(".bit-chg-iiw img").GetAttribute("src"));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldAlwaysRenderAnAltAttributeOnTheImage()
+    {
+        var items = new List<BitChoiceGroupItem<string>>
+        {
+            new() { Text = "A", Value = "A", ImageSrc = "a.png" },
+            new() { Text = "B", Value = "B", ImageSrc = "b.png", ImageAlt = "the b image" },
+        };
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+        });
+
+        var images = component.FindAll(".bit-chg-iiw img");
+
+        Assert.IsTrue(images[0].HasAttribute("alt"));
+        Assert.AreEqual(string.Empty, images[0].GetAttribute("alt"));
+        Assert.AreEqual("the b image", images[1].GetAttribute("alt"));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldFallBackToTheItemPrefixTemplateForAnEmptyPrefix()
+    {
+        var items = new List<BitChoiceGroupItem<string>>
+        {
+            new() { Text = "A", Value = "A", Prefix = string.Empty },
+            new() { Text = "B", Value = "B", Prefix = "$10 — " },
+        };
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.ItemPrefixTemplate, (BitChoiceGroupItem<string> item) => builder => builder.AddContent(0, $"[{item.Index}]"));
+        });
+
+        var labels = component.FindAll(".bit-chg-itl");
+
+        StringAssert.Contains(labels[0].TextContent, "[0]");
+        StringAssert.Contains(labels[1].TextContent, "$10 — ");
+    }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupOptionsApiTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupOptionsApiTests.cs
new file mode 100644
index 0000000000..35d40ca106
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupOptionsApiTests.cs
@@ -0,0 +1,129 @@
+using System.Linq;
+using Bunit;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+
+namespace Bit.BlazorUI.Tests.Components.Inputs.ChoiceGroup;
+
+/// <summary>
+/// The same behaviours as the items API, exercised through the options (ChildContent/Options) API, where
+/// the items are registered by the option components themselves instead of coming from an Items collection.
+/// </summary>
+[TestClass]
+public class BitChoiceGroupOptionsApiTests : BunitTestContext
+{
+    [TestMethod]
+    public void BitChoiceGroupShouldDisableAllOptionInputsWhenTheGroupIsDisabled()
+    {
+        var component = RenderComponent<BitChoiceGroupOptionsTest>(parameters => parameters.Add(p => p.IsEnabled, false));
+
+        var inputs = component.FindAll(".bit-chg-icn input");
+
+        Assert.AreEqual(4, inputs.Count);
+        Assert.IsTrue(inputs.All(i => i.HasAttribute("disabled")));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldDisableOnlyTheDisabledOptionWhenTheGroupIsEnabled()
+    {
+        var component = RenderComponent<BitChoiceGroupOptionsTest>();
+
+        var inputs = component.FindAll(".bit-chg-icn input");
+
+        Assert.IsFalse(inputs[0].HasAttribute("disabled"));
+        Assert.IsFalse(inputs[1].HasAttribute("disabled"));
+        Assert.IsFalse(inputs[2].HasAttribute("disabled"));
+        Assert.IsTrue(inputs[3].HasAttribute("disabled"));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldGenerateUniqueInputIdsForTheOptions()
+    {
+        var component = RenderComponent<BitChoiceGroupOptionsTest>();
+
+        var inputs = component.FindAll(".bit-chg-icn input");
+        var labels = component.FindAll(".bit-chg-icn label");
+
+        Assert.AreEqual(4, inputs.Select(i => i.Id).Distinct().Count());
+
+        for (var i = 0; i < inputs.Count; i++)
+        {
+            Assert.AreEqual(inputs[i].Id, labels[i].GetAttribute("for"));
+        }
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldUpdateTheIsSelectedOfTheOptionsWhenTheValueChanges()
+    {
+        var component = RenderComponent<BitChoiceGroupOptionsTest>(parameters => parameters.Add(p => p.Value, "first"));
+
+        Assert.AreEqual("First", SelectedOptionText(component));
+
+        component.Render(parameters => parameters.Add(p => p.Value, "second"));
+
+        Assert.AreEqual("Second", SelectedOptionText(component));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldKeepTheBoundValueWhenAnOptionIsAddedLater()
+    {
+        var component = RenderComponent<BitChoiceGroupOptionsTest>(parameters => parameters.Add(p => p.ShowSecond, false));
+
+        // The user picks the second rendered option, which is "Third".
+        component.FindAll(".bit-chg-icn input")[1].Change(true);
+        Assert.AreEqual("third", component.Instance.SelectedValue);
+
+        // An option that appears afterwards registers itself and must not disturb the selection.
+        component.Render(parameters => parameters.Add(p => p.ShowSecond, true));
+
+        Assert.AreEqual("third", component.Instance.SelectedValue);
+        Assert.AreEqual("Third", SelectedOptionText(component));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldNotReapplyTheDefaultValueWhenAnOptionIsAddedLater()
+    {
+        var component = RenderComponent<BitChoiceGroupUncontrolledOptionsTest>(parameters =>
+        {
+            parameters.Add(p => p.ShowSecond, false);
+            parameters.Add(p => p.DefaultValue, "first");
+        });
+
+        // The user picks the second rendered option, which is "Third".
+        component.FindAll(".bit-chg-icn input")[1].Change(true);
+        Assert.AreEqual("third", component.Instance.SelectedValue);
+
+        // An option that appears afterwards registers itself and must not revert that choice
+        // back to the DefaultValue, which has already been applied once.
+        component.Render(parameters => parameters.Add(p => p.ShowSecond, true));
+
+        var selected = component.FindComponents<BitChoiceGroupOption<string>>()
+                                .Where(o => o.Instance.IsSelected)
+                                .Select(o => o.Instance.Text)
+                                .SingleOrDefault();
+
+        Assert.AreEqual("Third", selected);
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldRemoveAnOptionThatIsNoLongerRendered()
+    {
+        var component = RenderComponent<BitChoiceGroupOptionsTest>();
+
+        Assert.AreEqual(4, component.FindAll(".bit-chg-icn").Count);
+
+        component.Render(parameters => parameters.Add(p => p.ShowSecond, false));
+
+        Assert.AreEqual(3, component.FindAll(".bit-chg-icn").Count);
+
+        var options = component.FindComponents<BitChoiceGroupOption<string>>();
+        CollectionAssert.AreEqual(new[] { 0, 1, 2 }, options.Select(o => o.Instance.Index).ToArray());
+    }
+
+    private static string? SelectedOptionText(IRenderedComponent<BitChoiceGroupOptionsTest> component)
+    {
+        return component.FindComponents<BitChoiceGroupOption<string>>()
+                        .Where(o => o.Instance.IsSelected)
+                        .Select(o => o.Instance.Text)
+                        .SingleOrDefault();
+    }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupOptionsTest.razor b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupOptionsTest.razor
new file mode 100644
index 0000000000..8fed08f0d4
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupOptionsTest.razor
@@ -0,0 +1,45 @@
+@namespace Bit.BlazorUI.Tests.Components.Inputs.ChoiceGroup
+
+@* A ChoiceGroup driven through the options API in controlled mode (a bound Value). *@
+
+<BitChoiceGroup TItem="BitChoiceGroupOption<string>" TValue="string"
+                IsEnabled="IsEnabled"
+                @bind-Value="_value">
+    <BitChoiceGroupOption Text="First" Value="@("first")" />
+    @if (ShowSecond)
+    {
+        <BitChoiceGroupOption Text="Second" Value="@("second")" />
+    }
+    <BitChoiceGroupOption Text="Third" Value="@("third")" />
+    <BitChoiceGroupOption Text="Fourth" Value="@("fourth")" IsEnabled="false" />
+</BitChoiceGroup>
+
+@code {
+    private string? _value;
+    private string? _lastValue;
+
+    [Parameter] public bool IsEnabled { get; set; } = true;
+
+    [Parameter] public bool ShowSecond { get; set; } = true;
+
+    /// <summary>
+    /// Pushes a value into the group from the outside, mimicking a model-driven assignment.
+    /// </summary>
+    [Parameter] public string? Value { get; set; }
+
+    /// <summary>
+    /// The value the group has written back, so a test can assert what the binding produced.
+    /// </summary>
+    public string? SelectedValue => _value;
+
+    protected override void OnParametersSet()
+    {
+        if (Value != _lastValue)
+        {
+            _lastValue = Value;
+            _value = Value;
+        }
+
+        base.OnParametersSet();
+    }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupStateTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupStateTests.cs
new file mode 100644
index 0000000000..e567647e76
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupStateTests.cs
@@ -0,0 +1,173 @@
+using System.Collections.Generic;
+using System.Linq;
+using Bunit;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+
+namespace Bit.BlazorUI.Tests.Components.Inputs.ChoiceGroup;
+
+/// <summary>
+/// Covers how the ChoiceGroup keeps its own state (the rendered items, the IsSelected of each item and the
+/// applied DefaultValue) in sync with the parameters it is given.
+/// </summary>
+[TestClass]
+public class BitChoiceGroupStateTests : BunitTestContext
+{
+    private static List<BitChoiceGroupItem<string>> GetItems() =>
+    [
+        new() { Text = "Item A", Value = "A" },
+        new() { Text = "Item B", Value = "B" },
+        new() { Text = "Item C", Value = "C" },
+    ];
+
+    [TestMethod]
+    public void BitChoiceGroupShouldClearItemsWhenItemsBecomeEmpty()
+    {
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, GetItems());
+        });
+
+        Assert.AreEqual(3, component.FindAll(".bit-chg-icn").Count);
+
+        component.Render(parameters => parameters.Add(p => p.Items, new List<BitChoiceGroupItem<string>>()));
+
+        Assert.AreEqual(0, component.FindAll(".bit-chg-icn").Count);
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldDetectInPlaceMutationOfTheSameItemsCollection()
+    {
+        var items = GetItems();
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+        });
+
+        Assert.AreEqual(3, component.FindAll(".bit-chg-icn").Count);
+
+        items.Add(new() { Text = "Item D", Value = "D" });
+
+        component.Render(parameters => parameters.Add(p => p.Items, items));
+
+        Assert.AreEqual(4, component.FindAll(".bit-chg-icn").Count);
+        Assert.AreEqual(3, items[3].Index);
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldUpdateIsSelectedWhenTheValueChangesFromOutside()
+    {
+        var items = GetItems();
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.Value, "A");
+        });
+
+        Assert.IsTrue(items[0].IsSelected);
+        Assert.IsFalse(items[2].IsSelected);
+
+        component.Render(parameters => parameters.Add(p => p.Value, "C"));
+
+        Assert.IsFalse(items[0].IsSelected);
+        Assert.IsTrue(items[2].IsSelected);
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldClearIsSelectedWhenTheValueIsCleared()
+    {
+        var items = GetItems();
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.Value, "B");
+        });
+
+        Assert.IsTrue(items[1].IsSelected);
+
+        component.Render(parameters => parameters.Add(p => p.Value, (string?)null));
+
+        Assert.IsFalse(items.Any(i => i.IsSelected));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldSetIsSelectedOnTheClickedItem()
+    {
+        var items = GetItems();
+        var value = "A";
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Bind(p => p.Value, value, v => value = v);
+        });
+
+        component.FindAll(".bit-chg-icn input")[2].Change(true);
+
+        Assert.AreEqual("C", value);
+        Assert.IsFalse(items[0].IsSelected);
+        Assert.IsTrue(items[2].IsSelected);
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldNotReapplyDefaultValueWhenTheItemsChange()
+    {
+        var items = GetItems();
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.DefaultValue, "A");
+        });
+
+        Assert.AreEqual("A", component.Instance.Value);
+
+        // The user picks another item while in uncontrolled mode.
+        component.FindAll(".bit-chg-icn input")[1].Change(true);
+        Assert.AreEqual("B", component.Instance.Value);
+
+        // A later change of the items must not revert that choice back to the DefaultValue.
+        items.Add(new() { Text = "Item D", Value = "D" });
+        component.Render(parameters => parameters.Add(p => p.Items, items));
+
+        Assert.AreEqual("B", component.Instance.Value);
+        Assert.IsTrue(items[1].IsSelected);
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldApplyANewlyAssignedDefaultValue()
+    {
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, GetItems());
+            parameters.Add(p => p.DefaultValue, "A");
+        });
+
+        Assert.AreEqual("A", component.Instance.Value);
+
+        component.Render(parameters => parameters.Add(p => p.DefaultValue, "C"));
+
+        Assert.AreEqual("C", component.Instance.Value);
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldKeepTheIndexOfTheItemsInSyncWithTheCollection()
+    {
+        var items = GetItems();
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+        });
+
+        CollectionAssert.AreEqual(new[] { 0, 1, 2 }, items.Select(i => i.Index).ToArray());
+
+        var reversed = Enumerable.Reverse(items).ToList();
+        component.Render(parameters => parameters.Add(p => p.Items, reversed));
+
+        CollectionAssert.AreEqual(new[] { 0, 1, 2 }, reversed.Select(i => i.Index).ToArray());
+        Assert.AreEqual(2, items[0].Index);
+    }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupStyleClassTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupStyleClassTests.cs
new file mode 100644
index 0000000000..19414b2e86
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupStyleClassTests.cs
@@ -0,0 +1,141 @@
+using System.Collections.Generic;
+using System.Linq;
+using Bunit;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+
+namespace Bit.BlazorUI.Tests.Components.Inputs.ChoiceGroup;
+
+/// <summary>
+/// Covers how the per-item Style/Class, the Styles/Classes of the component and the built-in state markers
+/// are composed onto the container of each item.
+/// </summary>
+[TestClass]
+public class BitChoiceGroupStyleClassTests : BunitTestContext
+{
+    private static List<BitChoiceGroupItem<string>> GetItems() =>
+    [
+        new() { Text = "Item A", Value = "A" },
+        new() { Text = "Item B", Value = "B" },
+    ];
+
+    [TestMethod]
+    public void BitChoiceGroupShouldSeparateTheItemStylesWithASemicolon()
+    {
+        var items = GetItems();
+        items[0].Style = "color:red";
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.Value, "A");
+            parameters.Add(p => p.Styles, new BitChoiceGroupClassStyles
+            {
+                ItemContainer = "padding:8px",
+                ItemChecked = "border:1px solid red"
+            });
+        });
+
+        var style = component.FindAll(".bit-chg-icn")[0].GetAttribute("style");
+
+        Assert.AreEqual("color:red;padding:8px;border:1px solid red", style);
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldNotApplyTheCheckedStyleToUncheckedItems()
+    {
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, GetItems());
+            parameters.Add(p => p.Value, "A");
+            parameters.Add(p => p.Styles, new BitChoiceGroupClassStyles { ItemChecked = "border:1px solid red" });
+        });
+
+        var containers = component.FindAll(".bit-chg-icn");
+
+        Assert.AreEqual("border:1px solid red", containers[0].GetAttribute("style"));
+        Assert.AreEqual(string.Empty, containers[1].GetAttribute("style"));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldApplyTheCheckedClassAlongsideTheCheckedStyleWhenAnItemTemplateIsUsed()
+    {
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, GetItems());
+            parameters.Add(p => p.Value, "A");
+            parameters.Add(p => p.ItemTemplate, (BitChoiceGroupItem<string> item) => builder => builder.AddContent(0, item.Text));
+            parameters.Add(p => p.Classes, new BitChoiceGroupClassStyles { ItemChecked = "custom-checked" });
+            parameters.Add(p => p.Styles, new BitChoiceGroupClassStyles { ItemChecked = "border:1px solid red" });
+        });
+
+        var containers = component.FindAll(".bit-chg-icn");
+
+        Assert.IsTrue(containers[0].ClassList.Contains("custom-checked"));
+        Assert.IsTrue(containers[0].ClassList.Contains("bit-chg-ich"));
+        Assert.AreEqual("border:1px solid red", containers[0].GetAttribute("style"));
+
+        Assert.IsFalse(containers[1].ClassList.Contains("custom-checked"));
+        Assert.IsFalse(containers[1].ClassList.Contains("bit-chg-ich"));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldMarkADisabledItemAsDisabledWhenAnItemTemplateIsUsed()
+    {
+        var items = GetItems();
+        items[1].IsEnabled = false;
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.ItemTemplate, (BitChoiceGroupItem<string> item) => builder => builder.AddContent(0, item.Text));
+        });
+
+        var containers = component.FindAll(".bit-chg-icn");
+
+        Assert.IsFalse(containers[0].ClassList.Contains("bit-chg-ids"));
+        Assert.IsTrue(containers[1].ClassList.Contains("bit-chg-ids"));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldNotMarkTheItemAsHavingAnImageWhenATemplateReplacesTheContent()
+    {
+        var items = new List<BitChoiceGroupItem<string>>
+        {
+            new() { Text = "A", Value = "A", ImageSrc = "a.png" },
+        };
+
+        var withoutTemplate = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+        });
+
+        Assert.IsTrue(withoutTemplate.Find(".bit-chg-icn").ClassList.Contains("bit-chg-ihi"));
+
+        var withTemplate = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.ItemTemplate, (BitChoiceGroupItem<string> item) => builder => builder.AddContent(0, item.Text));
+        });
+
+        Assert.IsFalse(withTemplate.Find(".bit-chg-icn").ClassList.Contains("bit-chg-ihi"));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldComposeTheItemClassWithTheItemContainerClass()
+    {
+        var items = GetItems();
+        items[0].Class = "item-class";
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.Classes, new BitChoiceGroupClassStyles { ItemContainer = "container-class" });
+        });
+
+        var container = component.FindAll(".bit-chg-icn")[0];
+
+        Assert.IsTrue(container.ClassList.Contains("bit-chg-icn"));
+        Assert.IsTrue(container.ClassList.Contains("item-class"));
+        Assert.IsTrue(container.ClassList.Contains("container-class"));
+    }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupUncontrolledOptionsTest.razor b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupUncontrolledOptionsTest.razor
new file mode 100644
index 0000000000..10d2465e07
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupUncontrolledOptionsTest.razor
@@ -0,0 +1,25 @@
+@namespace Bit.BlazorUI.Tests.Components.Inputs.ChoiceGroup
+
+@* A ChoiceGroup driven through the options API in uncontrolled mode: no bound Value, only a DefaultValue. *@
+
+<BitChoiceGroup TItem="BitChoiceGroupOption<string>" TValue="string"
+                DefaultValue="DefaultValue"
+                OnChange="(string? value) => SelectedValue = value">
+    <BitChoiceGroupOption Text="First" Value="@("first")" />
+    @if (ShowSecond)
+    {
+        <BitChoiceGroupOption Text="Second" Value="@("second")" />
+    }
+    <BitChoiceGroupOption Text="Third" Value="@("third")" />
+</BitChoiceGroup>
+
+@code {
+    [Parameter] public bool ShowSecond { get; set; } = true;
+
+    [Parameter] public string? DefaultValue { get; set; }
+
+    /// <summary>
+    /// The last value the group reported through its OnChange callback.
+    /// </summary>
+    public string? SelectedValue { get; private set; }
+}

From fa690a858cabd55e0b09e0176d8954cd7f0d3119 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Sun, 26 Jul 2026 12:09:22 +0330
Subject: [PATCH 04/19] fix local review findings

---
 .../Inputs/ChoiceGroup/BitChoiceGroup.razor   |  20 ++
 .../ChoiceGroup/BitChoiceGroup.razor.cs       | 104 ++++++++-
 .../Inputs/ChoiceGroup/BitChoiceGroup.scss    | 111 ++++++++-
 .../ChoiceGroup/BitChoiceGroupClassStyles.cs  |  10 +
 .../Inputs/ChoiceGroup/BitChoiceGroupItem.cs  |  11 +
 .../BitChoiceGroupNameSelectors.cs            |  10 +
 .../ChoiceGroup/BitChoiceGroupOption.cs       |  11 +
 .../ChoiceGroup/_BitChoiceGroupItem.razor     |  23 +-
 .../ChoiceGroup/BitChoiceGroupDemo.razor      |   4 +-
 .../ChoiceGroup/BitChoiceGroupDemo.razor.cs   | 133 ++++++++++-
 .../ChoiceGroup/BitChoiceGroupDemo.razor.scss |   6 +
 .../Components/Inputs/ChoiceGroup/Order.cs    |   2 +
 .../_BitChoiceGroupCustomDemo.razor           | 182 +++++++++++++--
 .../_BitChoiceGroupCustomDemo.razor.cs        |  23 ++
 ..._BitChoiceGroupCustomDemo.razor.samples.cs | 210 ++++++++++++++++--
 .../ChoiceGroup/_BitChoiceGroupItemDemo.razor | 129 +++++++++--
 .../_BitChoiceGroupItemDemo.razor.cs          |  23 ++
 .../_BitChoiceGroupItemDemo.razor.samples.cs  | 125 +++++++++--
 .../_BitChoiceGroupOptionDemo.razor           | 193 ++++++++++++++--
 .../_BitChoiceGroupOptionDemo.razor.cs        |   2 +
 ..._BitChoiceGroupOptionDemo.razor.samples.cs | 143 +++++++++++-
 .../BitChoiceGroupAccessibilityTests.cs       |  86 +++++++
 .../BitChoiceGroupItemContentTests.cs         |  59 +++++
 .../BitChoiceGroupStyleClassTests.cs          |  80 +++++++
 .../Inputs/ChoiceGroup/BitChoiceGroupTests.cs |  12 +-
 25 files changed, 1583 insertions(+), 129 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor
index a9bffc9b52..fb0980b0a1 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor
@@ -3,6 +3,8 @@
 @typeparam TItem
 @typeparam TValue
 
+@* The invalid state belongs to the choice as a whole, not to the option that happens to be focused,
+   so the group carries the aria-invalid too and not only the individual radio inputs of the base class. *@
 <div @ref="RootElement" @attributes="HtmlAttributes"
      id="@_Id"
      role="radiogroup"
@@ -11,7 +13,9 @@
      dir="@Dir?.ToString().ToLower()"
      aria-label="@AriaLabel"
      aria-labelledby="@GetAriaLabelledBy()"
+     aria-describedby="@GetAriaDescribedBy()"
      aria-required="@(Required ? "true" : null)"
+     aria-invalid="@(ValueInvalid is true ? "true" : null)"
      aria-readonly="@(ReadOnly ? "true" : null)"
      aria-disabled="@(IsEnabled ? null : "true")"
      aria-orientation="@(Horizontal ? "horizontal" : "vertical")">
@@ -32,6 +36,22 @@
         </label>
     }
 
+    @if (HasDescription)
+    {
+        <div id="@_descriptionId"
+             style="@Styles?.Description"
+             class="bit-chg-gds @Classes?.Description">
+            @if (DescriptionTemplate is not null)
+            {
+                @DescriptionTemplate
+            }
+            else
+            {
+                @Description
+            }
+        </div>
+    }
+
     <div id="@_optionsContainerId" style="@Styles?.Container" class="bit-chg-cnt @Classes?.Container">
         @if (Options is not null || ChildContent is not null)
         {
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
index 92a341fe5a..5f343a0b64 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
@@ -14,6 +14,7 @@ namespace Bit.BlazorUI;
     private bool _optionsOrderDirty;
     private bool _defaultValueApplied;
     private TValue? _appliedDefaultValue;
+    private string _descriptionId = default!;
     private string _optionsContainerId = default!;
 
 
@@ -58,6 +59,25 @@ namespace Bit.BlazorUI;
     [Parameter, ResetClassBuilder]
     public BitColor? Color { get; set; }
 
+    /// <summary>
+    /// 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.
+    /// </summary>
+    [Parameter] public string? Description { get; set; }
+
+    /// <summary>
+    /// Custom RenderFragment for the description (helper text) of the ChoiceGroup.
+    /// Takes precedence over <see cref="Description"/> when both are set.
+    /// </summary>
+    [Parameter] public RenderFragment? DescriptionTemplate { get; set; }
+
+    /// <summary>
+    /// 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.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public bool FullWidth { get; set; }
+
     /// <summary>
     /// The gap between the items of the ChoiceGroup.
     /// </summary>
@@ -91,6 +111,11 @@ namespace Bit.BlazorUI;
     /// </summary>
     [Parameter] public RenderFragment<TItem>? ItemPrefixTemplate { get; set; }
 
+    /// <summary>
+    /// Used to add a suffix to each item, rendered after the content of the item.
+    /// </summary>
+    [Parameter] public RenderFragment<TItem>? ItemSuffixTemplate { get; set; }
+
     /// <summary>
     /// Used to customize the label for the Item content.
     /// </summary>
@@ -101,6 +126,14 @@ namespace Bit.BlazorUI;
     /// </summary>
     [Parameter] public string? Label { get; set; }
 
+    /// <summary>
+    /// The position of the content of each item relative to its radio circle. The default is
+    /// <see cref="BitLabelPosition.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.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public BitLabelPosition? LabelPosition { get; set; }
+
     /// <summary>
     /// Custom RenderFragment for the label of the ChoiceGroup.
     /// </summary>
@@ -137,12 +170,6 @@ namespace Bit.BlazorUI;
     /// </summary>
     [Parameter] public RenderFragment? Options { get; set; }
 
-    /// <summary>
-    /// Reverses the label and radio button location.
-    /// </summary>
-    [Parameter, ResetClassBuilder]
-    public bool Reversed { get; set; }
-
     /// <summary>
     /// The size of the BitChoiceGroup.
     /// </summary>
@@ -229,6 +256,7 @@ protected override async Task OnInitializedAsync()
     {
         _name = $"BitChoiceGroup-{UniqueId}-input-name";
         _labelId = $"BitChoiceGroup-{UniqueId}-label";
+        _descriptionId = $"BitChoiceGroup-{UniqueId}-description";
         _optionsContainerId = $"BitChoiceGroup-{UniqueId}-options-container";
 
         InitDefaultValue();
@@ -318,7 +346,18 @@ protected override void RegisterCssClasses()
 
         ClassBuilder.Register(() => Horizontal ? "bit-chg-hor" : string.Empty);
 
-        ClassBuilder.Register(() => Reversed ? "bit-chg-rvs" : string.Empty);
+        ClassBuilder.Register(() => LabelPosition switch
+        {
+            BitLabelPosition.Top => "bit-chg-ltp",
+            BitLabelPosition.Bottom => "bit-chg-lbm",
+            BitLabelPosition.Start => "bit-chg-lst",
+            BitLabelPosition.End => "bit-chg-led",
+            _ => "bit-chg-led"
+        });
+
+        ClassBuilder.Register(() => FullWidth ? "bit-chg-flw" : string.Empty);
+
+        ClassBuilder.Register(() => ReadOnly ? "bit-chg-rdo" : string.Empty);
 
         ClassBuilder.Register(() => Color switch
         {
@@ -392,6 +431,13 @@ private void SetIndexItems()
 
     private string? GetAriaLabelledBy() => AriaLabelledBy ?? (HasLabel ? _labelId : null);
 
+    // Same reasoning as the label: the description element is only rendered when there is a description to
+    // show, so the reference is only emitted then. Left null otherwise, which lets an aria-describedby that
+    // the consumer splatted through HtmlAttributes survive instead of being overwritten with an empty value.
+    internal bool HasDescription => DescriptionTemplate is not null || Description.HasValue();
+
+    private string? GetAriaDescribedBy() => HasDescription ? _descriptionId : null;
+
     // The index is used instead of the value, because a value is free-form (it can contain spaces or any
     // other character that is not valid in an id) and is not guaranteed to be unique among the items,
     // while the id has to be a valid, unique IDREF for the label's "for" and for aria-describedby.
@@ -764,6 +810,28 @@ internal string GetImageWrapperCssStyles(TItem item)
         return item.GetValueFromProperty<string?>(NameSelectors.Prefix.Name);
     }
 
+    internal string? GetSuffix(TItem item)
+    {
+        if (item is BitChoiceGroupItem<TValue> choiceGroupItem)
+        {
+            return choiceGroupItem.Suffix;
+        }
+
+        if (item is BitChoiceGroupOption<TValue> choiceGroupOption)
+        {
+            return choiceGroupOption.Suffix;
+        }
+
+        if (NameSelectors is null) return null;
+
+        if (NameSelectors.Suffix.Selector is not null)
+        {
+            return NameSelectors.Suffix.Selector!(item);
+        }
+
+        return item.GetValueFromProperty<string?>(NameSelectors.Suffix.Name);
+    }
+
     internal string? GetSelectedImageSrc(TItem item)
     {
         if (item is BitChoiceGroupItem<TValue> choiceGroupItem)
@@ -852,6 +920,28 @@ internal string GetImageWrapperCssStyles(TItem item)
         return item.GetValueFromProperty<string?>(NameSelectors.Text.Name);
     }
 
+    internal string? GetTitle(TItem item)
+    {
+        if (item is BitChoiceGroupItem<TValue> choiceGroupItem)
+        {
+            return choiceGroupItem.Title;
+        }
+
+        if (item is BitChoiceGroupOption<TValue> choiceGroupOption)
+        {
+            return choiceGroupOption.Title;
+        }
+
+        if (NameSelectors is null) return null;
+
+        if (NameSelectors.Title.Selector is not null)
+        {
+            return NameSelectors.Title.Selector!(item);
+        }
+
+        return item.GetValueFromProperty<string?>(NameSelectors.Title.Name);
+    }
+
     internal TValue? GetValue(TItem item)
     {
         if (item is BitChoiceGroupItem<TValue> choiceGroupItem)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss
index 7a4b6d9962..dff8d71c5c 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss
@@ -13,6 +13,12 @@
     --bit-chg-flex-flow: column nowrap;
     --bit-chg-justify-content: flex-start;
 
+    // Wins over the "fit-content" above through the extra class, so the declaration order
+    // of the two rules in this file cannot silently decide which width applies.
+    &.bit-chg-flw {
+        width: 100%;
+    }
+
     &.bit-chg-req {
         .bit-chg-lbl {
             &::after {
@@ -48,6 +54,14 @@
     overflow-wrap: break-word;
 }
 
+.bit-chg-gds {
+    display: block;
+    color: $clr-fg-sec;
+    box-sizing: border-box;
+    overflow-wrap: break-word;
+    font-size: calc(var(--bit-chg-fontsize) - #{spacing(0.25)});
+}
+
 .bit-chg-cnt {
     display: flex;
     gap: var(--bit-chg-item-gap);
@@ -58,11 +72,51 @@
     --bit-chg-flex-flow: row wrap;
 }
 
-.bit-chg-rvs {
+// Fills the container instead of hugging the widest item. In the horizontal layout the items also share
+// the width equally, so the group reads as a set of evenly distributed options rather than a left aligned
+// row trailed by empty space. "min-width: fit-content" keeps an item from being squeezed below its own
+// content, so a long item pushes the row to wrap instead of collapsing every item into a narrow column.
+.bit-chg-flw {
+    .bit-chg-cnt {
+        width: 100%;
+    }
+
+    &.bit-chg-hor {
+        .bit-chg-icn {
+            flex: 1 1 0;
+            min-width: fit-content;
+        }
+    }
+}
+
+// The position of the content of an item relative to its radio circle. The markup order inside an item
+// label is [prefix, circle, content, suffix], so each position is just the flex-direction that puts the
+// content on the requested side of the circle. These are custom properties rather than a direct
+// "flex-direction" declaration on purpose: the tile layout of an image or icon item (.bit-chg-ili)
+// overrides flex-direction at a single class of specificity, and a descendant selector here would beat
+// it and break the tile.
+.bit-chg-led {
+    --bit-chg-flex-direction: row;
+    --bit-chg-justify-content: flex-start;
+}
+
+// Start also pushes the items to the end of the group, so that in the vertical layout the circles line up
+// in a single column at the far edge instead of drifting with the width of each item's content.
+.bit-chg-lst {
     --bit-chg-justify-content: flex-end;
     --bit-chg-flex-direction: row-reverse;
 }
 
+.bit-chg-ltp {
+    --bit-chg-justify-content: flex-start;
+    --bit-chg-flex-direction: column-reverse;
+}
+
+.bit-chg-lbm {
+    --bit-chg-flex-direction: column;
+    --bit-chg-justify-content: flex-start;
+}
+
 .bit-chg-icn {
     border: none;
     display: flex;
@@ -221,12 +275,15 @@
     display: inline-block;
 }
 
+// A minimum rather than a fixed height: it still reserves the two lines the tile layout is designed
+// around (so a row of tiles keeps a common baseline), but a longer text or a description grows the tile
+// instead of being silently cut off by the overflow below.
 .bit-chg-itw {
     display: block;
     overflow: hidden;
     font-weight: 400;
-    height: spacing(4);
     position: relative;
+    min-height: spacing(4);
     max-width: spacing(8);
     white-space: pre-wrap;
     line-height: spacing(1.875);
@@ -334,6 +391,56 @@
     }
 }
 
+// Read-only keeps the enabled colors (it is not a disabled group) but drops every affordance that
+// promises the value can be changed: the pointer cursor and the hover feedback of the circle and the tile.
+.bit-chg-rdo {
+    .bit-chg-itl,
+    .bit-chg-ili {
+        cursor: default;
+    }
+
+    @media (hover: hover) {
+        // An unchecked item must not preview a selection that cannot be made, so its hover is reset
+        // to the resting look: no dot, no highlighted ring and no tile border.
+        .bit-chg-icn:not(.bit-chg-ich) {
+            .bit-chg-rad:hover {
+                &::before {
+                    border-color: $clr-brd-pri;
+                }
+
+                &::after {
+                    opacity: 0;
+                }
+            }
+
+            .bit-chg-ili:hover {
+                border-color: transparent;
+
+                .bit-chg-rad::before {
+                    opacity: 0;
+                }
+            }
+        }
+
+        // The checked item keeps its dot and its border, they just stop brightening on hover.
+        .bit-chg-ich {
+            .bit-chg-rad:hover {
+                &::before {
+                    border-color: var(--bit-chg-clr);
+                }
+
+                &::after {
+                    background-color: var(--bit-chg-clr);
+                }
+            }
+
+            .bit-chg-ili:hover {
+                border-color: var(--bit-chg-clr);
+            }
+        }
+    }
+}
+
 .bit-chg-ids {
     .bit-chg-rad {
         cursor: default;
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupClassStyles.cs
index 94f6267f5b..af916ff151 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupClassStyles.cs
@@ -17,6 +17,11 @@ public class BitChoiceGroupClassStyles
     /// </summary>
     public string? Label { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the description (helper text) of the BitChoiceGroup.
+    /// </summary>
+    public string? Description { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the container of the BitChoiceGroup.
     /// </summary>
@@ -72,6 +77,11 @@ public class BitChoiceGroupClassStyles
     /// </summary>
     public string? ItemPrefix { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the suffix of each item of the BitChoiceGroup.
+    /// </summary>
+    public string? ItemSuffix { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the text wrapper of each item of the BitChoiceGroup.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupItem.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupItem.cs
index 91be0f9bc3..4e931cd2d6 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupItem.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupItem.cs
@@ -75,6 +75,11 @@ public class BitChoiceGroupItem<TValue>
     /// </summary>
     public string? Style { get; set; }
 
+    /// <summary>
+    /// The text to show as a suffix for the BitChoiceGroup item, rendered after its content.
+    /// </summary>
+    public string? Suffix { get; set; }
+
     /// <summary>
     /// The custom template for the BitChoiceGroup item.
     /// </summary>
@@ -85,6 +90,12 @@ public class BitChoiceGroupItem<TValue>
     /// </summary>
     public string? Text { get; set; }
 
+    /// <summary>
+    /// The title attribute (the native tooltip) of the BitChoiceGroup item. This is supplementary text only:
+    /// use <see cref="AriaLabel"/> or <see cref="Description"/> for content that has to reach every user.
+    /// </summary>
+    public string? Title { get; set; }
+
     /// <summary>
     /// The value returned when BitChoiceGroup item is checked.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupNameSelectors.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupNameSelectors.cs
index 2e33da2ec6..164a5f3a5b 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupNameSelectors.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupNameSelectors.cs
@@ -67,6 +67,11 @@ public class BitChoiceGroupNameSelectors<TItem, TValue>
     /// </summary>
     public BitNameSelectorPair<TItem, string?> Style { get; set; } = new(nameof(BitChoiceGroupItem<TValue>.Style));
 
+    /// <summary>
+    /// The Suffix field name and selector of the custom input class.
+    /// </summary>
+    public BitNameSelectorPair<TItem, string?> Suffix { get; set; } = new(nameof(BitChoiceGroupItem<TValue>.Suffix));
+
     /// <summary>
     /// Template field name and selector of the custom input class.
     /// </summary>
@@ -77,6 +82,11 @@ public class BitChoiceGroupNameSelectors<TItem, TValue>
     /// </summary>
     public BitNameSelectorPair<TItem, string?> Text { get; set; } = new(nameof(BitChoiceGroupItem<TValue>.Text));
 
+    /// <summary>
+    /// The Title field name and selector of the custom input class.
+    /// </summary>
+    public BitNameSelectorPair<TItem, string?> Title { get; set; } = new(nameof(BitChoiceGroupItem<TValue>.Title));
+
     /// <summary>
     /// The Value field name and selector of the custom input class.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupOption.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupOption.cs
index d9da4da252..7424d79a2d 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupOption.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupOption.cs
@@ -83,6 +83,11 @@ public partial class BitChoiceGroupOption<TValue> : ComponentBase, IDisposable
     /// </summary>
     [Parameter] public string? Style { get; set; }
 
+    /// <summary>
+    /// The text to show as a suffix for the BitChoiceGroup option, rendered after its content.
+    /// </summary>
+    [Parameter] public string? Suffix { get; set; }
+
     /// <summary>
     /// The custom template for the BitChoiceGroup option.
     /// </summary>
@@ -93,6 +98,12 @@ public partial class BitChoiceGroupOption<TValue> : ComponentBase, IDisposable
     /// </summary>
     [Parameter] public string? Text { get; set; }
 
+    /// <summary>
+    /// The title attribute (the native tooltip) of the BitChoiceGroup option. This is supplementary text only:
+    /// use <see cref="AriaLabel"/> or <see cref="Description"/> for content that has to reach every user.
+    /// </summary>
+    [Parameter] public string? Title { get; set; }
+
     /// <summary>
     /// This value is returned when BitChoiceGroup option is checked.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor
index cfe752ba51..cafd9ff5a2 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor
@@ -4,6 +4,7 @@
 
 @{
     var prefix = ChoiceGroup.GetPrefix(Item);
+    var suffix = ChoiceGroup.GetSuffix(Item);
     var inputId = ChoiceGroup.GetInputId(Item);
     var template = ChoiceGroup.GetTemplate(Item);
     var isChecked = ChoiceGroup.GetIsCheckedItem(Item);
@@ -19,7 +20,15 @@
                       && ChoiceGroup.ItemLabelTemplate is null;
 }
 
-<div style="@ChoiceGroup.GetItemContainerCssStyles(Item)" class="@ChoiceGroup.GetItemContainerCssClasses(Item)" @attributes="ChoiceGroup.GetItemMarkerAttributes(Item)">
+<div title="@ChoiceGroup.GetTitle(Item)"
+     style="@ChoiceGroup.GetItemContainerCssStyles(Item)"
+     class="@ChoiceGroup.GetItemContainerCssClasses(Item)"
+     @attributes="ChoiceGroup.GetItemMarkerAttributes(Item)">
+    @* A read-only group stays reachable and keeps its value in the submitted form data (that is what
+       separates it from a disabled one), so the inputs are left in the tab order. Cancelling the click is
+       what makes it read-only: the browser routes both a mouse click and a keyboard activation (Space, and
+       the arrow keys that move the selection of a radio group) through a cancelable click, and cancelling
+       it runs the radio's "canceled activation steps", which restore the previous checkedness. *@
     <input @ref="_inputElement" @attributes="ChoiceGroup.InputHtmlAttributes"
            @onclick="e => ChoiceGroup.HandleClick(Item)"
            @onclick:preventDefault="ChoiceGroup.ReadOnly"
@@ -32,7 +41,6 @@
            class="bit-chg-inp"
            name="@ChoiceGroup.GetName()"
            required="@ChoiceGroup.Required"
-           tabindex="@(ChoiceGroup.ReadOnly ? "-1" : null)"
            aria-label="@ChoiceGroup.GetAriaLabel(Item)"
            aria-describedby="@(hasDescription ? descriptionId : null)"
            value="@ChoiceGroup.GetValue(Item)?.ToString()"
@@ -116,6 +124,17 @@
                     <span style="@ChoiceGroup.Styles?.ItemText" class="bit-chg-itx @ChoiceGroup.Classes?.ItemText">@ChoiceGroup.GetText(Item)</span>
                 }
             }
+
+            @* The mirror image of the prefix above: the per item text wins over the template, so a single
+               item can opt out of the shared template with a plain text of its own. *@
+            @if (suffix.HasValue())
+            {
+                <span style="@ChoiceGroup.Styles?.ItemSuffix" class="@ChoiceGroup.Classes?.ItemSuffix">@suffix</span>
+            }
+            else if (ChoiceGroup.ItemSuffixTemplate is not null)
+            {
+                @ChoiceGroup.ItemSuffixTemplate(Item)
+            }
         }
     </label>
 </div>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor
index 433bd530fa..61182f67c8 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor
@@ -4,12 +4,12 @@
 
 <PageOutlet Url="components/choicegroup"
             Title="ChoiceGroup"
-            Description="ChoiceGroup, also known as Radio or RadioGroup, lets people select a single value from two or more mutually exclusive choices, using fully keyboard accessible native radio inputs with support for icons, images, descriptions, and custom templates." />
+            Description="ChoiceGroup, also known as Radio or RadioGroup, lets people select a single value from two or more mutually exclusive choices. It builds on native radio inputs, so the whole group is one tab stop and the arrow keys move the selection, and it adds labels, helper text, icons, images, per-item descriptions, vertical/horizontal/full width layouts and custom templates on top." />
 
 <div>
     <DemoPage Name="ChoiceGroup"
               SecondaryNames="@(["Radio", "RadioButton", "RadioGroup", "RadioButtonGroup"])"
-              Description="ChoiceGroup, also known as Radio or RadioGroup, lets people select a single value from two or more mutually exclusive choices. It renders fully keyboard accessible native radio inputs and supports icons, images, prefixes, per-item descriptions, and custom templates through three different item APIs."
+              Description="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."
               Parameters="componentParameters"
               SubEnums="componentSubEnums"
               SubClasses="componentSubClasses"
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs
index 944cae7f26..a8160d58ef 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs
@@ -53,6 +53,27 @@ public partial class BitChoiceGroupDemo
             Href = "#color-enum",
         },
         new()
+        {
+            Name = "Description",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "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."
+        },
+        new()
+        {
+            Name = "DescriptionTemplate",
+            Type = "RenderFragment?",
+            DefaultValue = "null",
+            Description = "Custom RenderFragment for the description (helper text) of the ChoiceGroup. Takes precedence over Description when both are set."
+        },
+        new()
+        {
+            Name = "FullWidth",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "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."
+        },
+        new()
         {
             Name = "Gap",
             Type = "string?",
@@ -95,6 +116,13 @@ public partial class BitChoiceGroupDemo
             Description = "Used to add a prefix to each item."
         },
         new()
+        {
+            Name = "ItemSuffixTemplate",
+            Type = "RenderFragment<TItem>?",
+            DefaultValue = "null",
+            Description = "Used to add a suffix to each item, rendered after the content of the item."
+        },
+        new()
         {
             Name = "ItemTemplate",
             Type = "RenderFragment<TItem>?",
@@ -109,6 +137,15 @@ public partial class BitChoiceGroupDemo
             Description = "The label for the ChoiceGroup."
         },
         new()
+        {
+            Name = "LabelPosition",
+            Type = "BitLabelPosition?",
+            DefaultValue = "null",
+            Description = "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.",
+            LinkType = LinkType.Link,
+            Href = "#label-position-enum",
+        },
+        new()
         {
             Name = "LabelTemplate",
             Type = "RenderFragment?",
@@ -184,13 +221,6 @@ public partial class BitChoiceGroupDemo
             Description = "Makes the ChoiceGroup required and adds the required asterisk to its label."
         },
         new()
-        {
-            Name = "Reversed",
-            Type = "bool",
-            DefaultValue = "false",
-            Description = "Reverses the label and radio button location."
-        },
-        new()
         {
             Name = "Size",
             Type = "BitSize?",
@@ -324,6 +354,39 @@ public partial class BitChoiceGroupDemo
             ]
         },
         new()
+        {
+            Id = "label-position-enum",
+            Name = "BitLabelPosition",
+            Description = "Defines where the content of an item is rendered relative to its radio circle.",
+            Items =
+            [
+                new()
+                {
+                    Name= "Top",
+                    Description="Renders the content above the radio circle.",
+                    Value="0",
+                },
+                new()
+                {
+                    Name= "End",
+                    Description="Renders the content after the radio circle. This is the default.",
+                    Value="1",
+                },
+                new()
+                {
+                    Name= "Bottom",
+                    Description="Renders the content below the radio circle.",
+                    Value="2",
+                },
+                new()
+                {
+                    Name= "Start",
+                    Description="Renders the content before the radio circle and aligns the items to the end of the group.",
+                    Value="3",
+                }
+            ]
+        },
+        new()
         {
             Id = "size-enum",
             Name = "BitSize",
@@ -454,6 +517,13 @@ public partial class BitChoiceGroupDemo
                    Description = "CSS style attribute for the BitChoiceGroup item.",
                },
                new()
+               {
+                   Name = "Suffix",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "The text to show as a suffix for the BitChoiceGroup item, rendered after its content.",
+               },
+               new()
                {
                    Name = "Template",
                    Type = "RenderFragment<BitChoiceGroupItem<TValue>>?",
@@ -468,6 +538,13 @@ public partial class BitChoiceGroupDemo
                    Description = "Text to show as the content of BitChoiceGroup item.",
                },
                new()
+               {
+                   Name = "Title",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "The title attribute (the native tooltip) of the BitChoiceGroup item. Supplementary text only: use AriaLabel or Description for content that has to reach every user.",
+               },
+               new()
                {
                    Name = "Value",
                    Type = "TValue?",
@@ -590,6 +667,13 @@ public partial class BitChoiceGroupDemo
                    Description = "CSS style attribute for the BitChoiceGroup option.",
                },
                new()
+               {
+                   Name = "Suffix",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "The text to show as a suffix for the BitChoiceGroup option, rendered after its content.",
+               },
+               new()
                {
                    Name = "Template",
                    Type = "RenderFragment<BitChoiceGroupOption<TValue>>?",
@@ -604,6 +688,13 @@ public partial class BitChoiceGroupDemo
                    Description = "Text to show as the content of BitChoiceGroup option.",
                },
                new()
+               {
+                   Name = "Title",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "The title attribute (the native tooltip) of the BitChoiceGroup option. Supplementary text only: use AriaLabel or Description for content that has to reach every user.",
+               },
+               new()
                {
                    Name = "Value",
                    Type = "TValue?",
@@ -726,6 +817,13 @@ public partial class BitChoiceGroupDemo
                    Description = "CSS style attribute for the BitChoiceGroup option.",
                },
                new()
+               {
+                   Name = "Suffix",
+                   Type = "BitNameSelectorPair<TItem, string?>",
+                   DefaultValue = "new(nameof(BitChoiceGroupItem<TValue>.Suffix))",
+                   Description = "The text to show as a suffix for the BitChoiceGroup option, rendered after its content.",
+               },
+               new()
                {
                    Name = "Template",
                    Type = "BitNameSelectorPair<TItem, RenderFragment<TItem>?>",
@@ -740,6 +838,13 @@ public partial class BitChoiceGroupDemo
                    Description = "Text to show as the content of BitChoiceGroup option.",
                },
                new()
+               {
+                   Name = "Title",
+                   Type = "BitNameSelectorPair<TItem, string?>",
+                   DefaultValue = "new(nameof(BitChoiceGroupItem<TValue>.Title))",
+                   Description = "The title attribute (the native tooltip) of the BitChoiceGroup option.",
+               },
+               new()
                {
                    Name = "Value",
                    Type = "BitNameSelectorPair<TItem, TValue?>",
@@ -790,6 +895,13 @@ public partial class BitChoiceGroupDemo
                    Description = "Custom CSS classes/styles for the label of the BitChoiceGroup.",
                },
                new()
+               {
+                   Name = "Description",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the description (helper text) of the BitChoiceGroup.",
+               },
+               new()
                {
                    Name = "Container",
                    Type = "string?",
@@ -867,6 +979,13 @@ public partial class BitChoiceGroupDemo
                    Description = "Custom CSS classes/styles for the prefix of each item of the BitChoiceGroup.",
                },
                new()
+               {
+                   Name = "ItemSuffix",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the suffix of each item of the BitChoiceGroup.",
+               },
+               new()
                {
                    Name = "ItemTextWrapper",
                    Type = "string?",
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.scss
index bb4de350cb..2de4c7d2b0 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.scss
@@ -11,6 +11,12 @@
         }
     }
 
+    .custom-description {
+        gap: rem2(4px);
+        display: flex;
+        align-items: center;
+    }
+
     .custom-class {
         color: dodgerblue;
         margin-inline: 16px;
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/Order.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/Order.cs
index 49413765a2..dfe3dbb195 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/Order.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/Order.cs
@@ -4,7 +4,9 @@ public class Order
 {
     public string? Name { get; set; }
     public string? Prefix { get; set; }
+    public string? Fee { get; set; }
     public string? Summary { get; set; }
+    public string? Tooltip { get; set; }
     public string? ItemValue { get; set; }
     public string? ImageAddress { get; set; }
     public string? ImageDescription { get; set; }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor
index 580088779a..a530aba66a 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor
@@ -35,7 +35,7 @@
 </DemoExample>
 
 <DemoExample Title="Images and Icons" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3" PreventRenderForMcpClient>
-    <div>Displays items as image or icon tiles. An image item can provide a different image for its checked state, and the Inline mode renders the image or icon on the same line as the item text.</div>
+    <div>Displays items as image or icon tiles: ImageSrc with an optional ImageSize renders a picture, IconName (or Icon for an external library) renders a glyph, and SelectedImageSrc swaps in a second picture while the item is checked. The images are marked decorative so the item text carries the accessible name; set ImageAlt only when the picture says something the text does not. The Inline mode drops the tile layout and puts the image or icon on the same line as the text.</div>
     <br /><br />
     <div class="example-content">
         <BitChoiceGroup Label="Image Customs"
@@ -82,7 +82,7 @@
 </DemoExample>
 
 <DemoExample Title="Horizontal" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4" PreventRenderForMcpClient>
-    <div>Lays out the items horizontally instead of the default vertical stack, wrapping onto new lines when the available width runs out.</div>
+    <div>Lays out the items in a row instead of the default vertical stack, wrapping onto new lines when the available width runs out. The aria-orientation of the radiogroup follows this parameter, so assistive technology announces the same orientation the eye sees.</div>
     <br />
     <div class="example-content column">
         <BitChoiceGroup Label="Basic"
@@ -120,12 +120,30 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Reversed" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5" PreventRenderForMcpClient>
-    <div>Moves the radio circle to the far end of each item, rendering it after the item content.</div>
+<DemoExample Title="LabelPosition" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5" PreventRenderForMcpClient>
+    <div>Places the content of each item on any of the four sides of its radio circle. End is the default and renders the circle first; Start renders the content first and additionally aligns the items to the end of the group, so the circles line up in one column once the group is wider than its items (which is what the FullWidth section combines it with). Top and Bottom stack the content above or below the circle. Items rendered as image or icon tiles lay their own content out and are not affected.</div>
     <br />
     <div class="example-content column">
-        <BitChoiceGroup Label="Reversed"
-                        Reversed Horizontal
+        <BitChoiceGroup Label="End (default)"
+                        LabelPosition="BitLabelPosition.End" Horizontal
+                        DefaultValue="@("A")"
+                        Items="basicCustoms"
+                        NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />
+
+        <BitChoiceGroup Label="Start"
+                        LabelPosition="BitLabelPosition.Start" Horizontal
+                        DefaultValue="@("A")"
+                        Items="basicCustoms"
+                        NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />
+
+        <BitChoiceGroup Label="Top"
+                        LabelPosition="BitLabelPosition.Top" Horizontal
+                        DefaultValue="@("A")"
+                        Items="basicCustoms"
+                        NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />
+
+        <BitChoiceGroup Label="Bottom"
+                        LabelPosition="BitLabelPosition.Bottom" Horizontal
                         DefaultValue="@("A")"
                         Items="basicCustoms"
                         NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />
@@ -133,7 +151,7 @@
 </DemoExample>
 
 <DemoExample Title="LabelTemplate" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6" PreventRenderForMcpClient>
-    <div>Replaces the plain text label of the ChoiceGroup with fully custom content using the LabelTemplate.</div>
+    <div>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.</div>
     <br />
     <BitChoiceGroup Items="basicCustoms"
                     DefaultValue="@("A")"
@@ -147,16 +165,19 @@
 </DemoExample>
 
 <DemoExample Title="Item templates" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
-    <div>Customizes the item rendering at different levels: ItemPrefixTemplate prepends content to each item, ItemLabelTemplate replaces the content next to the radio circle, and ItemTemplate or the per-item Template takes over the whole item rendering.</div>
+    <div>Customizes the item rendering at four different levels, from the smallest scope to the largest: ItemPrefixTemplate and ItemSuffixTemplate add content before and after the built-in item content and leave it in place, ItemLabelTemplate replaces the content next to the radio circle but keeps the circle, and ItemTemplate (or the Template name selector of a single item, which wins over it) takes over the whole item rendering including the circle.</div>
     <br />
     <div class="example-content">
-        <BitChoiceGroup Label="ItemPrefixTemplate" Items="basicCustoms" DefaultValue="@string.Empty"
+        <BitChoiceGroup Label="ItemPrefixTemplate & ItemSuffixTemplate" Items="basicCustoms" DefaultValue="@string.Empty"
                         NameSelectors="@(new() { Text = { Selector = i => i.Name},
                                                      Value = { Selector = i => i.ItemValue },
                                                      Index = nameof(Order.Idx) })">
             <ItemPrefixTemplate Context="item">
                 @(item.Idx + 1).&nbsp;
             </ItemPrefixTemplate>
+            <ItemSuffixTemplate Context="item">
+                &nbsp;<b>(@item.ItemValue)</b>
+            </ItemSuffixTemplate>
         </BitChoiceGroup>
 
         <BitChoiceGroup Label="ItemLabelTemplate" @bind-Value="itemLabelTemplateValue"
@@ -191,9 +212,17 @@
 </DemoExample>
 
 <DemoExample Title="Binding" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
-    <div>Binds the selected value with one-way binding (Value), where only the model drives the ChoiceGroup, or two-way binding (@@bind-Value) that keeps the model and the ChoiceGroup in sync.</div>
+    <div>Binds the selected value in three ways. DefaultValue only seeds the initial selection and then leaves the ChoiceGroup to own its value, reporting every change through OnChange; this uncontrolled mode is how most of the examples on this page are set up. Value alone is one-way: the model drives the ChoiceGroup and a click cannot write back, so editing the text box below moves the selection but clicking an item does not change the text box. @@bind-Value is two-way and keeps the model and the ChoiceGroup in sync in both directions.</div>
     <br />
     <div class="example-content">
+        <div>
+            <BitChoiceGroup Label="Uncontrolled (DefaultValue)" DefaultValue="@("A")"
+                            Items="basicCustoms"
+                            OnChange="(string? value) => uncontrolledValue = value"
+                            NameSelectors="@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })" />
+            <br />
+            <div>Selected: <b>@uncontrolledValue</b></div>
+        </div>
         <div>
             <BitChoiceGroup Label="One-way" Value="@oneWayValue"
                             Items="basicCustoms"
@@ -212,7 +241,7 @@
 </DemoExample>
 
 <DemoExample Title="Validation" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9" PreventRenderForMcpClient>
-    <div>Integrates with EditForm and data annotations, marking the group as invalid and showing the validation message until a choice is made. The Required parameter adds the required asterisk to the group label.</div>
+    <div>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.</div>
     <br />
     @if (string.IsNullOrEmpty(successMessage))
     {
@@ -237,7 +266,7 @@
     <BitButton Variant="BitVariant.Outline" OnClick="() => { validationModel = new(); successMessage=string.Empty; }">Reset</BitButton>
 </DemoExample>
 
-<DemoExample Title="Descriptions" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
+<DemoExample Title="Item descriptions" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
     <div>Adds secondary text under each item using the Description name selector. The description is automatically linked to its input via aria-describedby, so screen readers announce it along with the item label.</div>
     <br />
     <div class="example-content">
@@ -251,7 +280,7 @@
 </DemoExample>
 
 <DemoExample Title="ReadOnly" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
-    <div>Prevents changing the value using the ReadOnly parameter while keeping the normal (non-disabled) appearance; readonly items are also removed from the keyboard tab order.</div>
+    <div>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.</div>
     <br />
     <div class="example-content">
         <BitChoiceGroup Label="ReadOnly"
@@ -281,21 +310,32 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Prefix" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
-    <div>Adds plain text in front of each item using the Prefix name selector, rendered before the radio circle. For arbitrary prefix content, use the ItemPrefixTemplate shown in the Item templates section.</div>
+<DemoExample Title="Prefix & Suffix" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
+    <div>Wraps the content of each item in plain text: the Prefix name selector maps a field that is rendered in front of the radio circle and the Suffix name selector maps one that is rendered 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.</div>
     <br />
-    <div class="example-content">
-        <BitChoiceGroup Label="Shipping method"
+    <div class="example-content column">
+        <BitChoiceGroup Label="Shipping method (Prefix)"
                         Items="prefixCustoms"
                         DefaultValue="@("Standard")"
                         NameSelectors="@(new() { Text = { Name = nameof(Order.Name) },
                                                  Value = { Name = nameof(Order.ItemValue) },
                                                  Prefix = { Name = nameof(Order.Prefix) } })" />
+
+        <div class="example-box">
+            <BitChoiceGroup Label="Shipping method (Suffix)"
+                            Items="suffixCustoms"
+                            DefaultValue="@("Standard")"
+                            FullWidth
+                            Styles="@(new() { ItemSuffix = "margin-inline-start: auto;" })"
+                            NameSelectors="@(new() { Text = { Name = nameof(Order.Name) },
+                                                     Value = { Name = nameof(Order.ItemValue) },
+                                                     Suffix = { Name = nameof(Order.Fee) } })" />
+        </div>
     </div>
 </DemoExample>
 
 <DemoExample Title="Events" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
-    <div>Raises OnChange whenever the selected value changes, OnClick on every click of an enabled item, including the already selected one, and OnFocus and OnBlur as the focus moves between the items.</div>
+    <div>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.</div>
     <br />
     <div class="example-content column">
         <BitChoiceGroup Label="Events" Items="basicCustoms" DefaultValue="@("A")"
@@ -331,7 +371,103 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Color" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16" PreventRenderForMcpClient>
+<DemoExample Title="Group description" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
+    <div>Adds a helper text under the label to explain the whole set of choices, as opposed to the per-item Description name selector 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.</div>
+    <br />
+    <div class="example-content column">
+        <BitChoiceGroup Label="Deployment target"
+                        Description="Only the selected environment receives the new build."
+                        Items="deploymentCustoms"
+                        DefaultValue="@("Staging")"
+                        NameSelectors="@(new() { Text = { Name = nameof(Order.Name) },
+                                                 Value = { Name = nameof(Order.ItemValue) } })" />
+
+        <BitChoiceGroup Label="Deployment target"
+                        Items="deploymentCustoms"
+                        DefaultValue="@("Staging")"
+                        NameSelectors="@(new() { Text = { Name = nameof(Order.Name) },
+                                                 Value = { Name = nameof(Order.ItemValue) } })">
+            <DescriptionTemplate>
+                <div class="custom-description">
+                    <BitIcon IconName="@BitIconName.Info" />
+                    <span>Only the selected environment receives the new build.</span>
+                </div>
+            </DescriptionTemplate>
+        </BitChoiceGroup>
+    </div>
+</DemoExample>
+
+<DemoExample Title="FullWidth" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17" PreventRenderForMcpClient>
+    <div>Stretches the ChoiceGroup to the full width of its container instead of letting it hug its widest item, which is what lines a ChoiceGroup up with the other full width fields of a form. In the horizontal layout the items additionally share that width in equal columns. In the vertical layout every item row spans the full width, so LabelPosition.Start now has room to push the items to the far edge; stretching the item label over that row as well turns it into the label-at-the-start, circle-at-the-end list found in settings pages.</div>
+    <br />
+    <div class="example-content column">
+        <div class="example-box">
+            <BitChoiceGroup Label="Default (hugs the widest item)"
+                            Items="basicCustoms"
+                            DefaultValue="@("A")"
+                            Horizontal
+                            NameSelectors="@(new() { Text = { Name = nameof(Order.Name) },
+                                                     Value = { Name = nameof(Order.ItemValue) } })" />
+        </div>
+        <div class="example-box">
+            <BitChoiceGroup Label="FullWidth (horizontal, equal columns)"
+                            Items="basicCustoms"
+                            DefaultValue="@("A")"
+                            Horizontal FullWidth
+                            NameSelectors="@(new() { Text = { Name = nameof(Order.Name) },
+                                                     Value = { Name = nameof(Order.ItemValue) } })" />
+        </div>
+        <div class="example-box">
+            <BitChoiceGroup Label="FullWidth + LabelPosition.Start (items at the far edge)"
+                            Items="basicCustoms"
+                            DefaultValue="@("A")"
+                            LabelPosition="BitLabelPosition.Start" FullWidth
+                            NameSelectors="@(new() { Text = { Name = nameof(Order.Name) },
+                                                     Value = { Name = nameof(Order.ItemValue) } })" />
+        </div>
+        <div class="example-box">
+            <BitChoiceGroup Label="FullWidth + LabelPosition.Start + stretched item label (settings list)"
+                            Items="basicCustoms"
+                            DefaultValue="@("A")"
+                            LabelPosition="BitLabelPosition.Start" FullWidth
+                            Styles="@(new() { ItemLabel = "width: 100%; justify-content: space-between;" })"
+                            NameSelectors="@(new() { Text = { Name = nameof(Order.Name) },
+                                                     Value = { Name = nameof(Order.ItemValue) } })" />
+        </div>
+    </div>
+</DemoExample>
+
+<DemoExample Title="Item title" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18">
+    <div>Sets the native browser tooltip of an item through the Title name selector, 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.</div>
+    <br />
+    <div class="example-content">
+        <BitChoiceGroup Label="Delivery window (hover an item)"
+                        Items="titleCustoms"
+                        DefaultValue="@("24h")"
+                        NameSelectors="@(new() { Text = { Name = nameof(Order.Name) },
+                                                 Value = { Name = nameof(Order.ItemValue) },
+                                                 Title = { Name = nameof(Order.Tooltip) } })" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="AutoFocus" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
+    <div>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.</div>
+    <br />
+    <div class="example-content column">
+        <BitButton OnClick="() => showAutoFocus = !showAutoFocus">@(showAutoFocus ? "Unmount" : "Mount") the auto focused ChoiceGroup</BitButton>
+        @if (showAutoFocus)
+        {
+            <BitChoiceGroup AutoFocus
+                            Label="Auto focused"
+                            Items="basicCustoms"
+                            DefaultValue="@("B")"
+                            NameSelectors="@(new() { Text = { Name = nameof(Order.Name) },
+                                                     Value = { Name = nameof(Order.ItemValue) } })" />
+        }
+    </div>
+</DemoExample>
+
+<DemoExample Title="Color" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20" PreventRenderForMcpClient>
         <div>Colors the radio circle and the checked state of the items using the BitColor palette, with Primary being the default.</div>
         <br />
         <div>
@@ -496,7 +632,7 @@
         </div>
     </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17" PreventRenderForMcpClient>
+<DemoExample Title="External Icons" RazorCode="@example21RazorCode" CsharpCode="@example21CsharpCode" Id="example21" PreventRenderForMcpClient>
     <div>Renders icons from external libraries like Font Awesome or Bootstrap Icons using the Icon name selector, instead of the built-in icon font used by IconName.</div>
     
     <br />
@@ -530,7 +666,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Size" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18" PreventRenderForMcpClient>
+<DemoExample Title="Size" RazorCode="@example22RazorCode" CsharpCode="@example22CsharpCode" Id="example22" PreventRenderForMcpClient>
     <div>Comes in Small, Medium (default), and Large sizes that scale the radio circle, text, icons, and item spacing together.</div>
     <br /><br />
     <div>Basic ChoiceGroup</div>
@@ -615,7 +751,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Style & Class" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
+<DemoExample Title="Style & Class" RazorCode="@example23RazorCode" CsharpCode="@example23CsharpCode" Id="example23" PreventRenderForMcpClient>
     <div>Customizes the appearance at every level: Style and Class on the root element, per-item styles and classes, and the Styles and Classes objects that target the internal parts of the component, including the checked state of the items.</div>
     <br /><br />
     <div>Component's Style & Class:</div>
@@ -668,7 +804,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="RTL" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20" PreventRenderForMcpClient>
+<DemoExample Title="RTL" RazorCode="@example24RazorCode" CsharpCode="@example24CsharpCode" Id="example24" PreventRenderForMcpClient>
     <div>Renders the ChoiceGroup in right-to-left mode; the layout is mirrored and the keyboard arrow keys follow the text direction.</div>
     <br />
     <div dir="rtl" class="example-content">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.cs
index b7a9a978ca..e30f0659af 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.cs
@@ -5,6 +5,8 @@ public partial class _BitChoiceGroupCustomDemo
     private string oneWayValue = "A";
     private string twoWayValue = "A";
     private string readOnlyValue = "A";
+    private bool showAutoFocus;
+    private string? uncontrolledValue = "A";
 
     private string? changedValue;
     private string? clickedCustom;
@@ -115,6 +117,13 @@ public partial class _BitChoiceGroupCustomDemo
         new() { Name = "Overnight", ItemValue = "Overnight", Prefix = "$25 — " }
     ];
 
+    private readonly List<Order> suffixCustoms =
+    [
+        new() { Name = "Standard", ItemValue = "Standard", Fee = "Free" },
+        new() { Name = "Express", ItemValue = "Express", Fee = "$10" },
+        new() { Name = "Overnight", ItemValue = "Overnight", Fee = "$25" }
+    ];
+
     private readonly List<Order> descriptionCustoms =
     [
         new() { Name = "Daily", ItemValue = "Daily", Summary = "Backs up every night at 2 AM." },
@@ -122,6 +131,20 @@ public partial class _BitChoiceGroupCustomDemo
         new() { Name = "Monthly", ItemValue = "Monthly", Summary = "Backs up on the first day of each month." }
     ];
 
+    private readonly List<Order> deploymentCustoms =
+    [
+        new() { Name = "Development", ItemValue = "Development" },
+        new() { Name = "Staging", ItemValue = "Staging" },
+        new() { Name = "Production", ItemValue = "Production" }
+    ];
+
+    private readonly List<Order> 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" }
+    ];
+
     private readonly List<Order> itemLabelTemplateCustoms =
     [
         new() { Name = "Day", ItemValue = "Day", IconName = BitIconName.CalendarDay },
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cs
index 343bd51213..8094e7956a 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cs
@@ -252,11 +252,29 @@ public class Order
 ];";
 
     private readonly string example5RazorCode = @"
-<BitChoiceGroup Label=""Reversed""
-                        Reversed Horizontal
-                        DefaultValue=""@(""A"")""
-                        Items=""basicCustoms""
-                        NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })"" />";
+<BitChoiceGroup Label=""End (default)""
+                LabelPosition=""BitLabelPosition.End"" Horizontal
+                DefaultValue=""@(""A"")""
+                Items=""basicCustoms""
+                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })"" />
+
+<BitChoiceGroup Label=""Start""
+                LabelPosition=""BitLabelPosition.Start"" Horizontal
+                DefaultValue=""@(""A"")""
+                Items=""basicCustoms""
+                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })"" />
+
+<BitChoiceGroup Label=""Top""
+                LabelPosition=""BitLabelPosition.Top"" Horizontal
+                DefaultValue=""@(""A"")""
+                Items=""basicCustoms""
+                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })"" />
+
+<BitChoiceGroup Label=""Bottom""
+                LabelPosition=""BitLabelPosition.Bottom"" Horizontal
+                DefaultValue=""@(""A"")""
+                Items=""basicCustoms""
+                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })"" />";
     private readonly string example5CsharpCode = @"
 public class Order
 {
@@ -375,13 +393,16 @@ public class Order
     }
 </style>
 
-<BitChoiceGroup Label=""ItemPrefixTemplate"" Items=""basicCustoms"" DefaultValue=""@string.Empty""
+<BitChoiceGroup Label=""ItemPrefixTemplate & ItemSuffixTemplate"" Items=""basicCustoms"" DefaultValue=""@string.Empty""
                 NameSelectors=""@(new() { Text = { Selector = i => i.Name},
                                          Value = { Selector = i => i.ItemValue },
                                          Index = nameof(Order.Idx) })"">
     <ItemPrefixTemplate Context=""item"">
         @(item.Idx + 1).&nbsp;
     </ItemPrefixTemplate>
+    <ItemSuffixTemplate Context=""item"">
+        &nbsp;<b>(@item.ItemValue)</b>
+    </ItemSuffixTemplate>
 </BitChoiceGroup>
 
 <BitChoiceGroup Label=""ItemLabelTemplate"" @bind-Value=""itemLabelTemplateValue""
@@ -483,6 +504,12 @@ protected override void OnInitialized()
 }";
 
     private readonly string example8RazorCode = @"
+<BitChoiceGroup Label=""Uncontrolled (DefaultValue)"" DefaultValue=""@(""A"")""
+                Items=""basicCustoms""
+                OnChange=""(string? value) => uncontrolledValue = value""
+                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })"" />
+<div>Selected: <b>@uncontrolledValue</b></div>
+
 <BitChoiceGroup Label=""One-way"" Value=""@oneWayValue""
                 Items=""basicCustoms""
                 NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })"" />
@@ -495,6 +522,7 @@ protected override void OnInitialized()
     private readonly string example8CsharpCode = @"
 private string oneWayValue = ""A"";
 private string twoWayValue = ""A"";
+private string? uncontrolledValue = ""A"";
 
 public class Order
 {
@@ -627,16 +655,26 @@ public class Order
 ];";
 
     private readonly string example13RazorCode = @"
-<BitChoiceGroup Label=""Shipping method""
+<BitChoiceGroup Label=""Shipping method (Prefix)""
                 Items=""prefixCustoms""
                 DefaultValue=""@(""Standard"")""
                 NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) },
                                          Value = { Name = nameof(Order.ItemValue) },
-                                         Prefix = { Name = nameof(Order.Prefix) } })"" />";
+                                         Prefix = { Name = nameof(Order.Prefix) } })"" />
+
+<BitChoiceGroup Label=""Shipping method (Suffix)""
+                Items=""suffixCustoms""
+                DefaultValue=""@(""Standard"")""
+                FullWidth
+                Styles=""@(new() { ItemSuffix = ""margin-inline-start: auto;"" })""
+                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) },
+                                         Value = { Name = nameof(Order.ItemValue) },
+                                         Suffix = { Name = nameof(Order.Fee) } })"" />";
     private readonly string example13CsharpCode = @"
 public class Order
 {
     public string Name { get; set; }
+    public string Fee { get; set; }
     public string Prefix { get; set; }
     public string ItemValue { get; set; }
 }
@@ -646,6 +684,13 @@ public class Order
     new() { Name = ""Standard"", ItemValue = ""Standard"", Prefix = ""$0 — "" },
     new() { Name = ""Express"", ItemValue = ""Express"", Prefix = ""$10 — "" },
     new() { Name = ""Overnight"", ItemValue = ""Overnight"", Prefix = ""$25 — "" }
+];
+
+private readonly List<Order> suffixCustoms =
+[
+    new() { Name = ""Standard"", ItemValue = ""Standard"", Fee = ""Free"" },
+    new() { Name = ""Express"", ItemValue = ""Express"", Fee = ""$10"" },
+    new() { Name = ""Overnight"", ItemValue = ""Overnight"", Fee = ""$25"" }
 ];";
 
     private readonly string example14RazorCode = @"
@@ -728,7 +773,136 @@ private void ReverseDynamicCustoms()
 }";
 
     private readonly string example16RazorCode = @"
-<BitChoiceGroup Color=""BitColor.Primary"" 
+<BitChoiceGroup Label=""Deployment target""
+                Description=""Only the selected environment receives the new build.""
+                Items=""deploymentCustoms""
+                DefaultValue=""@(""Staging"")""
+                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) },
+                                         Value = { Name = nameof(Order.ItemValue) } })"" />
+
+<BitChoiceGroup Label=""Deployment target""
+                Items=""deploymentCustoms""
+                DefaultValue=""@(""Staging"")""
+                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) },
+                                         Value = { Name = nameof(Order.ItemValue) } })"">
+    <DescriptionTemplate>
+        <div class=""custom-description"">
+            <BitIcon IconName=""@BitIconName.Info"" />
+            <span>Only the selected environment receives the new build.</span>
+        </div>
+    </DescriptionTemplate>
+</BitChoiceGroup>";
+    private readonly string example16CsharpCode = @"
+public class Order
+{
+    public string? Name { get; set; }
+    public string? ItemValue { get; set; }
+}
+
+private readonly List<Order> deploymentCustoms =
+[
+    new() { Name = ""Development"", ItemValue = ""Development"" },
+    new() { Name = ""Staging"", ItemValue = ""Staging"" },
+    new() { Name = ""Production"", ItemValue = ""Production"" }
+];";
+
+    private readonly string example17RazorCode = @"
+<BitChoiceGroup Label=""Default (hugs the widest item)""
+                Items=""basicCustoms""
+                DefaultValue=""@(""A"")""
+                Horizontal
+                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) },
+                                         Value = { Name = nameof(Order.ItemValue) } })"" />
+
+<BitChoiceGroup Label=""FullWidth (horizontal, equal columns)""
+                Items=""basicCustoms""
+                DefaultValue=""@(""A"")""
+                Horizontal FullWidth
+                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) },
+                                         Value = { Name = nameof(Order.ItemValue) } })"" />
+
+<BitChoiceGroup Label=""FullWidth + LabelPosition.Start (items at the far edge)""
+                Items=""basicCustoms""
+                DefaultValue=""@(""A"")""
+                LabelPosition=""BitLabelPosition.Start"" FullWidth
+                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) },
+                                         Value = { Name = nameof(Order.ItemValue) } })"" />
+
+<BitChoiceGroup Label=""FullWidth + LabelPosition.Start + stretched item label (settings list)""
+                Items=""basicCustoms""
+                DefaultValue=""@(""A"")""
+                LabelPosition=""BitLabelPosition.Start"" FullWidth
+                Styles=""@(new() { ItemLabel = ""width: 100%; justify-content: space-between;"" })""
+                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) },
+                                         Value = { Name = nameof(Order.ItemValue) } })"" />";
+    private readonly string example17CsharpCode = @"
+public class Order
+{
+    public string? Name { get; set; }
+    public string? ItemValue { get; set; }
+}
+
+private readonly List<Order> basicCustoms =
+[
+    new() { Name = ""Custom A"", ItemValue = ""A"" },
+    new() { Name = ""Custom B"", ItemValue = ""B"" },
+    new() { Name = ""Custom C"", ItemValue = ""C"" },
+    new() { Name = ""Custom D"", ItemValue = ""D"" }
+];";
+
+    private readonly string example18RazorCode = @"
+<BitChoiceGroup Label=""Delivery window (hover an item)""
+                Items=""titleCustoms""
+                DefaultValue=""@(""24h"")""
+                NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) },
+                                         Value = { Name = nameof(Order.ItemValue) },
+                                         Title = { Name = nameof(Order.Tooltip) } })"" />";
+    private readonly string example18CsharpCode = @"
+public class Order
+{
+    public string? Name { get; set; }
+    public string? Tooltip { get; set; }
+    public string? ItemValue { get; set; }
+}
+
+private readonly List<Order> 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"" }
+];";
+
+    private readonly string example19RazorCode = @"
+<BitButton OnClick=""() => showAutoFocus = !showAutoFocus"">@(showAutoFocus ? ""Unmount"" : ""Mount"") the auto focused ChoiceGroup</BitButton>
+
+@if (showAutoFocus)
+{
+    <BitChoiceGroup AutoFocus
+                    Label=""Auto focused""
+                    Items=""basicCustoms""
+                    DefaultValue=""@(""B"")""
+                    NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) },
+                                             Value = { Name = nameof(Order.ItemValue) } })"" />
+}";
+    private readonly string example19CsharpCode = @"
+public class Order
+{
+    public string Name { get; set; }
+    public string ItemValue { get; set; }
+}
+
+private bool showAutoFocus;
+
+private readonly List<Order> basicCustoms =
+[
+    new() { Name = ""Custom A"", ItemValue = ""A"" },
+    new() { Name = ""Custom B"", ItemValue = ""B"" },
+    new() { Name = ""Custom C"", ItemValue = ""C"" },
+    new() { Name = ""Custom D"", ItemValue = ""D"" }
+];";
+
+    private readonly string example20RazorCode = @"
+<BitChoiceGroup Color=""BitColor.Primary""
                 Label=""Primary"" 
                 Horizontal
                 Items=""basicCustoms""
@@ -846,7 +1020,7 @@ private void ReverseDynamicCustoms()
                 Items=""basicCustoms""
                 DefaultValue=""basicCustoms[1].ItemValue""
                 NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })"" />";
-    private readonly string example16CsharpCode = @"
+    private readonly string example20CsharpCode = @"
 public class Order
 {
     public string Name { get; set; }
@@ -861,7 +1035,7 @@ public class Order
     new() { Name = ""Custom D"", ItemValue = ""D"" }
 ];";
 
-    private readonly string example17RazorCode = @"
+    private readonly string example21RazorCode = @"
 <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/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
 
@@ -885,7 +1059,7 @@ public class Order
                 NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, 
                                          Value = { Name = nameof(Order.ItemValue) }, 
                                          Icon = { Name = nameof(Order.Icon) } })"" />";
-    private readonly string example17CsharpCode = @"
+    private readonly string example21CsharpCode = @"
 public class Order
 {
     public string? Name { get; set; }
@@ -900,7 +1074,7 @@ public class Order
     new() { Name = ""Month"", ItemValue = ""Month"", Icon = BitIconInfo.Bi(""calendar-month"") }
 ];";
 
-    private readonly string example18RazorCode = @"
+    private readonly string example22RazorCode = @"
 <BitChoiceGroup Size=""BitSize.Small""
                 Label=""Small""
                 Items=""basicCustoms""
@@ -972,7 +1146,7 @@ public class Order
                                           Value = { Selector = i => i.ItemValue },
                                           IconName = { Selector = i => i.IconName },
                                           IsEnabled = { Selector = i => i.IsDisabled is false } })"" Horizontal />";
-    private readonly string example18CsharpCode = @"
+    private readonly string example22CsharpCode = @"
 public class Order
 {
     public string Name { get; set; }
@@ -996,7 +1170,7 @@ public class Order
     new() { Name = ""Month"", ItemValue = ""Month"", IconName = BitIconName.Calendar, IsDisabled = true }
 ];";
 
-    private readonly string example19RazorCode = @"
+    private readonly string example23RazorCode = @"
 <style>
     .custom-class {
         color: dodgerblue;
@@ -1078,7 +1252,7 @@ public class Order
                                    ItemChecked = ""custom-checked"",
                                    ItemRadioButton = ""custom-radio-btn"" })""
                 NameSelectors=""@(new() { Text = { Selector = i => i.Name }, Value = { Selector = i => i.ItemValue } })""/>";
-    private readonly string example19CsharpCode = @"
+    private readonly string example23CsharpCode = @"
 public class Order
 {
     public string Name { get; set; }
@@ -1103,7 +1277,7 @@ public class Order
     new() { Name = ""Custom D"", ItemValue = ""D"", Class = ""custom-item"" }
 ];";
 
-    private readonly string example20RazorCode = @"
+    private readonly string example24RazorCode = @"
 <BitChoiceGroup Label=""ساده""
                 Dir=""BitDir.Rtl""
                 DefaultValue=""@(""A"")""
@@ -1116,7 +1290,7 @@ public class Order
                 DefaultValue=""@(""A"")""
                 Items=""rtlCustoms""
                 NameSelectors=""@(new() { Text = { Selector = i => i.Name }, Value = { Selector = i => i.ItemValue } })"" />";
-    private readonly string example20CsharpCode = @"
+    private readonly string example24CsharpCode = @"
 public class Order
 {
     public string Name { get; set; }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor
index a949fa8b7f..728c61a516 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor
@@ -29,7 +29,7 @@
 </DemoExample>
 
 <DemoExample Title="Images and Icons" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
-    <div>Displays items as image or icon tiles. An image item can provide a different image for its checked state, and the Inline mode renders the image or icon on the same line as the item text.</div>
+    <div>Displays items as image or icon tiles: ImageSrc with an optional ImageSize renders a picture, IconName (or Icon for an external library) renders a glyph, and SelectedImageSrc swaps in a second picture while the item is checked. The images are marked decorative so the item text carries the accessible name; set ImageAlt only when the picture says something the text does not. The Inline mode drops the tile layout and puts the image or icon on the same line as the text.</div>
     <br /><br />
     <div class="example-content">
         <BitChoiceGroup Label="Image Items" Items="imageItems" DefaultValue="@("Bar")" />
@@ -44,7 +44,7 @@
 </DemoExample>
 
 <DemoExample Title="Horizontal" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4" PreventRenderForMcpClient>
-    <div>Lays out the items horizontally instead of the default vertical stack, wrapping onto new lines when the available width runs out.</div>
+    <div>Lays out the items in a row instead of the default vertical stack, wrapping onto new lines when the available width runs out. The aria-orientation of the radiogroup follows this parameter, so assistive technology announces the same orientation the eye sees.</div>
     <br />
     <div class="example-content column">
         <BitChoiceGroup Label="Basic" Items="basicItems" DefaultValue="@("A")" Horizontal />
@@ -54,16 +54,19 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Reversed" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5" PreventRenderForMcpClient>
-    <div>Moves the radio circle to the far end of each item, rendering it after the item content.</div>
+<DemoExample Title="LabelPosition" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5" PreventRenderForMcpClient>
+    <div>Places the content of each item on any of the four sides of its radio circle. End is the default and renders the circle first; Start renders the content first and additionally aligns the items to the end of the group, so the circles line up in one column once the group is wider than its items (which is what the FullWidth section combines it with). Top and Bottom stack the content above or below the circle. Items rendered as image or icon tiles lay their own content out and are not affected.</div>
     <br />
     <div class="example-content column">
-        <BitChoiceGroup Label="Reversed" Items="basicItems" DefaultValue="@("A")" Reversed Horizontal />
+        <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 />
     </div>
 </DemoExample>
 
 <DemoExample Title="LabelTemplate" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
-    <div>Replaces the plain text label of the ChoiceGroup with fully custom content using the LabelTemplate.</div>
+    <div>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.</div>
     <br />
     <div class="example-content">
         <BitChoiceGroup Items="basicItems" DefaultValue="@("A")">
@@ -77,13 +80,16 @@
 </DemoExample>
 
 <DemoExample Title="Item templates" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
-    <div>Customizes the item rendering at different levels: ItemPrefixTemplate prepends content to each item, ItemLabelTemplate replaces the content next to the radio circle, and ItemTemplate or the per-item Template takes over the whole item rendering.</div>
+    <div>Customizes the item rendering at four different levels, from the smallest scope to the largest: ItemPrefixTemplate and ItemSuffixTemplate add content before and after the built-in item content and leave it in place, ItemLabelTemplate replaces the content next to the radio circle but keeps the circle, and ItemTemplate (or the Template of a single item, which wins over it) takes over the whole item rendering including the circle.</div>
     <br />
     <div class="example-content">
-        <BitChoiceGroup Label="ItemPrefixTemplate" Items="basicItems" DefaultValue="@string.Empty">
+        <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">
@@ -113,9 +119,16 @@
 </DemoExample>
 
 <DemoExample Title="Binding" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8" PreventRenderForMcpClient>
-    <div>Binds the selected value with one-way binding (Value), where only the model drives the ChoiceGroup, or two-way binding (@@bind-Value) that keeps the model and the ChoiceGroup in sync.</div>
+    <div>Binds the selected value in three ways. DefaultValue only seeds the initial selection and then leaves the ChoiceGroup to own its value, reporting every change through OnChange; this uncontrolled mode is how most of the examples on this page are set up. Value alone is one-way: the model drives the ChoiceGroup and a click cannot write back, so editing the text box below moves the selection but clicking an item does not change the text box. @@bind-Value is two-way and keeps the model and the ChoiceGroup in sync in both directions.</div>
     <br />
     <div class="example-content">
+        <div>
+            <BitChoiceGroup Label="Uncontrolled (DefaultValue)" Items="basicItems" DefaultValue="@("A")"
+                            OnChange="(string? value) => uncontrolledValue = value" />
+            <br />
+            <div>Selected: <b>@uncontrolledValue</b></div>
+        </div>
+
         <div>
             <BitChoiceGroup Label="One-way" Items="basicItems" Value="@oneWayValue" />
             <br />
@@ -131,7 +144,7 @@
 </DemoExample>
 
 <DemoExample Title="Validation" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
-    <div>Integrates with EditForm and data annotations, marking the group as invalid and showing the validation message until a choice is made. The Required parameter adds the required asterisk to the group label.</div>
+    <div>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.</div>
     <br />
     @if (string.IsNullOrEmpty(successMessage))
     {
@@ -154,7 +167,7 @@
     <BitButton Variant="BitVariant.Outline" OnClick="() => { validationModel = new(); successMessage=string.Empty; }">Reset</BitButton>
 </DemoExample>
 
-<DemoExample Title="Descriptions" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
+<DemoExample Title="Item descriptions" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
     <div>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.</div>
     <br />
     <div class="example-content">
@@ -163,7 +176,7 @@
 </DemoExample>
 
 <DemoExample Title="ReadOnly" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
-    <div>Prevents changing the value using the ReadOnly parameter while keeping the normal (non-disabled) appearance; readonly items are also removed from the keyboard tab order.</div>
+    <div>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.</div>
     <br />
     <div class="example-content">
         <BitChoiceGroup Label="ReadOnly" ReadOnly Items="basicItems" @bind-Value="readOnlyValue" />
@@ -180,16 +193,24 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Prefix" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
-    <div>Adds plain text in front of each item using the per-item Prefix, rendered before the radio circle. For arbitrary prefix content, use the ItemPrefixTemplate shown in the Item templates section.</div>
+<DemoExample Title="Prefix & Suffix" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
+    <div>Wraps the content of each item in plain text: Prefix is rendered in front of the radio circle 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.</div>
     <br />
-    <div class="example-content">
-        <BitChoiceGroup Label="Shipping method" Items="prefixItems" DefaultValue="@("Standard")" />
+    <div class="example-content column">
+        <BitChoiceGroup Label="Shipping method (Prefix)" Items="prefixItems" DefaultValue="@("Standard")" />
+
+        <div class="example-box">
+            <BitChoiceGroup Label="Shipping method (Suffix)"
+                            Items="suffixItems"
+                            DefaultValue="@("Standard")"
+                            FullWidth
+                            Styles="@(new() { ItemSuffix = "margin-inline-start: auto;" })" />
+        </div>
     </div>
 </DemoExample>
 
 <DemoExample Title="Events" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
-    <div>Raises OnChange whenever the selected value changes, OnClick on every click of an enabled item, including the already selected one, and OnFocus and OnBlur as the focus moves between the items.</div>
+    <div>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.</div>
     <br />
     <div class="example-content column">
         <BitChoiceGroup Label="Events" Items="basicItems" DefaultValue="@("A")"
@@ -221,7 +242,71 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Color" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
+<DemoExample Title="Group description" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
+    <div>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.</div>
+    <br />
+    <div class="example-content column">
+        <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>
+    </div>
+</DemoExample>
+
+<DemoExample Title="FullWidth" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17" PreventRenderForMcpClient>
+    <div>Stretches the ChoiceGroup to the full width of its container instead of letting it hug its widest item, which is what lines a ChoiceGroup up with the other full width fields of a form. In the horizontal layout the items additionally share that width in equal columns. In the vertical layout every item row spans the full width, so LabelPosition.Start now has room to push the items to the far edge; stretching the item label over that row as well turns it into the label-at-the-start, circle-at-the-end list found in settings pages.</div>
+    <br />
+    <div class="example-content column">
+        <div class="example-box">
+            <BitChoiceGroup Label="Default (hugs the widest item)" Items="basicItems" DefaultValue="@("A")" Horizontal />
+        </div>
+        <div class="example-box">
+            <BitChoiceGroup Label="FullWidth (horizontal, equal columns)" Items="basicItems" DefaultValue="@("A")" Horizontal FullWidth />
+        </div>
+        <div class="example-box">
+            <BitChoiceGroup Label="FullWidth + LabelPosition.Start (items at the far edge)" Items="basicItems" DefaultValue="@("A")" LabelPosition="BitLabelPosition.Start" FullWidth />
+        </div>
+        <div class="example-box">
+            <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;" })" />
+        </div>
+    </div>
+</DemoExample>
+
+<DemoExample Title="Item title" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18">
+    <div>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.</div>
+    <br />
+    <div class="example-content">
+        <BitChoiceGroup Label="Delivery window (hover an item)" Items="titleItems" DefaultValue="@("24h")" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="AutoFocus" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
+    <div>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.</div>
+    <br />
+    <div class="example-content column">
+        <BitButton OnClick="() => showAutoFocus = !showAutoFocus">@(showAutoFocus ? "Unmount" : "Mount") the auto focused ChoiceGroup</BitButton>
+        @if (showAutoFocus)
+        {
+            <BitChoiceGroup AutoFocus Label="Auto focused" Items="basicItems" DefaultValue="@("B")" />
+        }
+    </div>
+</DemoExample>
+
+<DemoExample Title="Color" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20">
         <div>Colors the radio circle and the checked state of the items using the BitColor palette, with Primary being the default.</div>
         <br />
         <div>
@@ -369,7 +454,7 @@
         </div>
     </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17">
+<DemoExample Title="External Icons" RazorCode="@example21RazorCode" CsharpCode="@example21CsharpCode" Id="example21">
     <div>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.</div>
 
     <br />
@@ -388,7 +473,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Size" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18">
+<DemoExample Title="Size" RazorCode="@example22RazorCode" CsharpCode="@example22CsharpCode" Id="example22">
     <div>Comes in Small, Medium (default), and Large sizes that scale the radio circle, text, icons, and item spacing together.</div>
     <br /><br />
     <div>Basic ChoiceGroup</div>
@@ -452,7 +537,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Style & Class" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19">
+<DemoExample Title="Style & Class" RazorCode="@example23RazorCode" CsharpCode="@example23CsharpCode" Id="example23">
     <div>Customizes the appearance at every level: Style and Class on the root element, per-item styles and classes, and the Styles and Classes objects that target the internal parts of the component, including the checked state of the items.</div>
     <br /><br />
     <div>Component's Style & Class:</div>
@@ -496,7 +581,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="RTL" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20" PreventRenderForMcpClient>
+<DemoExample Title="RTL" RazorCode="@example24RazorCode" CsharpCode="@example24CsharpCode" Id="example24" PreventRenderForMcpClient>
     <div>Renders the ChoiceGroup in right-to-left mode; the layout is mirrored and the keyboard arrow keys follow the text direction.</div>
     <br />
     <div dir="rtl" class="example-content">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.cs
index 9352ab2f12..0f1f8e39eb 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.cs
@@ -5,6 +5,8 @@ public partial class _BitChoiceGroupItemDemo
     private string oneWayValue = "A";
     private string twoWayValue = "A";
     private string readOnlyValue = "A";
+    private bool showAutoFocus;
+    private string? uncontrolledValue = "A";
 
     private string? changedValue;
     private string? clickedItem;
@@ -117,6 +119,13 @@ public partial class _BitChoiceGroupItemDemo
         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" }
+    ];
+
     private readonly List<BitChoiceGroupItem<string>> descriptionItems =
     [
         new() { Text = "Daily", Value = "Daily", Description = "Backs up every night at 2 AM." },
@@ -124,6 +133,20 @@ public partial class _BitChoiceGroupItemDemo
         new() { Text = "Monthly", Value = "Monthly", Description = "Backs up on the first day of each month." }
     ];
 
+    private readonly List<BitChoiceGroupItem<string>> deploymentItems =
+    [
+        new() { Text = "Development", Value = "Development" },
+        new() { Text = "Staging", Value = "Staging" },
+        new() { Text = "Production", Value = "Production" }
+    ];
+
+    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" }
+    ];
+
     private readonly List<BitChoiceGroupItem<string>> itemLabelTemplates =
     [
         new() { Text = "Day", Value = "Day", IconName = BitIconName.CalendarDay },
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs
index 6417f33dfd..153f206bb1 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs
@@ -148,7 +148,13 @@ public partial class _BitChoiceGroupItemDemo
 ];";
 
     private readonly string example5RazorCode = @"
-<BitChoiceGroup Label=""Reversed"" Items=""basicItems"" DefaultValue=""@(""A"")"" Reversed Horizontal />";
+<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 />";
     private readonly string example5CsharpCode = @"
 private readonly List<BitChoiceGroupItem<string>> basicItems =
 [
@@ -247,10 +253,13 @@ public partial class _BitChoiceGroupItemDemo
     }
 </style>
 
-<BitChoiceGroup Label=""ItemPrefixTemplate"" Items=""basicItems"" DefaultValue=""@string.Empty"">
+<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"">
@@ -336,6 +345,10 @@ protected override void OnInitialized()
 }";
 
     private readonly string example8RazorCode = @"
+<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"" />
 
@@ -344,6 +357,7 @@ protected override void OnInitialized()
     private readonly string example8CsharpCode = @"
 private string oneWayValue = ""A"";
 private string twoWayValue = ""A"";
+private string? uncontrolledValue = ""A"";
 
 private readonly List<BitChoiceGroupItem<string>> basicItems =
 [
@@ -425,13 +439,26 @@ private void HandleInvalidSubmit() { }
 ];";
 
     private readonly string example13RazorCode = @"
-<BitChoiceGroup Label=""Shipping method"" Items=""prefixItems"" DefaultValue=""@(""Standard"")"" />";
+<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;"" })"" />";
     private readonly string example13CsharpCode = @"
 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"" }
 ];";
 
     private readonly string example14RazorCode = @"
@@ -497,7 +524,79 @@ private void ReverseDynamicItems()
 }";
 
     private readonly string example16RazorCode = @"
-<BitChoiceGroup Color=""BitColor.Primary"" 
+<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>";
+    private readonly string example16CsharpCode = @"
+private readonly List<BitChoiceGroupItem<string>> deploymentItems =
+[
+    new() { Text = ""Development"", Value = ""Development"" },
+    new() { Text = ""Staging"", Value = ""Staging"" },
+    new() { Text = ""Production"", Value = ""Production"" }
+];";
+
+    private readonly string example17RazorCode = @"
+<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;"" })"" />";
+    private readonly string example17CsharpCode = @"
+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 string example18RazorCode = @"
+<BitChoiceGroup Label=""Delivery window (hover an item)"" Items=""titleItems"" DefaultValue=""@(""24h"")"" />";
+    private readonly string example18CsharpCode = @"
+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"" }
+];";
+
+    private readonly string example19RazorCode = @"
+<BitButton OnClick=""() => showAutoFocus = !showAutoFocus"">@(showAutoFocus ? ""Unmount"" : ""Mount"") the auto focused ChoiceGroup</BitButton>
+
+@if (showAutoFocus)
+{
+    <BitChoiceGroup AutoFocus Label=""Auto focused"" Items=""basicItems"" DefaultValue=""@(""B"")"" />
+}";
+    private readonly string example19CsharpCode = @"
+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"" }
+];";
+
+    private readonly string example20RazorCode = @"
+<BitChoiceGroup Color=""BitColor.Primary""
                 Label=""Primary"" 
                 Horizontal
                 Items=""basicItems""
@@ -598,7 +697,7 @@ private void ReverseDynamicItems()
                 Horizontal
                 Items=""basicItems""
                 DefaultValue=""basicItems[1].Value"" />";
-    private readonly string example16CsharpCode = @"
+    private readonly string example20CsharpCode = @"
 private readonly List<BitChoiceGroupItem<string>> basicItems =
 [
     new() { Text = ""Item A"", Value = ""A"" },
@@ -607,7 +706,7 @@ private void ReverseDynamicItems()
     new() { Text = ""Item D"", Value = ""D"" }
 ];";
 
-    private readonly string example17RazorCode = @"
+    private readonly string example21RazorCode = @"
 <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/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
 
@@ -616,7 +715,7 @@ private void ReverseDynamicItems()
 <BitChoiceGroup Label=""External Icons (Inline)"" Items=""externalIconItems"" DefaultValue=""@(""Day"")"" Inline />
 
 <BitChoiceGroup Label=""External Icons (Horizontal)"" Items=""externalIconItems"" DefaultValue=""@(""Day"")"" Horizontal />";
-    private readonly string example17CsharpCode = @"
+    private readonly string example21CsharpCode = @"
 private readonly List<BitChoiceGroupItem<string>> externalIconItems =
 [
     new() { Text = ""Day"", Value = ""Day"", Icon = BitIconInfo.Fa(""solid sun"") },
@@ -624,7 +723,7 @@ private void ReverseDynamicItems()
     new() { Text = ""Month"", Value = ""Month"", Icon = BitIconInfo.Bi(""calendar-month"") }
 ];";
 
-    private readonly string example18RazorCode = @"
+    private readonly string example22RazorCode = @"
 <BitChoiceGroup Size=""BitSize.Small""
                 Label=""Small""
                 Items=""basicItems""
@@ -675,7 +774,7 @@ Horizontal Inline />
                 Items=""iconItems"" 
                 DefaultValue=""@(""Day"")""
                 Horizontal />";
-    private readonly string example18CsharpCode = @"
+    private readonly string example22CsharpCode = @"
 private readonly List<BitChoiceGroupItem<string>> basicItems =
 [
     new() { Text = ""Item A"", Value = ""A"" },
@@ -691,7 +790,7 @@ Horizontal Inline />
     new() { Text = ""Month"", Value = ""Month"", IconName = BitIconName.Calendar, IsEnabled = false }
 ];";
 
-    private readonly string example19RazorCode = @"
+    private readonly string example23RazorCode = @"
 <style>
     .custom-class {
         color: dodgerblue;
@@ -764,7 +863,7 @@ Horizontal Inline />
                                    ItemText = ""custom-text"",
                                    ItemChecked = ""custom-checked"",
                                    ItemRadioButton = ""custom-radio-btn"" })"" />";
-    private readonly string example19CsharpCode = @"
+    private readonly string example23CsharpCode = @"
 private readonly List<BitChoiceGroupItem<string>> basicItems =
 [
     new() { Text = ""Item A"", Value = ""A"" },
@@ -781,10 +880,10 @@ Horizontal Inline />
     new() { Text = ""Item D"", Value = ""D"", Class = ""custom-item"" }
 ];";
 
-    private readonly string example20RazorCode = @"
+    private readonly string example24RazorCode = @"
 <BitChoiceGroup Label=""ساده"" Items=""rtlItems"" DefaultValue=""@(""A"")"" Dir=""BitDir.Rtl"" />
 <BitChoiceGroup Label=""غیرفعال"" Items=""rtlItems"" IsEnabled=""false"" DefaultValue=""@(""A"")"" Dir=""BitDir.Rtl"" />";
-    private readonly string example20CsharpCode = @"
+    private readonly string example24CsharpCode = @"
 private readonly List<BitChoiceGroupItem<string>> rtlItems = new()
 {
     new() { Text = ""بخش آ"", Value = ""A"" },
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor
index a548240958..f5a6ae0a6c 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor
@@ -44,7 +44,7 @@
 </DemoExample>
 
 <DemoExample Title="Images and Icons" RazorCode="@example3RazorCode" Id="example3" PreventRenderForMcpClient>
-    <div>Displays items as image or icon tiles. An image item can provide a different image for its checked state, and the Inline mode renders the image or icon on the same line as the item text.</div>
+    <div>Displays items as image or icon tiles: ImageSrc with an optional ImageSize renders a picture, IconName (or Icon for an external library) renders a glyph, and SelectedImageSrc swaps in a second picture while the item is checked. The images are marked decorative so the item text carries the accessible name; set ImageAlt only when the picture says something the text does not. The Inline mode drops the tile layout and puts the image or icon on the same line as the text.</div>
     <br /><br />
     <div class="example-content">
         <BitChoiceGroup Label="Image Options"
@@ -105,7 +105,7 @@
 </DemoExample>
 
 <DemoExample Title="Horizontal" RazorCode="@example4RazorCode" Id="example4" PreventRenderForMcpClient>
-    <div>Lays out the items horizontally instead of the default vertical stack, wrapping onto new lines when the available width runs out.</div>
+    <div>Lays out the items in a row instead of the default vertical stack, wrapping onto new lines when the available width runs out. The aria-orientation of the radiogroup follows this parameter, so assistive technology announces the same orientation the eye sees.</div>
     <br />
     <div class="example-content column">
         <BitChoiceGroup Label="Basic" TItem="BitChoiceGroupOption<string>" TValue="string" DefaultValue="@("A")" Horizontal>
@@ -145,11 +145,32 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Reversed" RazorCode="@example5RazorCode" Id="example5" PreventRenderForMcpClient>
-    <div>Moves the radio circle to the far end of each item, rendering it after the item content.</div>
+<DemoExample Title="LabelPosition" RazorCode="@example5RazorCode" Id="example5" PreventRenderForMcpClient>
+    <div>Places the content of each option on any of the four sides of its radio circle. End is the default and renders the circle first; Start renders the content first and additionally aligns the options to the end of the group, so the circles line up in one column once the group is wider than its options (which is what the FullWidth section combines it with). Top and Bottom stack the content above or below the circle. Options rendered as image or icon tiles lay their own content out and are not affected.</div>
     <br />
     <div class="example-content column">
-         <BitChoiceGroup Label="Reversed" TItem="BitChoiceGroupOption<string>" TValue="string" DefaultValue="@("A")" Reversed Horizontal>
+        <BitChoiceGroup Label="End (default)" TItem="BitChoiceGroupOption<string>" TValue="string" DefaultValue="@("A")" LabelPosition="BitLabelPosition.End" Horizontal>
+            <BitChoiceGroupOption Text="Option A" Value="@("A")" />
+            <BitChoiceGroupOption Text="Option B" Value="@("B")" />
+            <BitChoiceGroupOption Text="Option C" Value="@("C")" />
+            <BitChoiceGroupOption Text="Option D" Value="@("D")" />
+        </BitChoiceGroup>
+
+        <BitChoiceGroup Label="Start" TItem="BitChoiceGroupOption<string>" TValue="string" DefaultValue="@("A")" LabelPosition="BitLabelPosition.Start" Horizontal>
+            <BitChoiceGroupOption Text="Option A" Value="@("A")" />
+            <BitChoiceGroupOption Text="Option B" Value="@("B")" />
+            <BitChoiceGroupOption Text="Option C" Value="@("C")" />
+            <BitChoiceGroupOption Text="Option D" Value="@("D")" />
+        </BitChoiceGroup>
+
+        <BitChoiceGroup Label="Top" TItem="BitChoiceGroupOption<string>" TValue="string" DefaultValue="@("A")" LabelPosition="BitLabelPosition.Top" Horizontal>
+            <BitChoiceGroupOption Text="Option A" Value="@("A")" />
+            <BitChoiceGroupOption Text="Option B" Value="@("B")" />
+            <BitChoiceGroupOption Text="Option C" Value="@("C")" />
+            <BitChoiceGroupOption Text="Option D" Value="@("D")" />
+        </BitChoiceGroup>
+
+        <BitChoiceGroup Label="Bottom" TItem="BitChoiceGroupOption<string>" TValue="string" DefaultValue="@("A")" LabelPosition="BitLabelPosition.Bottom" Horizontal>
             <BitChoiceGroupOption Text="Option A" Value="@("A")" />
             <BitChoiceGroupOption Text="Option B" Value="@("B")" />
             <BitChoiceGroupOption Text="Option C" Value="@("C")" />
@@ -159,7 +180,7 @@
 </DemoExample>
 
 <DemoExample Title="LabelTemplate" RazorCode="@example6RazorCode" Id="example6" PreventRenderForMcpClient>
-    <div>Replaces the plain text label of the ChoiceGroup with fully custom content using the LabelTemplate.</div>
+    <div>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.</div>
     <br />
     <BitChoiceGroup TItem="BitChoiceGroupOption<string>" TValue="string" DefaultValue="@("A")">
         <LabelTemplate>
@@ -177,13 +198,16 @@
 </DemoExample>
 
 <DemoExample Title="Item templates" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
-    <div>Customizes the item rendering at different levels: ItemPrefixTemplate prepends content to each item, ItemLabelTemplate replaces the content next to the radio circle, and ItemTemplate or the per-item Template takes over the whole item rendering.</div>
+    <div>Customizes the item rendering at four different levels, from the smallest scope to the largest: ItemPrefixTemplate and ItemSuffixTemplate add content before and after the built-in option content and leave it in place, ItemLabelTemplate replaces the content next to the radio circle but keeps the circle, and ItemTemplate (or the Template of a single option, which wins over it) takes over the whole option rendering including the circle.</div>
     <br />
     <div class="example-content">
-        <BitChoiceGroup Label="ItemPrefixTemplate" TItem="BitChoiceGroupOption<string>" TValue="string">
+        <BitChoiceGroup Label="ItemPrefixTemplate & ItemSuffixTemplate" TItem="BitChoiceGroupOption<string>" TValue="string">
             <ItemPrefixTemplate Context="option">
                 @(option.Index + 1).&nbsp;
             </ItemPrefixTemplate>
+            <ItemSuffixTemplate Context="option">
+                &nbsp;<b>(@option.Value)</b>
+            </ItemSuffixTemplate>
             <Options>
                 <BitChoiceGroupOption Text="Option A" Value="@("A")" />
                 <BitChoiceGroupOption Text="Option B" Value="@("B")" />
@@ -255,9 +279,21 @@
 </DemoExample>
 
 <DemoExample Title="Binding" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
-    <div>Binds the selected value with one-way binding (Value), where only the model drives the ChoiceGroup, or two-way binding (@@bind-Value) that keeps the model and the ChoiceGroup in sync.</div>
+    <div>Binds the selected value in three ways. DefaultValue only seeds the initial selection and then leaves the ChoiceGroup to own its value, reporting every change through OnChange; this uncontrolled mode is how most of the examples on this page are set up. Value alone is one-way: the model drives the ChoiceGroup and a click cannot write back, so editing the text box below moves the selection but clicking an option does not change the text box. @@bind-Value is two-way and keeps the model and the ChoiceGroup in sync in both directions.</div>
     <br />
     <div class="example-content">
+        <div>
+            <BitChoiceGroup Label="Uncontrolled (DefaultValue)" DefaultValue="@("A")"
+                            OnChange="(string? value) => uncontrolledValue = value"
+                            TItem="BitChoiceGroupOption<string>" TValue="string">
+                <BitChoiceGroupOption Text="Option A" Value="@("A")" />
+                <BitChoiceGroupOption Text="Option B" Value="@("B")" />
+                <BitChoiceGroupOption Text="Option C" Value="@("C")" />
+                <BitChoiceGroupOption Text="Option D" Value="@("D")" />
+            </BitChoiceGroup>
+            <br />
+            <div>Selected: <b>@uncontrolledValue</b></div>
+        </div>
         <div>
             <BitChoiceGroup Label="One-way" Value="@oneWayValue"
                             TItem="BitChoiceGroupOption<string>" TValue="string">
@@ -284,7 +320,7 @@
 </DemoExample>
 
 <DemoExample Title="Validation" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9" PreventRenderForMcpClient>
-    <div>Integrates with EditForm and data annotations, marking the group as invalid and showing the validation message until a choice is made. The Required parameter adds the required asterisk to the group label.</div>
+    <div>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.</div>
     <br />
     @if (string.IsNullOrEmpty(successMessage))
     {
@@ -312,7 +348,7 @@
     <BitButton Variant="BitVariant.Outline" OnClick="() => { validationModel = new(); successMessage=string.Empty; }">Reset</BitButton>
 </DemoExample>
 
-<DemoExample Title="Descriptions" RazorCode="@example10RazorCode" Id="example10">
+<DemoExample Title="Item descriptions" RazorCode="@example10RazorCode" Id="example10">
     <div>Adds secondary text under each option using the Description parameter. The description is automatically linked to its input via aria-describedby, so screen readers announce it along with the option label.</div>
     <br />
     <div class="example-content">
@@ -325,7 +361,7 @@
 </DemoExample>
 
 <DemoExample Title="ReadOnly" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
-    <div>Prevents changing the value using the ReadOnly parameter while keeping the normal (non-disabled) appearance; readonly items are also removed from the keyboard tab order.</div>
+    <div>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.</div>
     <br />
     <div class="example-content">
         <BitChoiceGroup Label="ReadOnly" ReadOnly @bind-Value="readOnlyValue" TItem="BitChoiceGroupOption<string>" TValue="string">
@@ -357,20 +393,32 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Prefix" RazorCode="@example13RazorCode" Id="example13">
-    <div>Adds plain text in front of each option using the Prefix parameter, rendered before the radio circle. For arbitrary prefix content, use the ItemPrefixTemplate shown in the Item templates section.</div>
+<DemoExample Title="Prefix & Suffix" RazorCode="@example13RazorCode" Id="example13">
+    <div>Wraps the content of each option in plain text: Prefix is rendered in front of the radio circle and Suffix after the content of the option. 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.</div>
     <br />
-    <div class="example-content">
-        <BitChoiceGroup Label="Shipping method" DefaultValue="@("Standard")" TItem="BitChoiceGroupOption<string>" TValue="string">
+    <div class="example-content column">
+        <BitChoiceGroup Label="Shipping method (Prefix)" DefaultValue="@("Standard")" TItem="BitChoiceGroupOption<string>" TValue="string">
             <BitChoiceGroupOption Text="Standard" Value="@("Standard")" Prefix="$0 — " />
             <BitChoiceGroupOption Text="Express" Value="@("Express")" Prefix="$10 — " />
             <BitChoiceGroupOption Text="Overnight" Value="@("Overnight")" Prefix="$25 — " />
         </BitChoiceGroup>
+
+        <div class="example-box">
+            <BitChoiceGroup Label="Shipping method (Suffix)"
+                            DefaultValue="@("Standard")"
+                            FullWidth
+                            Styles="@(new() { ItemSuffix = "margin-inline-start: auto;" })"
+                            TItem="BitChoiceGroupOption<string>" TValue="string">
+                <BitChoiceGroupOption Text="Standard" Value="@("Standard")" Suffix="Free" />
+                <BitChoiceGroupOption Text="Express" Value="@("Express")" Suffix="$10" />
+                <BitChoiceGroupOption Text="Overnight" Value="@("Overnight")" Suffix="$25" />
+            </BitChoiceGroup>
+        </div>
     </div>
 </DemoExample>
 
 <DemoExample Title="Events" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
-    <div>Raises OnChange whenever the selected value changes, OnClick on every click of an enabled option, including the already selected one, and OnFocus and OnBlur as the focus moves between the options.</div>
+    <div>Raises OnChange with the new value whenever the selection actually changes, and OnClick with the whole option on every activation of an enabled option, 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 option as the focus moves between the options. All four stay silent while the group is disabled or read-only.</div>
     <br />
     <div class="example-content column">
         <BitChoiceGroup Label="Events" DefaultValue="@("A")" TItem="BitChoiceGroupOption<string>" TValue="string"
@@ -413,7 +461,108 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Color" RazorCode="@example16RazorCode" Id="example16" PreventRenderForMcpClient>
+<DemoExample Title="Group description" RazorCode="@example16RazorCode" Id="example16">
+    <div>Adds a helper text under the label to explain the whole set of choices, as opposed to the per-option Description that explains a single option. 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.</div>
+    <br />
+    <div class="example-content column">
+        <BitChoiceGroup Label="Deployment target"
+                        Description="Only the selected environment receives the new build."
+                        DefaultValue="@("Staging")"
+                        TItem="BitChoiceGroupOption<string>" TValue="string">
+            <BitChoiceGroupOption Text="Development" Value="@("Development")" />
+            <BitChoiceGroupOption Text="Staging" Value="@("Staging")" />
+            <BitChoiceGroupOption Text="Production" Value="@("Production")" />
+        </BitChoiceGroup>
+
+        <BitChoiceGroup Label="Deployment target" DefaultValue="@("Staging")" TItem="BitChoiceGroupOption<string>" TValue="string">
+            <DescriptionTemplate>
+                <div class="custom-description">
+                    <BitIcon IconName="@BitIconName.Info" />
+                    <span>Only the selected environment receives the new build.</span>
+                </div>
+            </DescriptionTemplate>
+            <Options>
+                <BitChoiceGroupOption Text="Development" Value="@("Development")" />
+                <BitChoiceGroupOption Text="Staging" Value="@("Staging")" />
+                <BitChoiceGroupOption Text="Production" Value="@("Production")" />
+            </Options>
+        </BitChoiceGroup>
+    </div>
+</DemoExample>
+
+<DemoExample Title="FullWidth" RazorCode="@example17RazorCode" Id="example17" PreventRenderForMcpClient>
+    <div>Stretches the ChoiceGroup to the full width of its container instead of letting it hug its widest option, which is what lines a ChoiceGroup up with the other full width fields of a form. In the horizontal layout the options additionally share that width in equal columns. In the vertical layout every option row spans the full width, so LabelPosition.Start now has room to push the options to the far edge; stretching the option label over that row as well turns it into the label-at-the-start, circle-at-the-end list found in settings pages.</div>
+    <br />
+    <div class="example-content column">
+        <div class="example-box">
+            <BitChoiceGroup Label="Default (hugs the widest option)" DefaultValue="@("A")" Horizontal TItem="BitChoiceGroupOption<string>" TValue="string">
+                <BitChoiceGroupOption Text="Option A" Value="@("A")" />
+                <BitChoiceGroupOption Text="Option B" Value="@("B")" />
+                <BitChoiceGroupOption Text="Option C" Value="@("C")" />
+                <BitChoiceGroupOption Text="Option D" Value="@("D")" />
+            </BitChoiceGroup>
+        </div>
+        <div class="example-box">
+            <BitChoiceGroup Label="FullWidth (horizontal, equal columns)" DefaultValue="@("A")" Horizontal FullWidth TItem="BitChoiceGroupOption<string>" TValue="string">
+                <BitChoiceGroupOption Text="Option A" Value="@("A")" />
+                <BitChoiceGroupOption Text="Option B" Value="@("B")" />
+                <BitChoiceGroupOption Text="Option C" Value="@("C")" />
+                <BitChoiceGroupOption Text="Option D" Value="@("D")" />
+            </BitChoiceGroup>
+        </div>
+        <div class="example-box">
+            <BitChoiceGroup Label="FullWidth + LabelPosition.Start (options at the far edge)" DefaultValue="@("A")" LabelPosition="BitLabelPosition.Start" FullWidth TItem="BitChoiceGroupOption<string>" TValue="string">
+                <BitChoiceGroupOption Text="Option A" Value="@("A")" />
+                <BitChoiceGroupOption Text="Option B" Value="@("B")" />
+                <BitChoiceGroupOption Text="Option C" Value="@("C")" />
+                <BitChoiceGroupOption Text="Option D" Value="@("D")" />
+            </BitChoiceGroup>
+        </div>
+        <div class="example-box">
+            <BitChoiceGroup Label="FullWidth + LabelPosition.Start + stretched option label (settings list)"
+                            DefaultValue="@("A")"
+                            LabelPosition="BitLabelPosition.Start" FullWidth
+                            Styles="@(new() { ItemLabel = "width: 100%; justify-content: space-between;" })"
+                            TItem="BitChoiceGroupOption<string>" TValue="string">
+                <BitChoiceGroupOption Text="Option A" Value="@("A")" />
+                <BitChoiceGroupOption Text="Option B" Value="@("B")" />
+                <BitChoiceGroupOption Text="Option C" Value="@("C")" />
+                <BitChoiceGroupOption Text="Option D" Value="@("D")" />
+            </BitChoiceGroup>
+        </div>
+    </div>
+</DemoExample>
+
+<DemoExample Title="Item title" RazorCode="@example18RazorCode" Id="example18">
+    <div>Sets the native browser tooltip of an option through its Title, which is handy when the option 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 option text, its AriaLabel, or its Description.</div>
+    <br />
+    <div class="example-content">
+        <BitChoiceGroup Label="Delivery window (hover an option)" DefaultValue="@("24h")" TItem="BitChoiceGroupOption<string>" TValue="string">
+            <BitChoiceGroupOption Text="1 h" Value="@("1h")" Title="Delivered within one hour of dispatch" />
+            <BitChoiceGroupOption Text="24 h" Value="@("24h")" Title="Delivered within one business day" />
+            <BitChoiceGroupOption Text="72 h" Value="@("72h")" Title="Delivered within three business days" />
+        </BitChoiceGroup>
+    </div>
+</DemoExample>
+
+<DemoExample Title="AutoFocus" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
+    <div>Moves the keyboard focus into the ChoiceGroup on its first render. It lands on the checked option, or on the first enabled option when nothing is checked, which is exactly the option 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.</div>
+    <br />
+    <div class="example-content column">
+        <BitButton OnClick="() => showAutoFocus = !showAutoFocus">@(showAutoFocus ? "Unmount" : "Mount") the auto focused ChoiceGroup</BitButton>
+        @if (showAutoFocus)
+        {
+            <BitChoiceGroup AutoFocus Label="Auto focused" DefaultValue="@("B")" TItem="BitChoiceGroupOption<string>" TValue="string">
+                <BitChoiceGroupOption Text="Option A" Value="@("A")" />
+                <BitChoiceGroupOption Text="Option B" Value="@("B")" />
+                <BitChoiceGroupOption Text="Option C" Value="@("C")" />
+                <BitChoiceGroupOption Text="Option D" Value="@("D")" />
+            </BitChoiceGroup>
+        }
+    </div>
+</DemoExample>
+
+<DemoExample Title="Color" RazorCode="@example20RazorCode" Id="example20" PreventRenderForMcpClient>
         <div>Colors the radio circle and the checked state of the items using the BitColor palette, with Primary being the default.</div>
         <br />
         <div>
@@ -578,7 +727,7 @@
         </div>
     </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example17RazorCode" Id="example17" PreventRenderForMcpClient>
+<DemoExample Title="External Icons" RazorCode="@example21RazorCode" Id="example21" PreventRenderForMcpClient>
     <div>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.</div>
     
     <br />
@@ -609,7 +758,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Size" RazorCode="@example18RazorCode" Id="example18" PreventRenderForMcpClient>
+<DemoExample Title="Size" RazorCode="@example22RazorCode" Id="example22" PreventRenderForMcpClient>
     <div>Comes in Small, Medium (default), and Large sizes that scale the radio circle, text, icons, and item spacing together.</div>
     <br /><br />
     <div>Basic ChoiceGroup</div>
@@ -703,7 +852,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Style & Class" RazorCode="@example19RazorCode" Id="example19" PreventRenderForMcpClient>
+<DemoExample Title="Style & Class" RazorCode="@example23RazorCode" Id="example23" PreventRenderForMcpClient>
     <div>Customizes the appearance at every level: Style and Class on the root element, per-item styles and classes, and the Styles and Classes objects that target the internal parts of the component, including the checked state of the items.</div>
     <br /><br />
     <div>Component's Style & Class:</div>
@@ -768,7 +917,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="RTL" RazorCode="@example20RazorCode" Id="example20" PreventRenderForMcpClient>
+<DemoExample Title="RTL" RazorCode="@example24RazorCode" Id="example24" PreventRenderForMcpClient>
     <div>Renders the ChoiceGroup in right-to-left mode; the layout is mirrored and the keyboard arrow keys follow the text direction.</div>
     <br />
     <div dir="rtl" class="example-content">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.cs
index 145d71f6b8..0812bb5ada 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.cs
@@ -5,6 +5,8 @@ public partial class _BitChoiceGroupOptionDemo
     private string oneWayValue = "A";
     private string twoWayValue = "A";
     private string readOnlyValue = "A";
+    private bool showAutoFocus;
+    private string? uncontrolledValue = "A";
 
     private string? changedValue;
     private string? clickedOption;
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs
index ebe4fc2a1a..39aee9328f 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs
@@ -128,7 +128,28 @@ public partial class _BitChoiceGroupOptionDemo
 </BitChoiceGroup>";
 
     private readonly string example5RazorCode = @"
-<BitChoiceGroup Label=""Reversed"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"" DefaultValue=""@(""A"")"" Reversed Horizontal>
+<BitChoiceGroup Label=""End (default)"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"" DefaultValue=""@(""A"")"" LabelPosition=""BitLabelPosition.End"" Horizontal>
+    <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
+    <BitChoiceGroupOption Text=""Option B"" Value=""@(""B"")"" />
+    <BitChoiceGroupOption Text=""Option C"" Value=""@(""C"")"" />
+    <BitChoiceGroupOption Text=""Option D"" Value=""@(""D"")"" />
+</BitChoiceGroup>
+
+<BitChoiceGroup Label=""Start"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"" DefaultValue=""@(""A"")"" LabelPosition=""BitLabelPosition.Start"" Horizontal>
+    <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
+    <BitChoiceGroupOption Text=""Option B"" Value=""@(""B"")"" />
+    <BitChoiceGroupOption Text=""Option C"" Value=""@(""C"")"" />
+    <BitChoiceGroupOption Text=""Option D"" Value=""@(""D"")"" />
+</BitChoiceGroup>
+
+<BitChoiceGroup Label=""Top"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"" DefaultValue=""@(""A"")"" LabelPosition=""BitLabelPosition.Top"" Horizontal>
+    <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
+    <BitChoiceGroupOption Text=""Option B"" Value=""@(""B"")"" />
+    <BitChoiceGroupOption Text=""Option C"" Value=""@(""C"")"" />
+    <BitChoiceGroupOption Text=""Option D"" Value=""@(""D"")"" />
+</BitChoiceGroup>
+
+<BitChoiceGroup Label=""Bottom"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"" DefaultValue=""@(""A"")"" LabelPosition=""BitLabelPosition.Bottom"" Horizontal>
     <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
     <BitChoiceGroupOption Text=""Option B"" Value=""@(""B"")"" />
     <BitChoiceGroupOption Text=""Option C"" Value=""@(""C"")"" />
@@ -193,10 +214,13 @@ public partial class _BitChoiceGroupOptionDemo
     }
 </style>
 
-<BitChoiceGroup Label=""ItemPrefixTemplate"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"">
+<BitChoiceGroup Label=""ItemPrefixTemplate & ItemSuffixTemplate"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"">
     <ItemPrefixTemplate Context=""option"">
         @(option.Index + 1).&nbsp;
     </ItemPrefixTemplate>
+    <ItemSuffixTemplate Context=""option"">
+        &nbsp;<b>(@option.Value)</b>
+    </ItemSuffixTemplate>
     <Options>
         <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
         <BitChoiceGroupOption Text=""Option B"" Value=""@(""B"")"" />
@@ -269,6 +293,17 @@ public partial class _BitChoiceGroupOptionDemo
 private string itemLabelTemplateValue = ""Day"";";
 
     private readonly string example8RazorCode = @"
+<BitChoiceGroup Label=""Uncontrolled (DefaultValue)"" DefaultValue=""@(""A"")""
+                OnChange=""(string? value) => uncontrolledValue = value""
+                TItem=""BitChoiceGroupOption<string>"" TValue=""string"">
+    <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
+    <BitChoiceGroupOption Text=""Option B"" Value=""@(""B"")"" />
+    <BitChoiceGroupOption Text=""Option C"" Value=""@(""C"")"" />
+    <BitChoiceGroupOption Text=""Option D"" Value=""@(""D"")"" />
+</BitChoiceGroup>
+<div>Selected: <b>@uncontrolledValue</b></div>
+
+
 <BitChoiceGroup Label=""One-way"" Value=""@oneWayValue""
                 TItem=""BitChoiceGroupOption<string>"" TValue=""string"">
     <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
@@ -289,7 +324,8 @@ public partial class _BitChoiceGroupOptionDemo
 <BitTextField @bind-Value=""twoWayValue"" />";
     private readonly string example8CsharpCode = @"
 private string oneWayValue = ""A"";
-private string twoWayValue = ""A"";";
+private string twoWayValue = ""A"";
+private string? uncontrolledValue = ""A"";";
 
     private readonly string example9RazorCode = @"
 <style>
@@ -356,10 +392,20 @@ private void HandleValidSubmit() { }
 </BitChoiceGroup>";
 
     private readonly string example13RazorCode = @"
-<BitChoiceGroup Label=""Shipping method"" DefaultValue=""@(""Standard"")"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"">
+<BitChoiceGroup Label=""Shipping method (Prefix)"" DefaultValue=""@(""Standard"")"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"">
     <BitChoiceGroupOption Text=""Standard"" Value=""@(""Standard"")"" Prefix=""$0 — "" />
     <BitChoiceGroupOption Text=""Express"" Value=""@(""Express"")"" Prefix=""$10 — "" />
     <BitChoiceGroupOption Text=""Overnight"" Value=""@(""Overnight"")"" Prefix=""$25 — "" />
+</BitChoiceGroup>
+
+<BitChoiceGroup Label=""Shipping method (Suffix)""
+                DefaultValue=""@(""Standard"")""
+                FullWidth
+                Styles=""@(new() { ItemSuffix = ""margin-inline-start: auto;"" })""
+                TItem=""BitChoiceGroupOption<string>"" TValue=""string"">
+    <BitChoiceGroupOption Text=""Standard"" Value=""@(""Standard"")"" Suffix=""Free"" />
+    <BitChoiceGroupOption Text=""Express"" Value=""@(""Express"")"" Suffix=""$10"" />
+    <BitChoiceGroupOption Text=""Overnight"" Value=""@(""Overnight"")"" Suffix=""$25"" />
 </BitChoiceGroup>";
 
     private readonly string example14RazorCode = @"
@@ -428,7 +474,86 @@ private void ReverseDynamicOptions()
 }";
 
     private readonly string example16RazorCode = @"
-<BitChoiceGroup Color=""BitColor.Primary"" Label=""Primary"" DefaultValue=""@(""B"")"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"" Horizontal>
+<BitChoiceGroup Label=""Deployment target""
+                Description=""Only the selected environment receives the new build.""
+                DefaultValue=""@(""Staging"")""
+                TItem=""BitChoiceGroupOption<string>"" TValue=""string"">
+    <BitChoiceGroupOption Text=""Development"" Value=""@(""Development"")"" />
+    <BitChoiceGroupOption Text=""Staging"" Value=""@(""Staging"")"" />
+    <BitChoiceGroupOption Text=""Production"" Value=""@(""Production"")"" />
+</BitChoiceGroup>
+
+<BitChoiceGroup Label=""Deployment target"" DefaultValue=""@(""Staging"")"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"">
+    <DescriptionTemplate>
+        <div class=""custom-description"">
+            <BitIcon IconName=""@BitIconName.Info"" />
+            <span>Only the selected environment receives the new build.</span>
+        </div>
+    </DescriptionTemplate>
+    <Options>
+        <BitChoiceGroupOption Text=""Development"" Value=""@(""Development"")"" />
+        <BitChoiceGroupOption Text=""Staging"" Value=""@(""Staging"")"" />
+        <BitChoiceGroupOption Text=""Production"" Value=""@(""Production"")"" />
+    </Options>
+</BitChoiceGroup>";
+
+    private readonly string example17RazorCode = @"
+<BitChoiceGroup Label=""Default (hugs the widest option)"" DefaultValue=""@(""A"")"" Horizontal TItem=""BitChoiceGroupOption<string>"" TValue=""string"">
+    <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
+    <BitChoiceGroupOption Text=""Option B"" Value=""@(""B"")"" />
+    <BitChoiceGroupOption Text=""Option C"" Value=""@(""C"")"" />
+    <BitChoiceGroupOption Text=""Option D"" Value=""@(""D"")"" />
+</BitChoiceGroup>
+
+<BitChoiceGroup Label=""FullWidth (horizontal, equal columns)"" DefaultValue=""@(""A"")"" Horizontal FullWidth TItem=""BitChoiceGroupOption<string>"" TValue=""string"">
+    <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
+    <BitChoiceGroupOption Text=""Option B"" Value=""@(""B"")"" />
+    <BitChoiceGroupOption Text=""Option C"" Value=""@(""C"")"" />
+    <BitChoiceGroupOption Text=""Option D"" Value=""@(""D"")"" />
+</BitChoiceGroup>
+
+<BitChoiceGroup Label=""FullWidth + LabelPosition.Start (options at the far edge)"" DefaultValue=""@(""A"")"" LabelPosition=""BitLabelPosition.Start"" FullWidth TItem=""BitChoiceGroupOption<string>"" TValue=""string"">
+    <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
+    <BitChoiceGroupOption Text=""Option B"" Value=""@(""B"")"" />
+    <BitChoiceGroupOption Text=""Option C"" Value=""@(""C"")"" />
+    <BitChoiceGroupOption Text=""Option D"" Value=""@(""D"")"" />
+</BitChoiceGroup>
+
+<BitChoiceGroup Label=""FullWidth + LabelPosition.Start + stretched option label (settings list)""
+                DefaultValue=""@(""A"")""
+                LabelPosition=""BitLabelPosition.Start"" FullWidth
+                Styles=""@(new() { ItemLabel = ""width: 100%; justify-content: space-between;"" })""
+                TItem=""BitChoiceGroupOption<string>"" TValue=""string"">
+    <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
+    <BitChoiceGroupOption Text=""Option B"" Value=""@(""B"")"" />
+    <BitChoiceGroupOption Text=""Option C"" Value=""@(""C"")"" />
+    <BitChoiceGroupOption Text=""Option D"" Value=""@(""D"")"" />
+</BitChoiceGroup>";
+
+    private readonly string example18RazorCode = @"
+<BitChoiceGroup Label=""Delivery window (hover an option)"" DefaultValue=""@(""24h"")"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"">
+    <BitChoiceGroupOption Text=""1 h"" Value=""@(""1h"")"" Title=""Delivered within one hour of dispatch"" />
+    <BitChoiceGroupOption Text=""24 h"" Value=""@(""24h"")"" Title=""Delivered within one business day"" />
+    <BitChoiceGroupOption Text=""72 h"" Value=""@(""72h"")"" Title=""Delivered within three business days"" />
+</BitChoiceGroup>";
+
+    private readonly string example19RazorCode = @"
+<BitButton OnClick=""() => showAutoFocus = !showAutoFocus"">@(showAutoFocus ? ""Unmount"" : ""Mount"") the auto focused ChoiceGroup</BitButton>
+
+@if (showAutoFocus)
+{
+    <BitChoiceGroup AutoFocus Label=""Auto focused"" DefaultValue=""@(""B"")"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"">
+        <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
+        <BitChoiceGroupOption Text=""Option B"" Value=""@(""B"")"" />
+        <BitChoiceGroupOption Text=""Option C"" Value=""@(""C"")"" />
+        <BitChoiceGroupOption Text=""Option D"" Value=""@(""D"")"" />
+    </BitChoiceGroup>
+}";
+    private readonly string example19CsharpCode = @"
+private bool showAutoFocus;";
+
+    private readonly string example20RazorCode = @"
+<BitChoiceGroup Color=""BitColor.Primary"" Label=""Primary""DefaultValue=""@(""B"")"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"" Horizontal>
     <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
     <BitChoiceGroupOption Text=""Option B"" Value=""@(""B"")"" />
     <BitChoiceGroupOption Text=""Option C"" Value=""@(""C"")"" />
@@ -547,7 +672,7 @@ private void ReverseDynamicOptions()
     <BitChoiceGroupOption Text=""Option D"" Value=""@(""D"")"" />
 </BitChoiceGroup>";
 
-    private readonly string example17RazorCode = @"
+    private readonly string example21RazorCode = @"
 <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/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
 
@@ -569,7 +694,7 @@ private void ReverseDynamicOptions()
     <BitChoiceGroupOption Text=""Month"" Value=""@(""Month"")"" Icon=""@BitIconInfo.Bi(""calendar-month"")"" />
 </BitChoiceGroup>";
 
-    private readonly string example18RazorCode = @"
+    private readonly string example22RazorCode = @"
 <BitChoiceGroup Size=""BitSize.Small"" Label=""Small"" DefaultValue=""@(""B"")"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"" Horizontal>
     <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
     <BitChoiceGroupOption Text=""Option B"" Value=""@(""B"")"" />
@@ -651,7 +776,7 @@ private void ReverseDynamicOptions()
     <BitChoiceGroupOption Text=""Month"" Value=""@(""Month"")"" IconName=""@BitIconName.Calendar"" IsEnabled=""false"" />
 </BitChoiceGroup>";
 
-    private readonly string example19RazorCode = @"
+    private readonly string example23RazorCode = @"
 <style>
     .custom-class {
         color: dodgerblue;
@@ -746,7 +871,7 @@ private void ReverseDynamicOptions()
     <BitChoiceGroupOption Text=""Option D"" Value=""@(""D"")"" />
 </BitChoiceGroup>";
 
-    private readonly string example20RazorCode = @"
+    private readonly string example24RazorCode = @"
 <BitChoiceGroup Label=""ساده"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"" DefaultValue=""@(""A"")"" Dir=""BitDir.Rtl"">
     <BitChoiceGroupOption Text=""گزینه آ"" Value=""@(""A"")"" />
     <BitChoiceGroupOption Text=""گزینه ب"" Value=""@(""B"")"" />
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupAccessibilityTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupAccessibilityTests.cs
index 869faec5d4..0983ef8d3f 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupAccessibilityTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupAccessibilityTests.cs
@@ -1,6 +1,7 @@
 using System.Collections.Generic;
 using System.Linq;
 using Bunit;
+using Microsoft.AspNetCore.Components;
 using Microsoft.VisualStudio.TestTools.UnitTesting;
 
 namespace Bit.BlazorUI.Tests.Components.Inputs.ChoiceGroup;
@@ -211,4 +212,89 @@ public void BitChoiceGroupShouldReferenceARenderedDescription()
         Assert.IsNotNull(describedBy);
         Assert.AreEqual("desc A", component.Find($"#{describedBy}").TextContent);
     }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldNotRenderAGroupDescriptionWhenThereIsNone()
+    {
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, GetItems());
+        });
+
+        Assert.AreEqual(0, component.FindAll(".bit-chg-gds").Count);
+        Assert.IsFalse(component.Find(".bit-chg").HasAttribute("aria-describedby"));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldReferenceItsGroupDescription()
+    {
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, GetItems());
+            parameters.Add(p => p.Description, "pick the one you need");
+        });
+
+        var describedBy = component.Find(".bit-chg").GetAttribute("aria-describedby");
+
+        Assert.IsNotNull(describedBy);
+        Assert.AreEqual("pick the one you need", component.Find($"#{describedBy}").TextContent);
+        Assert.IsTrue(component.Find($"#{describedBy}").ClassList.Contains("bit-chg-gds"));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldPreferTheDescriptionTemplateOverTheDescription()
+    {
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, GetItems());
+            parameters.Add(p => p.Description, "plain description");
+            parameters.Add(p => p.DescriptionTemplate, (RenderFragment)(builder => builder.AddContent(0, "templated description")));
+        });
+
+        var describedBy = component.Find(".bit-chg").GetAttribute("aria-describedby");
+
+        Assert.AreEqual("templated description", component.Find($"#{describedBy}").TextContent);
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldKeepTheGroupDescriptionAndTheItemDescriptionsSeparate()
+    {
+        var items = new List<BitChoiceGroupItem<string>>
+        {
+            new() { Text = "A", Value = "A", Description = "desc A" },
+        };
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.Description, "group description");
+        });
+
+        var groupDescribedBy = component.Find(".bit-chg").GetAttribute("aria-describedby");
+        var itemDescribedBy = component.Find(".bit-chg-icn input").GetAttribute("aria-describedby");
+
+        Assert.AreNotEqual(groupDescribedBy, itemDescribedBy);
+        Assert.AreEqual("group description", component.Find($"#{groupDescribedBy}").TextContent);
+        Assert.AreEqual("desc A", component.Find($"#{itemDescribedBy}").TextContent);
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldRenderTheTitleOfEachItem()
+    {
+        var items = new List<BitChoiceGroupItem<string>>
+        {
+            new() { Text = "A", Value = "A", Title = "the whole story of A" },
+            new() { Text = "B", Value = "B" },
+        };
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+        });
+
+        var containers = component.FindAll(".bit-chg-icn");
+
+        Assert.AreEqual("the whole story of A", containers[0].GetAttribute("title"));
+        Assert.IsFalse(containers[1].HasAttribute("title"));
+    }
 }
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupItemContentTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupItemContentTests.cs
index d9c51344ae..fa3868590a 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupItemContentTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupItemContentTests.cs
@@ -1,5 +1,6 @@
 using System.Collections.Generic;
 using Bunit;
+using Microsoft.AspNetCore.Components;
 using Microsoft.VisualStudio.TestTools.UnitTesting;
 
 namespace Bit.BlazorUI.Tests.Components.Inputs.ChoiceGroup;
@@ -123,4 +124,62 @@ public void BitChoiceGroupShouldFallBackToTheItemPrefixTemplateForAnEmptyPrefix(
         StringAssert.Contains(labels[0].TextContent, "[0]");
         StringAssert.Contains(labels[1].TextContent, "$10 — ");
     }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldRenderTheSuffixAfterTheItemContent()
+    {
+        var items = new List<BitChoiceGroupItem<string>>
+        {
+            new() { Text = "Standard", Value = "Standard", Suffix = "Free" },
+        };
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.Classes, new BitChoiceGroupClassStyles { ItemSuffix = "suffix-class" });
+        });
+
+        var label = component.Find(".bit-chg-itl");
+
+        Assert.AreEqual("Free", component.Find(".suffix-class").TextContent);
+        StringAssert.EndsWith(label.TextContent.Trim(), "Free");
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldFallBackToTheItemSuffixTemplateForAnEmptySuffix()
+    {
+        var items = new List<BitChoiceGroupItem<string>>
+        {
+            new() { Text = "A", Value = "A" },
+            new() { Text = "B", Value = "B", Suffix = "$10" },
+        };
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.ItemSuffixTemplate, (BitChoiceGroupItem<string> item) => builder => builder.AddContent(0, $"[{item.Index}]"));
+        });
+
+        var labels = component.FindAll(".bit-chg-itl");
+
+        StringAssert.Contains(labels[0].TextContent, "[0]");
+        StringAssert.Contains(labels[1].TextContent, "$10");
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldNotRenderTheSuffixWhenATemplateTakesOverTheItem()
+    {
+        var items = new List<BitChoiceGroupItem<string>>
+        {
+            new() { Text = "A", Value = "A", Suffix = "Free" },
+        };
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.ItemTemplate, (BitChoiceGroupItem<string> item) => builder => builder.AddContent(0, item.Text));
+        });
+
+        Assert.AreEqual("A", component.Find(".bit-chg-itl").TextContent.Trim());
+    }
 }
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupStyleClassTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupStyleClassTests.cs
index 19414b2e86..afcf85dbb7 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupStyleClassTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupStyleClassTests.cs
@@ -138,4 +138,84 @@ public void BitChoiceGroupShouldComposeTheItemClassWithTheItemContainerClass()
         Assert.IsTrue(container.ClassList.Contains("item-class"));
         Assert.IsTrue(container.ClassList.Contains("container-class"));
     }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldOnlyMarkTheRootAsFullWidthWhenAsked()
+    {
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, GetItems());
+        });
+
+        Assert.IsFalse(component.Find(".bit-chg").ClassList.Contains("bit-chg-flw"));
+
+        component.Render(parameters =>
+        {
+            parameters.Add(p => p.Items, GetItems());
+            parameters.Add(p => p.FullWidth, true);
+        });
+
+        Assert.IsTrue(component.Find(".bit-chg").ClassList.Contains("bit-chg-flw"));
+    }
+
+    [TestMethod]
+    [DataRow(null, "bit-chg-led")]
+    [DataRow(BitLabelPosition.End, "bit-chg-led")]
+    [DataRow(BitLabelPosition.Start, "bit-chg-lst")]
+    [DataRow(BitLabelPosition.Top, "bit-chg-ltp")]
+    [DataRow(BitLabelPosition.Bottom, "bit-chg-lbm")]
+    public void BitChoiceGroupShouldApplyTheLabelPositionClass(BitLabelPosition? labelPosition, string expectedClass)
+    {
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, GetItems());
+            parameters.Add(p => p.LabelPosition, labelPosition);
+        });
+
+        var root = component.Find(".bit-chg");
+
+        Assert.IsTrue(root.ClassList.Contains(expectedClass));
+
+        // Exactly one of the four position classes is applied, so they cannot fight over the flex direction.
+        var applied = new[] { "bit-chg-led", "bit-chg-lst", "bit-chg-ltp", "bit-chg-lbm" }
+                        .Count(root.ClassList.Contains);
+
+        Assert.AreEqual(1, applied);
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldOnlyMarkTheRootAsReadOnlyWhenAsked()
+    {
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, GetItems());
+        });
+
+        Assert.IsFalse(component.Find(".bit-chg").ClassList.Contains("bit-chg-rdo"));
+
+        component.Render(parameters =>
+        {
+            parameters.Add(p => p.Items, GetItems());
+            parameters.Add(p => p.ReadOnly, true);
+        });
+
+        Assert.IsTrue(component.Find(".bit-chg").ClassList.Contains("bit-chg-rdo"));
+    }
+
+    [TestMethod]
+    public void BitChoiceGroupShouldApplyTheDescriptionStyleAndClass()
+    {
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, GetItems());
+            parameters.Add(p => p.Description, "a description");
+            parameters.Add(p => p.Classes, new BitChoiceGroupClassStyles { Description = "description-class" });
+            parameters.Add(p => p.Styles, new BitChoiceGroupClassStyles { Description = "color: red" });
+        });
+
+        var description = component.Find(".bit-chg-gds");
+
+        Assert.IsTrue(description.ClassList.Contains("description-class"));
+        Assert.AreEqual("color: red", description.GetAttribute("style"));
+    }
 }
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupTests.cs
index 3f445150c2..ce48bc6972 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupTests.cs
@@ -254,8 +254,11 @@ public void BitChoiceGroupShouldRenderFocusableInputs()
         }
     }
 
+    // A read-only group is not a disabled one: it stays reachable so the choice can still be read with the
+    // keyboard and a screen reader, and it keeps submitting its value. What makes it read-only is that the
+    // activation is cancelled, which is covered by BitChoiceGroupShouldNotChangeTheValueWhenReadOnly.
     [TestMethod]
-    public void BitChoiceGroupShouldRemoveInputsFromTabOrderWhenReadOnly()
+    public void BitChoiceGroupShouldKeepInputsReachableAndEnabledWhenReadOnly()
     {
         var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
         {
@@ -267,11 +270,16 @@ public void BitChoiceGroupShouldRemoveInputsFromTabOrderWhenReadOnly()
 
         foreach (var input in inputs)
         {
-            Assert.AreEqual("-1", input.GetAttribute("tabindex"));
+            Assert.IsFalse(input.HasAttribute("tabindex"));
         }
 
+        // Read-only must not disable anything by itself; the one disabled input here is the item that
+        // opts out through its own IsEnabled, which read-only has nothing to do with.
+        Assert.AreEqual(1, inputs.Count(i => i.HasAttribute("disabled")));
+
         var bitChoiceGroup = component.Find(".bit-chg");
         Assert.AreEqual("true", bitChoiceGroup.GetAttribute("aria-readonly"));
+        Assert.IsFalse(bitChoiceGroup.HasAttribute("aria-disabled"));
     }
 
     [TestMethod]

From cfd9d9dfd2b47a46f74e7b1943d1aa29183b1f73 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Mon, 27 Jul 2026 12:55:39 +0330
Subject: [PATCH 05/19] resolve review comments 2

---
 .../Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs      | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
index 5f343a0b64..6f495f628f 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
@@ -29,7 +29,8 @@ namespace Bit.BlazorUI;
     [Parameter] public string? AriaLabelledBy { get; set; }
 
     /// <summary>
-    /// Determines if the ChoiceGroup is auto focused on first render, focusing its checked item (or its first item).
+    /// 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 target item is disabled.
     /// </summary>
     [Parameter] public bool AutoFocus { get; set; }
 

From 6ab55aa16b7c9c5d895fba140b00ba27a4a120b9 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Mon, 27 Jul 2026 13:38:28 +0330
Subject: [PATCH 06/19] resolve review comments 2

---
 .../ChoiceGroup/_BitChoiceGroupOptionDemo.razor  | 16 ++++++++--------
 .../_BitChoiceGroupOptionDemo.razor.samples.cs   |  2 +-
 .../ChoiceGroup/BitChoiceGroupEventsTests.cs     | 14 +++++++++++++-
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor
index f5a6ae0a6c..789fe36d98 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor
@@ -19,7 +19,7 @@
 </DemoExample>
 
 <DemoExample Title="Disabled" RazorCode="@example2RazorCode" Id="example2" PreventRenderForMcpClient>
-    <div>Disables the whole ChoiceGroup or its individual items. Disabled items cannot be selected and are skipped by the keyboard navigation.</div>
+    <div>Disables the whole ChoiceGroup or its individual options. Disabled options cannot be selected and are skipped by the keyboard navigation.</div>
     <br />
     <div class="example-content">
         <BitChoiceGroup Label="Disabled ChoiceGroup"
@@ -44,7 +44,7 @@
 </DemoExample>
 
 <DemoExample Title="Images and Icons" RazorCode="@example3RazorCode" Id="example3" PreventRenderForMcpClient>
-    <div>Displays items as image or icon tiles: ImageSrc with an optional ImageSize renders a picture, IconName (or Icon for an external library) renders a glyph, and SelectedImageSrc swaps in a second picture while the item is checked. The images are marked decorative so the item text carries the accessible name; set ImageAlt only when the picture says something the text does not. The Inline mode drops the tile layout and puts the image or icon on the same line as the text.</div>
+    <div>Displays options as image or icon tiles: ImageSrc with an optional ImageSize renders a picture, IconName (or Icon for an external library) renders a glyph, and SelectedImageSrc swaps in a second picture while the option is checked. The images are marked decorative so the option text carries the accessible name; set ImageAlt only when the picture says something the text does not. The Inline mode drops the tile layout and puts the image or icon on the same line as the text.</div>
     <br /><br />
     <div class="example-content">
         <BitChoiceGroup Label="Image Options"
@@ -105,7 +105,7 @@
 </DemoExample>
 
 <DemoExample Title="Horizontal" RazorCode="@example4RazorCode" Id="example4" PreventRenderForMcpClient>
-    <div>Lays out the items in a row instead of the default vertical stack, wrapping onto new lines when the available width runs out. The aria-orientation of the radiogroup follows this parameter, so assistive technology announces the same orientation the eye sees.</div>
+    <div>Lays out the options in a row instead of the default vertical stack, wrapping onto new lines when the available width runs out. The aria-orientation of the radiogroup follows this parameter, so assistive technology announces the same orientation the eye sees.</div>
     <br />
     <div class="example-content column">
         <BitChoiceGroup Label="Basic" TItem="BitChoiceGroupOption<string>" TValue="string" DefaultValue="@("A")" Horizontal>
@@ -361,7 +361,7 @@
 </DemoExample>
 
 <DemoExample Title="ReadOnly" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
-    <div>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.</div>
+    <div>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 option 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.</div>
     <br />
     <div class="example-content">
         <BitChoiceGroup Label="ReadOnly" ReadOnly @bind-Value="readOnlyValue" TItem="BitChoiceGroupOption<string>" TValue="string">
@@ -374,7 +374,7 @@
 </DemoExample>
 
 <DemoExample Title="Gap" RazorCode="@example12RazorCode" Id="example12">
-    <div>Customizes the gap between the items using any CSS length value, overriding the default spacing of the current size.</div>
+    <div>Customizes the gap between the options using any CSS length value, overriding the default spacing of the current size.</div>
     <br />
     <div class="example-content column">
         <BitChoiceGroup Label="1rem gap" Gap="1rem" DefaultValue="@("A")" TItem="BitChoiceGroupOption<string>" TValue="string">
@@ -563,7 +563,7 @@
 </DemoExample>
 
 <DemoExample Title="Color" RazorCode="@example20RazorCode" Id="example20" PreventRenderForMcpClient>
-        <div>Colors the radio circle and the checked state of the items using the BitColor palette, with Primary being the default.</div>
+        <div>Colors the radio circle and the checked state of the options using the BitColor palette, with Primary being the default.</div>
         <br />
         <div>
             <div class="example-box">
@@ -759,7 +759,7 @@
 </DemoExample>
 
 <DemoExample Title="Size" RazorCode="@example22RazorCode" Id="example22" PreventRenderForMcpClient>
-    <div>Comes in Small, Medium (default), and Large sizes that scale the radio circle, text, icons, and item spacing together.</div>
+    <div>Comes in Small, Medium (default), and Large sizes that scale the radio circle, text, icons, and option spacing together.</div>
     <br /><br />
     <div>Basic ChoiceGroup</div>
     <div class="example-content column">
@@ -853,7 +853,7 @@
 </DemoExample>
 
 <DemoExample Title="Style & Class" RazorCode="@example23RazorCode" Id="example23" PreventRenderForMcpClient>
-    <div>Customizes the appearance at every level: Style and Class on the root element, per-item styles and classes, and the Styles and Classes objects that target the internal parts of the component, including the checked state of the items.</div>
+    <div>Customizes the appearance at every level: Style and Class on the root element, per-option styles and classes, and the Styles and Classes objects that target the internal parts of the component, including the checked state of the options.</div>
     <br /><br />
     <div>Component's Style & Class:</div>
     <br />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs
index 39aee9328f..78159402be 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs
@@ -553,7 +553,7 @@ private void ReverseDynamicOptions()
 private bool showAutoFocus;";
 
     private readonly string example20RazorCode = @"
-<BitChoiceGroup Color=""BitColor.Primary"" Label=""Primary""DefaultValue=""@(""B"")"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"" Horizontal>
+<BitChoiceGroup Color=""BitColor.Primary"" Label=""Primary"" DefaultValue=""@(""B"")"" TItem=""BitChoiceGroupOption<string>"" TValue=""string"" Horizontal>
     <BitChoiceGroupOption Text=""Option A"" Value=""@(""A"")"" />
     <BitChoiceGroupOption Text=""Option B"" Value=""@(""B"")"" />
     <BitChoiceGroupOption Text=""Option C"" Value=""@(""C"")"" />
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupEventsTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupEventsTests.cs
index cf55eebf4b..9da9645056 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupEventsTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupEventsTests.cs
@@ -1,6 +1,7 @@
 using System.Collections.Generic;
 using System.Linq;
 using Bunit;
+using Microsoft.AspNetCore.Components;
 using Microsoft.VisualStudio.TestTools.UnitTesting;
 
 namespace Bit.BlazorUI.Tests.Components.Inputs.ChoiceGroup;
@@ -136,7 +137,7 @@ public void BitChoiceGroupShouldAutoFocusTheFirstEnabledItemWhenNothingIsChecked
         var items = GetItems();
         items[0].IsEnabled = false;
 
-        RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
         {
             parameters.Add(p => p.Items, items);
             parameters.Add(p => p.AutoFocus, true);
@@ -145,6 +146,7 @@ public void BitChoiceGroupShouldAutoFocusTheFirstEnabledItemWhenNothingIsChecked
         // Tabbing into the group skips the disabled first radio, so the focus target has to skip it too,
         // otherwise the auto focus lands on a disabled input and silently does nothing.
         Assert.AreEqual(1, FocusInvocationCount());
+        Assert.AreEqual(component.FindAll(".bit-chg-icn input")[1].GetAttribute("blazor:elementreference"), FocusedElementId());
     }
 
     [TestMethod]
@@ -164,4 +166,14 @@ private int FocusInvocationCount()
     {
         return Context.JSInterop.Invocations.Count(i => i.Identifier.Contains("focus", System.StringComparison.OrdinalIgnoreCase));
     }
+
+    // The id of the element the focus interop was called with, so a test can assert which input was focused
+    // and not only that something was. It matches the blazor:elementreference attribute bUnit renders on the
+    // elements captured with @ref.
+    private string FocusedElementId()
+    {
+        var invocation = Context.JSInterop.Invocations.Single(i => i.Identifier.Contains("focus", System.StringComparison.OrdinalIgnoreCase));
+
+        return ((ElementReference)invocation.Arguments[0]!).Id;
+    }
 }

From 8301b60c4f6a471605cf35a859002de78e9bf262 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Tue, 28 Jul 2026 07:31:28 +0330
Subject: [PATCH 07/19] resolve review comments 3

---
 .../Inputs/ChoiceGroup/BitChoiceGroup.razor.cs    | 15 ++++++++++++++-
 .../ChoiceGroup/_BitChoiceGroupCustomDemo.razor   |  2 +-
 .../ChoiceGroup/_BitChoiceGroupItemDemo.razor     |  2 +-
 .../ChoiceGroup/_BitChoiceGroupOptionDemo.razor   |  2 +-
 .../ChoiceGroup/BitChoiceGroupEventsTests.cs      |  8 ++++++--
 5 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
index 6f495f628f..0a563c8837 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
@@ -132,6 +132,13 @@ namespace Bit.BlazorUI;
     /// <see cref="BitLabelPosition.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.
     /// </summary>
+    /// <remarks>
+    /// Replaces the removed Reversed parameter, which only offered the two horizontal positions.
+    /// Migrate an existing <c>Reversed="true"</c> (in either layout) to
+    /// <c>LabelPosition="BitLabelPosition.Start"</c>; <c>Reversed="false"</c> was the default and needs
+    /// no replacement. A binding of the form <c>Reversed="@flag"</c> becomes
+    /// <c>LabelPosition="@(flag ? BitLabelPosition.Start : BitLabelPosition.End)"</c>.
+    /// </remarks>
     [Parameter, ResetClassBuilder]
     public BitLabelPosition? LabelPosition { get; set; }
 
@@ -462,7 +469,13 @@ internal async Task SetInputElement(TItem item, ElementReference inputElement)
         if (AutoFocus && _autoFocusDone is false && IsEnabled && ReadOnly is false && GetIsEnabled(item))
         {
             _autoFocusDone = true;
-            await InputElement.FocusAsync();
+
+            try
+            {
+                await InputElement.FocusAsync();
+            }
+            catch (JSDisconnectedException) { } // the circuit is gone (e.g. the user navigated away), nothing to focus
+            catch (JSException) { } // the element is no longer in the document, failing to focus it is not fatal
         }
     }
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor
index a530aba66a..97c14ed2af 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor
@@ -311,7 +311,7 @@
 </DemoExample>
 
 <DemoExample Title="Prefix & Suffix" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
-    <div>Wraps the content of each item in plain text: the Prefix name selector maps a field that is rendered in front of the radio circle and the Suffix name selector maps one that is rendered 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.</div>
+    <div>Wraps the content of each item in plain text: the Prefix name selector maps a field that is rendered at the start of the item label, before the item text, and the Suffix name selector maps one that is rendered 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.</div>
     <br />
     <div class="example-content column">
         <BitChoiceGroup Label="Shipping method (Prefix)"
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor
index 728c61a516..59f573876c 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor
@@ -194,7 +194,7 @@
 </DemoExample>
 
 <DemoExample Title="Prefix & Suffix" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
-    <div>Wraps the content of each item in plain text: Prefix is rendered in front of the radio circle 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.</div>
+    <div>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.</div>
     <br />
     <div class="example-content column">
         <BitChoiceGroup Label="Shipping method (Prefix)" Items="prefixItems" DefaultValue="@("Standard")" />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor
index 789fe36d98..c4e40cf4f3 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor
@@ -394,7 +394,7 @@
 </DemoExample>
 
 <DemoExample Title="Prefix & Suffix" RazorCode="@example13RazorCode" Id="example13">
-    <div>Wraps the content of each option in plain text: Prefix is rendered in front of the radio circle and Suffix after the content of the option. 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.</div>
+    <div>Wraps the content of each option in plain text: Prefix is rendered at the start of the option label, before the option text, and Suffix after the content of the option. 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.</div>
     <br />
     <div class="example-content column">
         <BitChoiceGroup Label="Shipping method (Prefix)" DefaultValue="@("Standard")" TItem="BitChoiceGroupOption<string>" TValue="string">
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupEventsTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupEventsTests.cs
index 9da9645056..8af06f3196 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupEventsTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupEventsTests.cs
@@ -121,14 +121,18 @@ public void BitChoiceGroupShouldNotChangeTheValueWhenTheGroupIsDisabled()
     [TestMethod]
     public void BitChoiceGroupShouldAutoFocusTheCheckedItem()
     {
-        RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        var items = GetItems();
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
         {
-            parameters.Add(p => p.Items, GetItems());
+            parameters.Add(p => p.Items, items);
             parameters.Add(p => p.DefaultValue, "B");
             parameters.Add(p => p.AutoFocus, true);
         });
 
+        // "B" is the checked item, so the focus has to land on it and not on the first one.
         Assert.AreEqual(1, FocusInvocationCount());
+        Assert.AreEqual(component.FindAll(".bit-chg-icn input")[items.FindIndex(i => i.Value == "B")].GetAttribute("blazor:elementreference"), FocusedElementId());
     }
 
     [TestMethod]

From f5a659ff66fb27f6c8d87dbece0cd2b456cba7f0 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Tue, 28 Jul 2026 09:19:05 +0330
Subject: [PATCH 08/19] resolve review comments 4

---
 .../_BitChoiceGroupCustomDemo.razor.samples.cs            | 8 ++++++++
 .../ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs  | 8 ++++++++
 .../_BitChoiceGroupOptionDemo.razor.samples.cs            | 8 ++++++++
 3 files changed, 24 insertions(+)

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cs
index db3b7fbf9c..315010af6b 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cs
@@ -773,6 +773,14 @@ private void ReverseDynamicCustoms()
 }";
 
     private readonly string example16RazorCode = @"
+<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=""deploymentCustoms""
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs
index b175517f74..077aa40d1a 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs
@@ -524,6 +524,14 @@ private void ReverseDynamicItems()
 }";
 
     private readonly string example16RazorCode = @"
+<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""
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs
index 513871800e..3c5a6763fa 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs
@@ -474,6 +474,14 @@ private void ReverseDynamicOptions()
 }";
 
     private readonly string example16RazorCode = @"
+<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.""
                 DefaultValue=""@(""Staging"")""

From 9c06035f39ab095f96bdb53787a8cfed84941ff7 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Tue, 28 Jul 2026 11:25:46 +0330
Subject: [PATCH 09/19] resolve review comments 5

---
 .../Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs | 2 +-
 .../Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.cs     | 4 ++--
 .../Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.cs     | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs
index a8160d58ef..6d3e08688d 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs
@@ -18,7 +18,7 @@ public partial class BitChoiceGroupDemo
             Name = "AutoFocus",
             Type = "bool",
             DefaultValue = "false",
-            Description = "Determines if the ChoiceGroup is auto focused on first render, focusing its checked item (or its first item)."
+            Description = "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 target item is disabled."
         },
         new()
         {
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.cs
index e30f0659af..387d3e944c 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.cs
@@ -24,8 +24,8 @@ public partial class _BitChoiceGroupCustomDemo
     private string itemTemplateValue = "Day";
     private string itemTemplateValue2 = "Day";
     private string itemLabelTemplateValue = "Day";
-    public ChoiceGroupValidationModel validationModel = new();
-    public string? successMessage;
+    private ChoiceGroupValidationModel validationModel = new();
+    private string? successMessage;
 
 
     private readonly List<Order> basicCustoms =
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.cs
index 0812bb5ada..6773fdaf83 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.cs
@@ -24,8 +24,8 @@ public partial class _BitChoiceGroupOptionDemo
     private string itemTemplateValue = "Day";
     private string itemTemplateValue2 = "Day";
     private string itemLabelTemplateValue = "Day";
-    public ChoiceGroupValidationModel validationModel = new();
-    public string? successMessage;
+    private ChoiceGroupValidationModel validationModel = new();
+    private string? successMessage;
 
 
     private void AddDynamicOption()

From 91812ac48ad10be236abc1f19f7685b1e9aa8abc Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Tue, 28 Jul 2026 19:28:20 +0330
Subject: [PATCH 10/19] resolve review comments 6

---
 .../Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs        | 1 +
 .../Components/Inputs/ChoiceGroup/BitChoiceGroup.scss            | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
index 0a563c8837..a0e1743e88 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
@@ -476,6 +476,7 @@ internal async Task SetInputElement(TItem item, ElementReference inputElement)
             }
             catch (JSDisconnectedException) { } // the circuit is gone (e.g. the user navigated away), nothing to focus
             catch (JSException) { } // the element is no longer in the document, failing to focus it is not fatal
+            catch (InvalidOperationException) { } // the element reference is detached from its renderer, same as above
         }
     }
 
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss
index 49dffa35c9..a52864f473 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss
@@ -223,6 +223,7 @@
     cursor: pointer;
     gap: spacing(0.75);
     align-items: center;
+
     // Matches the radius the tile layout sets below, so the focus ring (a box-shadow, which follows the
     // border radius) is rounded on a plain item too instead of only on a tile.
     border-radius: $shp-border-radius;

From c209bb5fa89068dfefb7d67eb283bcfbc269ec5c Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Tue, 28 Jul 2026 19:35:31 +0330
Subject: [PATCH 11/19] fix tests

---
 .../Utils/Theme/component-css-variables.md                   | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/component-css-variables.md b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/component-css-variables.md
index 4a18e9ef65..d121891ac0 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/component-css-variables.md
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/component-css-variables.md
@@ -10,7 +10,7 @@ internal selectors. They are **stable public API**: override them from app CSS
 (`.bit-btn { --bit-btn-clr: hotpink; }`) or per instance via the `Style` parameter
 (`Style="--bit-btn-clr: hotpink"`), and rely on this contract-tested inventory when upgrading.
 
-33 components, 282 variables.
+33 components, 281 variables.
 
 ## BitActionButton
 
@@ -127,12 +127,11 @@ internal selectors. They are **stable public API**: override them from app CSS
 - `--bit-chg-circle-size`
 - `--bit-chg-clr`
 - `--bit-chg-clr-bg`
-- `--bit-chg-clr-brd`
 - `--bit-chg-clr-dis`
 - `--bit-chg-clr-dis-text`
 - `--bit-chg-clr-focus`
 - `--bit-chg-clr-hover`
-- `--bit-chg-dot-position`
+- `--bit-chg-dot-size`
 - `--bit-chg-flex-direction`
 - `--bit-chg-flex-flow`
 - `--bit-chg-fontsize`

From 6f2c88ad25bfd77936782b2558fd75736e200a40 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Wed, 29 Jul 2026 08:58:32 +0330
Subject: [PATCH 12/19] resolve review comments 7

---
 .../Inputs/ChoiceGroup/BitChoiceGroupItem.cs  |  5 ++-
 .../ChoiceGroup/BitChoiceGroupOption.cs       |  5 ++-
 .../ChoiceGroup/BitChoiceGroupDemo.razor.cs   |  4 +--
 .../ChoiceGroup/BitChoiceGroupEventsTests.cs  | 32 ++++++-------------
 4 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupItem.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupItem.cs
index 4e931cd2d6..96e7f6deb7 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupItem.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupItem.cs
@@ -92,7 +92,10 @@ public class BitChoiceGroupItem<TValue>
 
     /// <summary>
     /// The title attribute (the native tooltip) of the BitChoiceGroup item. This is supplementary text only:
-    /// use <see cref="AriaLabel"/> or <see cref="Description"/> for content that has to reach every user.
+    /// content that has to reach every user belongs in <see cref="Text"/> (or a template) or in
+    /// <see cref="Description"/>, both of which are visible and exposed to assistive technology.
+    /// <see cref="AriaLabel"/> is not an alternative: it only replaces the accessible name for assistive
+    /// technology and is never visible.
     /// </summary>
     public string? Title { get; set; }
 
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupOption.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupOption.cs
index 7424d79a2d..2f412c18d4 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupOption.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupOption.cs
@@ -100,7 +100,10 @@ public partial class BitChoiceGroupOption<TValue> : ComponentBase, IDisposable
 
     /// <summary>
     /// The title attribute (the native tooltip) of the BitChoiceGroup option. This is supplementary text only:
-    /// use <see cref="AriaLabel"/> or <see cref="Description"/> for content that has to reach every user.
+    /// content that has to reach every user belongs in <see cref="Text"/> (or a template) or in
+    /// <see cref="Description"/>, both of which are visible and exposed to assistive technology.
+    /// <see cref="AriaLabel"/> is not an alternative: it only replaces the accessible name for assistive
+    /// technology and is never visible.
     /// </summary>
     [Parameter] public string? Title { get; set; }
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs
index 6d3e08688d..cbad2f718e 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs
@@ -542,7 +542,7 @@ public partial class BitChoiceGroupDemo
                    Name = "Title",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "The title attribute (the native tooltip) of the BitChoiceGroup item. Supplementary text only: use AriaLabel or Description for content that has to reach every user.",
+                   Description = "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.",
                },
                new()
                {
@@ -692,7 +692,7 @@ public partial class BitChoiceGroupDemo
                    Name = "Title",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "The title attribute (the native tooltip) of the BitChoiceGroup option. Supplementary text only: use AriaLabel or Description for content that has to reach every user.",
+                   Description = "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.",
                },
                new()
                {
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupEventsTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupEventsTests.cs
index 8af06f3196..709ba9f245 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupEventsTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupEventsTests.cs
@@ -1,7 +1,5 @@
 using System.Collections.Generic;
-using System.Linq;
 using Bunit;
-using Microsoft.AspNetCore.Components;
 using Microsoft.VisualStudio.TestTools.UnitTesting;
 
 namespace Bit.BlazorUI.Tests.Components.Inputs.ChoiceGroup;
@@ -12,6 +10,11 @@ namespace Bit.BlazorUI.Tests.Components.Inputs.ChoiceGroup;
 [TestClass]
 public class BitChoiceGroupEventsTests : BunitTestContext
 {
+    // The identifier behind ElementReference.FocusAsync, which is what bUnit's VerifyFocusAsyncInvoke
+    // asserts against. Spelled out here because the "not focused" case has no invocation to verify and
+    // so has to go through VerifyNotInvoke, which takes the identifier rather than the focus helper.
+    private const string FocusAsyncIdentifier = "Blazor._internal.domWrapper.focus";
+
     private static List<BitChoiceGroupItem<string>> GetItems() =>
     [
         new() { Text = "Item A", Value = "A" },
@@ -131,8 +134,8 @@ public void BitChoiceGroupShouldAutoFocusTheCheckedItem()
         });
 
         // "B" is the checked item, so the focus has to land on it and not on the first one.
-        Assert.AreEqual(1, FocusInvocationCount());
-        Assert.AreEqual(component.FindAll(".bit-chg-icn input")[items.FindIndex(i => i.Value == "B")].GetAttribute("blazor:elementreference"), FocusedElementId());
+        var invocation = Context.JSInterop.VerifyFocusAsyncInvoke();
+        invocation.Arguments[0].ShouldBeElementReferenceTo(component.FindAll(".bit-chg-icn input")[items.FindIndex(i => i.Value == "B")]);
     }
 
     [TestMethod]
@@ -149,8 +152,8 @@ public void BitChoiceGroupShouldAutoFocusTheFirstEnabledItemWhenNothingIsChecked
 
         // Tabbing into the group skips the disabled first radio, so the focus target has to skip it too,
         // otherwise the auto focus lands on a disabled input and silently does nothing.
-        Assert.AreEqual(1, FocusInvocationCount());
-        Assert.AreEqual(component.FindAll(".bit-chg-icn input")[1].GetAttribute("blazor:elementreference"), FocusedElementId());
+        var invocation = Context.JSInterop.VerifyFocusAsyncInvoke();
+        invocation.Arguments[0].ShouldBeElementReferenceTo(component.FindAll(".bit-chg-icn input")[1]);
     }
 
     [TestMethod]
@@ -163,21 +166,6 @@ public void BitChoiceGroupShouldNotAutoFocusWhenReadOnly()
             parameters.Add(p => p.ReadOnly, true);
         });
 
-        Assert.AreEqual(0, FocusInvocationCount());
-    }
-
-    private int FocusInvocationCount()
-    {
-        return Context.JSInterop.Invocations.Count(i => i.Identifier.Contains("focus", System.StringComparison.OrdinalIgnoreCase));
-    }
-
-    // The id of the element the focus interop was called with, so a test can assert which input was focused
-    // and not only that something was. It matches the blazor:elementreference attribute bUnit renders on the
-    // elements captured with @ref.
-    private string FocusedElementId()
-    {
-        var invocation = Context.JSInterop.Invocations.Single(i => i.Identifier.Contains("focus", System.StringComparison.OrdinalIgnoreCase));
-
-        return ((ElementReference)invocation.Arguments[0]!).Id;
+        Context.JSInterop.VerifyNotInvoke(FocusAsyncIdentifier);
     }
 }

From df9854bda0f0d54968452e6e24392457962631fb Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Wed, 29 Jul 2026 11:11:50 +0330
Subject: [PATCH 13/19] fix tests

---
 .../Bit.BlazorUI.Tests.csproj                 | 12 ----
 .../BitComponentCssVariablesContractTests.cs  | 72 +++++++++++++------
 .../Utils/Theme/component-css-variables.md    |  4 +-
 3 files changed, 53 insertions(+), 35 deletions(-)

diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Bit.BlazorUI.Tests.csproj b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Bit.BlazorUI.Tests.csproj
index 86e8e38901..398f269b89 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Bit.BlazorUI.Tests.csproj
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Bit.BlazorUI.Tests.csproj
@@ -58,18 +58,6 @@
         <None Include="..\..\Bit.BlazorUI\Styles\**\*.scss" Link="theme-styles\%(RecursiveDir)%(Filename)%(Extension)">
             <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
         </None>
-        <!-- Component SCSS tree + the checked-in inventory for the per-component CSS variable
-             contract test (BitComponentCssVariablesContractTests): the per-component custom-property
-             names are documented public API and must not drift from the sources without an update.
-             The inventory lives next to that test rather than in the library project because it is a
-             test baseline, not a shipped asset - it was never packed into the NuGet package. -->
-        <None Include="..\..\Bit.BlazorUI\Components\**\*.scss" Link="component-styles\%(RecursiveDir)%(Filename)%(Extension)">
-            <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
-        </None>
-        <None Remove="Utils\Theme\component-css-variables.md" />
-        <None Include="Utils\Theme\component-css-variables.md" Link="component-css-variables.md">
-            <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
-        </None>
     </ItemGroup>
 
 </Project>
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentCssVariablesContractTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentCssVariablesContractTests.cs
index 4b073db3d7..77db1efb31 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentCssVariablesContractTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentCssVariablesContractTests.cs
@@ -2,6 +2,7 @@
 using System.Collections.Generic;
 using System.IO;
 using System.Linq;
+using System.Runtime.CompilerServices;
 using System.Text;
 using System.Text.RegularExpressions;
 using Microsoft.VisualStudio.TestTools.UnitTesting;
@@ -12,8 +13,8 @@ namespace Bit.BlazorUI.Tests.Utils.Theme;
 /// Pins the per-component CSS variable vocabulary (<c>--bit-&lt;cmp&gt;-*</c>) as stable public
 /// API. The checked-in inventory (<c>component-css-variables.md</c>, next to this test) is regenerated
 /// here from the component SCSS sources and compared verbatim: adding, renaming, or removing a
-/// component variable fails this test until the inventory is deliberately updated - which is the
-/// documented signal that the override surface changed for consumers.
+/// component variable fails this test once and rewrites the inventory in place - reviewing and
+/// committing that diff is the documented signal that the override surface changed for consumers.
 /// </summary>
 [TestClass]
 public sealed class BitComponentCssVariablesContractTests
@@ -25,27 +26,22 @@ public sealed class BitComponentCssVariablesContractTests
     [TestMethod]
     public void CheckedInInventoryMatchesTheComponentStyles()
     {
-        var stylesDir = Path.Combine(AppContext.BaseDirectory, "component-styles");
-        Assert.IsTrue(Directory.Exists(stylesDir), $"Missing {stylesDir}; ensure the library Components SCSS tree is copied to output.");
+        var generated = GenerateInventory(GetComponentStylesDirectory());
 
-        var generated = GenerateInventory(stylesDir);
-
-        var inventoryPath = Path.Combine(AppContext.BaseDirectory, "component-css-variables.md");
-        Assert.IsTrue(File.Exists(inventoryPath), $"Missing {inventoryPath}; ensure component-css-variables.md is copied to output.");
+        var inventoryPath = Path.Combine(GetTestSourceDirectory(), "component-css-variables.md");
+        Assert.IsTrue(File.Exists(inventoryPath), $"Missing {inventoryPath}.");
 
         var checkedIn = Normalize(File.ReadAllText(inventoryPath));
 
         if (!string.Equals(checkedIn, generated, StringComparison.Ordinal))
         {
-            var dumpPath = Path.Combine(AppContext.BaseDirectory, "component-css-variables.generated.md");
-            File.WriteAllText(dumpPath, generated);
+            RefreshInventory(inventoryPath, generated);
 
             Assert.Fail(
-                "The component CSS variable inventory has drifted from the SCSS sources. These names are " +
-                "documented public API: if the change is intentional, refresh the inventory by copying the " +
-                "regenerated file over src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/component-css-variables.md " +
-                $"(written to: {dumpPath}) " +
-                "and note the change in the release notes; otherwise revert the SCSS rename.");
+                "The component CSS variable inventory had drifted from the SCSS sources and has been " +
+                $"refreshed in place ({inventoryPath}). These names are documented public API: if the " +
+                "change is intentional, review the diff, commit it and note the change in the release " +
+                "notes; otherwise revert the SCSS rename.");
         }
     }
 
@@ -54,14 +50,11 @@ public void ComponentVariablesNeverShadowGlobalTokens()
     {
         // A component redeclaring a global token (e.g. --bit-clr-pri) would silently re-scope
         // theming for its subtree. The component tier must stay disjoint from the theme tier.
-        var stylesDir = Path.Combine(AppContext.BaseDirectory, "component-styles");
-        Assert.IsTrue(Directory.Exists(stylesDir), $"Missing {stylesDir}.");
-
         var theme = new BitTheme();
         BitThemeTestGraph.FillStringLeavesWithSentinels(theme);
         var globalTokens = BitThemeUtilities.ToCssVariables(theme).Keys.ToHashSet(StringComparer.Ordinal);
 
-        var offenders = CollectDeclarations(stylesDir)
+        var offenders = CollectDeclarations(GetComponentStylesDirectory())
             .SelectMany(kv => kv.Value.Where(globalTokens.Contains).Select(v => $"{kv.Key}: {v}"))
             .OrderBy(o => o, StringComparer.Ordinal)
             .ToArray();
@@ -70,6 +63,43 @@ public void ComponentVariablesNeverShadowGlobalTokens()
             $"Component styles redeclare global theme tokens: {string.Join(", ", offenders)}");
     }
 
+    private static string GetTestSourceDirectory([CallerFilePath] string thisFile = "")
+    {
+        var dir = Path.GetDirectoryName(thisFile);
+        Assert.IsTrue(dir is not null && Directory.Exists(dir),
+            $"The test source directory ({dir}) is not available; this contract test must run from a source checkout.");
+        return dir!;
+    }
+
+    private static string GetComponentStylesDirectory()
+    {
+        var dir = Path.GetFullPath(Path.Combine(GetTestSourceDirectory(), "..", "..", "..", "..", "Bit.BlazorUI", "Components"));
+        Assert.IsTrue(Directory.Exists(dir), $"Missing {dir}.");
+        return dir;
+    }
+
+    private static void RefreshInventory(string inventoryPath, string content)
+    {
+        // The three target frameworks run this test concurrently over the same checkout; write via a
+        // unique temp file and treat losing the race to a sibling (writing identical content) as success.
+        var tempPath = $"{inventoryPath}.{Guid.NewGuid():N}.tmp";
+        try
+        {
+            File.WriteAllText(tempPath, content);
+            File.Move(tempPath, inventoryPath, overwrite: true);
+        }
+        catch (IOException)
+        {
+        }
+        finally
+        {
+            if (File.Exists(tempPath))
+            {
+                File.Delete(tempPath);
+            }
+        }
+    }
+
     private static SortedDictionary<string, SortedSet<string>> CollectDeclarations(string stylesDir)
     {
         var byComponent = new SortedDictionary<string, SortedSet<string>>(StringComparer.Ordinal);
@@ -100,8 +130,8 @@ private static string GenerateInventory(string stylesDir)
         var builder = new StringBuilder();
         builder.Append("# Component CSS variables\n\n");
         builder.Append("<!-- GENERATED FILE - do not edit by hand. Regenerated and verified by\n");
-        builder.Append("     BitComponentCssVariablesContractTests; on an intentional change, run that test and copy\n");
-        builder.Append("     the component-css-variables.generated.md it writes next to the test binaries over this file. -->\n\n");
+        builder.Append("     BitComponentCssVariablesContractTests; on an intentional change, run that test once - it\n");
+        builder.Append("     rewrites this file in place - then review the diff and commit it. -->\n\n");
         builder.Append("Every bit BlazorUI component exposes its themable knobs as `--bit-<cmp>-*` CSS custom\n");
         builder.Append("properties, assigned on the component root by its role/variant classes and consumed by its\n");
         builder.Append("internal selectors. They are **stable public API**: override them from app CSS\n");
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/component-css-variables.md b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/component-css-variables.md
index d121891ac0..9d245cff8e 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/component-css-variables.md
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/component-css-variables.md
@@ -1,8 +1,8 @@
 # Component CSS variables
 
 <!-- GENERATED FILE - do not edit by hand. Regenerated and verified by
-     BitComponentCssVariablesContractTests; on an intentional change, run that test and copy
-     the component-css-variables.generated.md it writes next to the test binaries over this file. -->
+     BitComponentCssVariablesContractTests; on an intentional change, run that test once - it
+     rewrites this file in place - then review the diff and commit it. -->
 
 Every bit BlazorUI component exposes its themable knobs as `--bit-<cmp>-*` CSS custom
 properties, assigned on the component root by its role/variant classes and consumed by its

From 1383dc6e85f3de75728b9943a38bee75ff5620dc Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Wed, 29 Jul 2026 11:17:39 +0330
Subject: [PATCH 14/19] resolve review comments 8

---
 .../ChoiceGroup/BitChoiceGroupStateTests.cs   | 20 +++++++++++++++++++
 .../Inputs/ChoiceGroup/BitChoiceGroupTests.cs | 10 +++++-----
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupStateTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupStateTests.cs
index e567647e76..e836d09107 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupStateTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupStateTests.cs
@@ -54,6 +54,26 @@ public void BitChoiceGroupShouldDetectInPlaceMutationOfTheSameItemsCollection()
         Assert.AreEqual(3, items[3].Index);
     }
 
+    [TestMethod]
+    public void BitChoiceGroupShouldReflectInPlaceMutationOfAnItemsProperty()
+    {
+        var items = GetItems();
+
+        var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+        });
+
+        Assert.AreEqual("Item B", component.FindAll(".bit-chg-icn")[1].TextContent.Trim());
+
+        items[1].Text = "Item B (updated)";
+
+        component.Render(parameters => parameters.Add(p => p.Items, items));
+
+        Assert.AreEqual(3, component.FindAll(".bit-chg-icn").Count);
+        Assert.AreEqual("Item B (updated)", component.FindAll(".bit-chg-icn")[1].TextContent.Trim());
+    }
+
     [TestMethod]
     public void BitChoiceGroupShouldUpdateIsSelectedWhenTheValueChangesFromOutside()
     {
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupTests.cs
index ce48bc6972..6b568fe19e 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupTests.cs
@@ -283,12 +283,13 @@ public void BitChoiceGroupShouldKeepInputsReachableAndEnabledWhenReadOnly()
     }
 
     [TestMethod]
-    public void BitChoiceGroupShouldRenderDescriptions()
+    public void BitChoiceGroupShouldRenderMultipleDescriptions()
     {
         var items = new List<BitChoiceGroupItem<string>>()
         {
             new() { Text = "Item A", Value = "A", Description = "Description A" },
             new() { Text = "Item B", Value = "B" },
+            new() { Text = "Item C", Value = "C", Description = "Description C" },
         };
 
         var component = RenderComponent<BitChoiceGroup<BitChoiceGroupItem<string>, string>>(parameters =>
@@ -298,11 +299,10 @@ public void BitChoiceGroupShouldRenderDescriptions()
 
         var descriptions = component.FindAll(".bit-chg-dsc");
 
-        Assert.AreEqual(1, descriptions.Count);
+        Assert.AreEqual(2, descriptions.Count);
         Assert.AreEqual("Description A", descriptions[0].TextContent);
-
-        var describedInput = component.Find(".bit-chg-icn input");
-        Assert.AreEqual(descriptions[0].Id, describedInput.GetAttribute("aria-describedby"));
+        Assert.AreEqual("Description C", descriptions[1].TextContent);
+        Assert.AreNotEqual(descriptions[0].Id, descriptions[1].Id);
     }
 
     [TestMethod]

From fe79f40d2a017462bdffaa7888ddfe9b87f5fde4 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Wed, 29 Jul 2026 11:39:44 +0330
Subject: [PATCH 15/19] resolve review comments 9

---
 .../Utils/Theme/BitComponentCssVariablesContractTests.cs        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentCssVariablesContractTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentCssVariablesContractTests.cs
index 77db1efb31..7346cdeb28 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentCssVariablesContractTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentCssVariablesContractTests.cs
@@ -88,7 +88,7 @@ private static void RefreshInventory(string inventoryPath, string content)
             File.WriteAllText(tempPath, content);
             File.Move(tempPath, inventoryPath, overwrite: true);
         }
-        catch (IOException)
+        catch (Exception ex) when (ex is IOException or UnauthorizedAccessException)
         {
         }
         finally

From 89e723befcb9628b42d01d14fa947a44d0b4a993 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Wed, 29 Jul 2026 11:58:09 +0330
Subject: [PATCH 16/19] resolve review comments 9

---
 .../Bit.BlazorUI.Demo.Client.Core/Components/DemoPage.razor      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/DemoPage.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/DemoPage.razor
index 2226794bf7..3fbd617f0b 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/DemoPage.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/DemoPage.razor
@@ -168,7 +168,6 @@ else
                          Class="page-section">
                     <div class="section-heading">
                         <BitText Element="h2" Typography="BitTypography.H5" Color="BitColor.PrimaryForeground">Notes</BitText>
-                        <BitSeparator />
                     </div>
                     @if (NotesTemplate is not null)
                     {

From 4788e0ff00de051dbd772070dfd18e26ffe07421 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Wed, 29 Jul 2026 13:02:58 +0330
Subject: [PATCH 17/19] resolve review comments 10

---
 .../Inputs/ChoiceGroup/BitChoiceGroup.razor      | 10 ++++++----
 .../Inputs/ChoiceGroup/BitChoiceGroup.razor.cs   | 16 ++++++++++++----
 .../ChoiceGroup/BitChoiceGroupEventsTests.cs     |  9 +++------
 .../Inputs/ChoiceGroup/BitChoiceGroupTests.cs    |  4 ++--
 .../BitComponentCssVariablesContractTests.cs     | 12 ++++++++++--
 5 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor
index fb0980b0a1..b89dc27263 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor
@@ -22,9 +22,11 @@
 
     @if (HasLabel)
     {
-        <label id="@_labelId"
-               style="@Styles?.LabelContainer"
-               class="@Classes?.LabelContainer">
+        @* Not a label element: with no single input to point a "for" at, a label here would label
+           nothing; the group is named through aria-labelledby referencing this id instead. *@
+        <div id="@_labelId"
+             style="@Styles?.LabelContainer"
+             class="@Classes?.LabelContainer">
             @if (LabelTemplate is not null)
             {
                 @LabelTemplate
@@ -33,7 +35,7 @@
             {
                 <span style="@Styles?.Label" class="bit-chg-lbl @Classes?.Label">@Label</span>
             }
-        </label>
+        </div>
     }
 
     @if (HasDescription)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
index a0e1743e88..fe55e5fb49 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
@@ -451,7 +451,15 @@ private void SetIndexItems()
     // while the id has to be a valid, unique IDREF for the label's "for" and for aria-describedby.
     internal string? GetInputId(TItem item) => GetId(item) ?? $"ChoiceGroup-{UniqueId}-Input-{GetItemIndex(item)}";
 
-    private int GetItemIndex(TItem item) => _items.FindIndex(i => ReferenceEquals(i, item));
+    // A custom item type is not guaranteed to carry the Index property the stamping writes to (the write
+    // silently no-ops without it), so only the two built-in types can trust the stamped value; a custom
+    // item falls back to its position in the collection, which is always available.
+    private int GetItemIndex(TItem item) => item switch
+    {
+        BitChoiceGroupItem<TValue> choiceGroupItem => choiceGroupItem.Index,
+        BitChoiceGroupOption<TValue> choiceGroupOption => choiceGroupOption.Index,
+        _ => _items.FindIndex(i => ReferenceEquals(i, item)),
+    };
 
     // Keeps the InputElement of the base class pointing at the input the Tab key would land on: the input
     // of the checked item, or the first enabled one when nothing is checked (the browser skips a disabled
@@ -466,7 +474,7 @@ internal async Task SetInputElement(TItem item, ElementReference inputElement)
 
         InputElement = inputElement;
 
-        if (AutoFocus && _autoFocusDone is false && IsEnabled && ReadOnly is false && GetIsEnabled(item))
+        if (AutoFocus && _autoFocusDone is false && ReadOnly is false && GetIsItemEnabled(item))
         {
             _autoFocusDone = true;
 
@@ -494,14 +502,14 @@ internal async Task HandleBlur(TItem item)
 
     internal async Task HandleClick(TItem item)
     {
-        if (IsEnabled is false || ReadOnly || GetIsEnabled(item) is false) return;
+        if (ReadOnly || GetIsItemEnabled(item) is false) return;
 
         await OnClick.InvokeAsync(item);
     }
 
     internal void HandleChange(TItem item)
     {
-        if (IsEnabled is false || ReadOnly || GetIsEnabled(item) is false) return;
+        if (ReadOnly || GetIsItemEnabled(item) is false) return;
 
         CurrentValue = GetValue(item);
 
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupEventsTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupEventsTests.cs
index 709ba9f245..1a8d4f7b37 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupEventsTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupEventsTests.cs
@@ -10,11 +10,6 @@ namespace Bit.BlazorUI.Tests.Components.Inputs.ChoiceGroup;
 [TestClass]
 public class BitChoiceGroupEventsTests : BunitTestContext
 {
-    // The identifier behind ElementReference.FocusAsync, which is what bUnit's VerifyFocusAsyncInvoke
-    // asserts against. Spelled out here because the "not focused" case has no invocation to verify and
-    // so has to go through VerifyNotInvoke, which takes the identifier rather than the focus helper.
-    private const string FocusAsyncIdentifier = "Blazor._internal.domWrapper.focus";
-
     private static List<BitChoiceGroupItem<string>> GetItems() =>
     [
         new() { Text = "Item A", Value = "A" },
@@ -166,6 +161,8 @@ public void BitChoiceGroupShouldNotAutoFocusWhenReadOnly()
             parameters.Add(p => p.ReadOnly, true);
         });
 
-        Context.JSInterop.VerifyNotInvoke(FocusAsyncIdentifier);
+        // Rendering the group performs no JS interop of its own, so an empty invocation list is the
+        // focus-identifier-agnostic way of asserting that nothing (focus included) was invoked.
+        Assert.AreEqual(0, Context.JSInterop.Invocations.Count);
     }
 }
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupTests.cs
index 6b568fe19e..60802b4716 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupTests.cs
@@ -141,7 +141,7 @@ public void BitChoiceGroupShouldTakeCorrectLabel(string label)
             parameters.Add(p => p.Label, label);
         });
 
-        var bitChoiceGroupLabel = component.Find(".bit-chg label");
+        var bitChoiceGroupLabel = component.Find($"#{component.Find(".bit-chg").GetAttribute("aria-labelledby")}");
         Assert.IsTrue(bitChoiceGroupLabel.InnerHtml.Contains(label));
     }
 
@@ -156,7 +156,7 @@ public void BitChoiceGroupShouldTakeCorrectLabelContent(string labelContent)
             parameters.Add(p => p.LabelTemplate, labelContent);
         });
 
-        var bitChoiceGroupLabelContent = component.Find(".bit-chg label").ChildNodes;
+        var bitChoiceGroupLabelContent = component.Find($"#{component.Find(".bit-chg").GetAttribute("aria-labelledby")}").ChildNodes;
         bitChoiceGroupLabelContent.MarkupMatches(labelContent);
     }
 
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentCssVariablesContractTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentCssVariablesContractTests.cs
index 7346cdeb28..5867451c0d 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentCssVariablesContractTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentCssVariablesContractTests.cs
@@ -93,9 +93,17 @@ private static void RefreshInventory(string inventoryPath, string content)
         }
         finally
         {
-            if (File.Exists(tempPath))
+            // A failing cleanup must not escape either: it would replace the caller's Assert.Fail
+            // guidance with a filesystem exception, and a leftover temp file is not worth that.
+            try
+            {
+                if (File.Exists(tempPath))
+                {
+                    File.Delete(tempPath);
+                }
+            }
+            catch (Exception ex) when (ex is IOException or UnauthorizedAccessException)
             {
-                File.Delete(tempPath);
             }
         }
     }

From 83d68ca2e7d6a2556cb4181183c5c5f06da0e27b Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Wed, 29 Jul 2026 13:39:05 +0330
Subject: [PATCH 18/19] resolve review comments 11

---
 .../BitChoiceGroupItemContentTests.cs         |  2 +-
 .../BitComponentCssVariablesContractTests.cs  | 23 +++++++++++++++----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupItemContentTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupItemContentTests.cs
index fa3868590a..838b3b0c8d 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupItemContentTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupItemContentTests.cs
@@ -150,7 +150,7 @@ public void BitChoiceGroupShouldFallBackToTheItemSuffixTemplateForAnEmptySuffix(
     {
         var items = new List<BitChoiceGroupItem<string>>
         {
-            new() { Text = "A", Value = "A" },
+            new() { Text = "A", Value = "A", Suffix = string.Empty },
             new() { Text = "B", Value = "B", Suffix = "$10" },
         };
 
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentCssVariablesContractTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentCssVariablesContractTests.cs
index 5867451c0d..e64f87f585 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentCssVariablesContractTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentCssVariablesContractTests.cs
@@ -35,11 +35,14 @@ public void CheckedInInventoryMatchesTheComponentStyles()
 
         if (!string.Equals(checkedIn, generated, StringComparison.Ordinal))
         {
-            RefreshInventory(inventoryPath, generated);
+            var refreshed = RefreshInventory(inventoryPath, generated);
 
             Assert.Fail(
-                "The component CSS variable inventory had drifted from the SCSS sources and has been " +
-                $"refreshed in place ({inventoryPath}). These names are documented public API: if the " +
+                "The component CSS variable inventory had drifted from the SCSS sources" +
+                (refreshed
+                    ? $" and has been refreshed in place ({inventoryPath})."
+                    : $", and refreshing it in place ({inventoryPath}) failed; rerun this test with write access to regenerate it.") +
+                " These names are documented public API: if the " +
                 "change is intentional, review the diff, commit it and note the change in the release " +
                 "notes; otherwise revert the SCSS rename.");
         }
@@ -78,7 +81,7 @@ private static string GetComponentStylesDirectory()
         return dir;
     }
 
-    private static void RefreshInventory(string inventoryPath, string content)
+    private static bool RefreshInventory(string inventoryPath, string content)
     {
         // The three target frameworks run this test concurrently over the same checkout; write via a
         // unique temp file and treat losing the race to a sibling (writing identical content) as success.
@@ -87,9 +90,21 @@ private static void RefreshInventory(string inventoryPath, string content)
         {
             File.WriteAllText(tempPath, content);
             File.Move(tempPath, inventoryPath, overwrite: true);
+            return true;
         }
         catch (Exception ex) when (ex is IOException or UnauthorizedAccessException)
         {
+            // The file being up to date is what counts as refreshed, whoever wrote it: after losing the
+            // race the sibling has already written this exact content, while on e.g. a read-only checkout
+            // the stale content is still there and the failure has to be reported as such.
+            try
+            {
+                return string.Equals(Normalize(File.ReadAllText(inventoryPath)), content, StringComparison.Ordinal);
+            }
+            catch (Exception readEx) when (readEx is IOException or UnauthorizedAccessException)
+            {
+                return false;
+            }
         }
         finally
         {

From 74545ec234d36d907d3e400e028de3c0e30e6c16 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Wed, 29 Jul 2026 14:24:22 +0330
Subject: [PATCH 19/19] resolve review comments 12

---
 .../Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs      | 3 ++-
 .../Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs  | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
index fe55e5fb49..2145c288e9 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
@@ -30,7 +30,8 @@ namespace Bit.BlazorUI;
 
     /// <summary>
     /// 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 target item is disabled.
+    /// enabled item when nothing is checked. Nothing is focused when the ChoiceGroup is read-only or the
+    /// target item is disabled.
     /// </summary>
     [Parameter] public bool AutoFocus { get; set; }
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs
index cbad2f718e..612a366a81 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs
@@ -18,7 +18,7 @@ public partial class BitChoiceGroupDemo
             Name = "AutoFocus",
             Type = "bool",
             DefaultValue = "false",
-            Description = "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 target item is disabled."
+            Description = "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."
         },
         new()
         {