LgRadioGroup / LgRadio

LgRadioGroup<TValue> binds a single value to a group of radio buttons; each option is an LgRadio carrying its value (Value) and label (Text or child content). An LgRadio must always be declared within an LgRadioGroup (an exception is thrown otherwise).

<LgRadioGroup Label="#Priority" @bind-Value="_model.Priority">
    <Items>
        <LgRadio Text="#PriorityLow" Value="Priority.Low" />
        <LgRadio Text="#PriorityNormal" Value="Priority.Normal" />
        <LgRadio Text="#PriorityHigh" Value="Priority.High" />
    </Items>
</LgRadioGroup>

Namespace: Lagoon.UI.Components
Inherits from: LgInputBase<TValue> (LgRadioGroup); LgAriaComponentBase (LgRadio)
NuGet package: Lagoon.UI

Usage

Demo

Try this component in the Lagoon showcase.

Simple group

TaskEditPage.razor
<LgRadioGroup Label="#Priority" @bind-Value="_model.Priority">
    <Items>
        <LgRadio Text="#PriorityLow" Value="Priority.Low" />
        <LgRadio Text="#PriorityNormal" Value="Priority.Normal" />
        <LgRadio Text="#PriorityHigh" Value="Priority.High" Tooltip="#PriorityHighHelp" />
    </Items>
</LgRadioGroup>

TaskEditPage.razor.cs
public partial class TaskEditPage : LgPage
{
    private readonly TaskVm _model = new();

    private enum Priority
    {
        Low,
        Normal,
        High
    }

    private sealed class TaskVm
    {
        public Priority Priority { get; set; }
    }
}

Orientation and style

DisplayOrientation stacks options vertically (by default) or aligns them horizontally. DisplayKind chooses the rendering: classic round checkbox or "modern" style without a box.

DisplayModePage.razor
<LgRadioGroup Label="#DisplayMode"
              DisplayOrientation="DisplayOrientation.Horizontal"
              DisplayKind="RadioButtonDisplayKind.Modern"
              @bind-Value="_model.Mode">
    <Items>
        <LgRadio Text="#ModeList" Value="1" />
        <LgRadio Text="#ModeCards" Value="2" />
    </Items>
</LgRadioGroup>

DisplayModePage.razor.cs
public partial class DisplayModePage : LgPage
{
    private readonly DisplayVm _model = new();

    private sealed class DisplayVm
    {
        public int Mode { get; set; } = 1;
    }
}

Rich content and disabled option

ChildContent of an LgRadio replaces the text label; Disabled disables an option without hiding it.

PlanPage.razor
<LgRadioGroup Label="#Plan" @bind-Value="_model.Plan">
    <Items>
        <LgRadio Value="@("standard")">
            <strong>Standard</strong> — <LgIcon IconName="@IconNames.All.Check" />
        </LgRadio>
        <LgRadio Text="#PremiumPlan" Value="@("premium")" Disabled="true" />
    </Items>
</LgRadioGroup>

PlanPage.razor.cs
public partial class PlanPage : LgPage
{
    private readonly PlanVm _model = new();

    private sealed class PlanVm
    {
        public string Plan { get; set; } = "standard";
    }
}

Cancel a selection change

OnChangingAsync is called before the assignment and allows canceling the change (args.Cancel); OnChange (inherited) is called after.

SubscriptionPage.razor
<LgRadioGroup Label="#Subscription"
              OnChangingAsync="OnSubscriptionChangingAsync"
              @bind-Value="_model.Subscription">
    <Items>
        <LgRadio Text="#Monthly" Value="@("monthly")" />
        <LgRadio Text="#Yearly" Value="@("yearly")" />
    </Items>
</LgRadioGroup>

SubscriptionPage.razor.cs
public partial class SubscriptionPage : LgPage
{
    private readonly SubscriptionVm _model = new();

    // Called before the change: blocks switching to monthly during an active commitment.
    private Task OnSubscriptionChangingAsync(ChangingEventArgs<string> args)
    {
        if (args.NewValue == "monthly" && _model.HasCommitment)
        {
            args.Cancel = true;
            ShowWarning("#CommitmentInProgress");
        }
        return Task.CompletedTask;
    }

    private sealed class SubscriptionVm
    {
        public string Subscription { get; set; } = "yearly";
        public bool HasCommitment { get; set; } = true;
    }
}

Properties

`LgRadioGroup<TValue>`

All [Parameter] properties of the component, including inherited ones.

Name	Type	Default	Declared in	Description
`DisplayKind`	`RadioButtonDisplayKind`	`Classic`	`LgRadioGroup`	Display style for radio buttons.
`DisplayOrientation`	`DisplayOrientation`	`Vertical`	`LgRadioGroup`	Orientation of options.
`GroupName`	`string`	`null`	`LgRadioGroup`	Name of the group (radio `name` attribute). Generated if absent.
`Items`	`RenderFragment`	`null`	`LgRadioGroup`	The options, declared with `LgRadio`.
`OnChangingAsync`	`Func<ChangingEventArgs<TValue>, Task>`	`null`	`LgRadioGroup`	Callback called before the value changes; the change can be canceled.
`AdditionalAttributes`	`IReadOnlyDictionary<string, object>`	`null`	`LgInputBase`	Additional HTML attributes applied to the rendered element.
`AutoFocus`	`bool`	`false`	`LgInputBase`	Gives focus to the group on first render.
`ConfirmationMessage`	`string`	`null`	`LgInputBase`	Confirmation message displayed before applying a selection change.
`Container`	`IInputContainer<TValue>`	`null`	`LgInputBase`	Internal use: attaches a GridView cell to the group.
`CssClass`	`string`	`null`	`LgInputBase`	Additional CSS classes.
`Disabled`	`bool`	`false`	`LgInputBase`	Disables the entire group.
`DisplayName`	`string`	`null`	`LgInputBase`	Field name used in error messages.
`HideValidationMessage`	`bool`	`false`	`LgInputBase`	Hides the validation message below the group.
`Label`	`string`	`null`	`LgInputBase`	Label of the group.
`LabelContent`	`RenderFragment`	`null`	`LgInputBase`	Custom content for the label area.
`OnChange`	`EventCallback<ChangeEventArgs>`	—	`LgInputBase`	Callback called after the selection changes.
`OnReset`	`EventCallback<ChangeEventArgs>`	—	`LgInputBase`	Callback called on reset.
`PolicyEdit`	`string`	`null`	`LgInputBase`	Policy required to edit the group.
`PolicyVisible`	`string`	`null`	`LgInputBase`	Policy required to display the group.
`ReadOnly`	`bool`	`false`	`LgInputBase`	Displays the selection as read-only.
`Required`	`bool?`	`null`	`LgInputBase`	Required field. If `null`, inferred from the `[Required]` attribute of the bound property.
`ResetButton`	`bool?`	`null`	`LgInputBase`	Displays the reset button. If `null`, the application behavior configuration applies.
`ResetText`	`string`	`null`	`LgInputBase`	Text of the reset button.
`ResetTextAriaLabel`	`string`	`null`	`LgInputBase`	Accessible label (`aria-label`) for the reset button.
`Tooltip`	`string`	`null`	`LgInputBase`	Tooltip for the group.
`TooltipIsHtml`	`bool`	`false`	`LgInputBase`	Indicates if the `Tooltip` content is HTML format (otherwise plain text).
`Value`	`TValue`	—	`LgInputBase`	Selected value (`@bind-Value`).
`ValueChanged`	`EventCallback<TValue>`	—	`LgInputBase`	Callback for updating the bound value.
`ValueExpression`	`Expression<Func<TValue>>`	—	`LgInputBase`	Expression identifying the bound property.
`AriaLabel`	`string`	`null`	`LgAriaComponentBase`	Value of the `aria-label` attribute.
`AriaLabelledBy`	`string`	`null`	`LgAriaComponentBase`	Value of the `aria-labelledby` attribute.

`LgRadio<TValue>`

Name	Type	Default	Declared in	Description
`AdditionalAttributes`	`IReadOnlyDictionary<string, object>`	`null`	`LgRadio`	Additional HTML attributes applied to the `input` element.
`ChildContent`	`RenderFragment`	`null`	`LgRadio`	Rich content for the option label (instead of `Text`).
`CssClass`	`string`	`null`	`LgRadio`	Additional CSS classes for the option.
`Disabled`	`bool`	`false`	`LgRadio`	Disables the option.
`Text`	`string`	`null`	`LgRadio`	Label for the option.
`Tooltip`	`string`	`null`	`LgRadio`	Tooltip for the option.
`TooltipIsHtml`	`bool`	`false`	`LgRadio`	Indicates if the `Tooltip` content is HTML format (otherwise plain text).
`Value`	`TValue`	—	`LgRadio`	Value carried by this option.
`AriaLabel`	`string`	`null`	`LgAriaComponentBase`	Value of the `aria-label` attribute.
`AriaLabelledBy`	`string`	`null`	`LgAriaComponentBase`	Value of the `aria-labelledby` attribute.

Cascading parameters

LgRadio receives its parent group through the cascading parameter RadioGroup (ILgRadioGroup) — it must be declared within the Items of an LgRadioGroup.

Events

Event	Type	Description
`OnChangingAsync`	`Func<ChangingEventArgs<TValue>, Task>`	Before the selection changes; `args.Cancel = true` cancels it.
`OnChange`	`EventCallback<ChangeEventArgs>`	After the selection changes.
`OnReset`	`EventCallback<ChangeEventArgs>`	On group reset.

Associated enumerations

`DisplayOrientation`

Value	Description
`Vertical`	Options stacked vertically (default value).
`Horizontal`	Options aligned horizontally.

`RadioButtonDisplayKind`

Value	Description
`Classic`	Round checkbox displayed next to the label (default value).
`Modern`	Selected text style, without a checkbox.

Best practices / accessibility

For more than a few options, prefer LgSelect: the dropdown list remains readable as choices multiply.
Add a Tooltip to options whose short label deserves clarification, rather than lengthening the label.

Complete reference

All parameters (including inherited ones): API reference — LgRadioGroup · LgRadio.

LgSelect — single selection from a dropdown list.
LgCheckBoxList — multiple selection with checkboxes.

Usage​

Demo​

Simple group​

Orientation and style​

Rich content and disabled option​

Cancel a selection change​

Properties​

LgRadioGroup<TValue>​

LgRadio<TValue>​

Events​

Associated enumerations​

DisplayOrientation​

RadioButtonDisplayKind​

Best practices / accessibility​

Related components​