LgRadioGroup / LgRadio

LgRadioGroup<TValue> lie une valeur unique à un groupe de boutons radio ; chaque option est un LgRadio portant sa valeur (Value) et son libellé (Text ou contenu enfant). Un LgRadio doit toujours être déclaré dans un LgRadioGroup (une exception est levée sinon).

<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>

Espace de noms : Lagoon.UI.Components
Hérite de : LgInputBase<TValue> (LgRadioGroup) ; LgAriaComponentBase (LgRadio)
Package NuGet : Lagoon.UI

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Groupe simple

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 et style

DisplayOrientation empile les options verticalement (par défaut) ou les aligne horizontalement. DisplayKind choisit le rendu : case ronde classique ou style « moderne » sans case.

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

Contenu riche et option désactivée

ChildContent d'un LgRadio remplace le libellé texte ; Disabled neutralise une option sans la masquer.

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

Annuler un changement de sélection

OnChangingAsync est appelé avant l'affectation et permet d'annuler le changement (args.Cancel) ; OnChange (hérité) est appelé après.

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();

    // Appelé avant le changement : bloque le passage au mensuel en cours d'engagement.
    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;
    }
}

Propriétés

`LgRadioGroup<TValue>`

Toutes les propriétés [Parameter] du composant, y compris celles héritées.

Nom	Type	Défaut	Déclaré dans	Description
`DisplayKind`	`RadioButtonDisplayKind`	`Classic`	`LgRadioGroup`	Style d'affichage des boutons radio.
`DisplayOrientation`	`DisplayOrientation`	`Vertical`	`LgRadioGroup`	Orientation des options.
`GroupName`	`string`	`null`	`LgRadioGroup`	Nom du groupe (attribut `name` des radios). Généré si absent.
`Items`	`RenderFragment`	`null`	`LgRadioGroup`	Les options, déclarées avec `LgRadio`.
`OnChangingAsync`	`Func<ChangingEventArgs<TValue>, Task>`	`null`	`LgRadioGroup`	Callback appelé avant le changement de valeur ; le changement peut y être annulé.
`AdditionalAttributes`	`IReadOnlyDictionary<string, object>`	`null`	`LgInputBase`	Attributs HTML additionnels appliqués à l'élément rendu.
`AutoFocus`	`bool`	`false`	`LgInputBase`	Donne le focus au groupe lors du premier rendu.
`ConfirmationMessage`	`string`	`null`	`LgInputBase`	Message de confirmation affiché avant d'appliquer un changement de sélection.
`Container`	`IInputContainer<TValue>`	`null`	`LgInputBase`	Usage interne : rattache une cellule de GridView au groupe.
`CssClass`	`string`	`null`	`LgInputBase`	Classes CSS additionnelles.
`Disabled`	`bool`	`false`	`LgInputBase`	Désactive tout le groupe.
`DisplayName`	`string`	`null`	`LgInputBase`	Nom du champ utilisé dans les messages d'erreur.
`HideValidationMessage`	`bool`	`false`	`LgInputBase`	Masque le message de validation sous le groupe.
`Label`	`string`	`null`	`LgInputBase`	Libellé du groupe.
`LabelContent`	`RenderFragment`	`null`	`LgInputBase`	Contenu personnalisé de la zone de libellé.
`OnChange`	`EventCallback<ChangeEventArgs>`	—	`LgInputBase`	Callback appelé après le changement de sélection.
`OnReset`	`EventCallback<ChangeEventArgs>`	—	`LgInputBase`	Callback appelé à la réinitialisation.
`PolicyEdit`	`string`	`null`	`LgInputBase`	Policy requise pour modifier le groupe.
`PolicyVisible`	`string`	`null`	`LgInputBase`	Policy requise pour afficher le groupe.
`ReadOnly`	`bool`	`false`	`LgInputBase`	Affiche la sélection en lecture seule.
`Required`	`bool?`	`null`	`LgInputBase`	Champ obligatoire. Si `null`, déduit de l'attribut `[Required]` de la propriété liée.
`ResetButton`	`bool?`	`null`	`LgInputBase`	Affiche le bouton d'effacement. Si `null`, la configuration de comportement de l'application s'applique.
`ResetText`	`string`	`null`	`LgInputBase`	Texte du bouton d'effacement.
`ResetTextAriaLabel`	`string`	`null`	`LgInputBase`	Libellé accessible (`aria-label`) du bouton d'effacement.
`Tooltip`	`string`	`null`	`LgInputBase`	Bulle d'aide du groupe.
`TooltipIsHtml`	`bool`	`false`	`LgInputBase`	Indique si le contenu du `Tooltip` est au format HTML (sinon texte brut).
`Value`	`TValue`	—	`LgInputBase`	Valeur sélectionnée (`@bind-Value`).
`ValueChanged`	`EventCallback<TValue>`	—	`LgInputBase`	Callback de mise à jour de la valeur liée.
`ValueExpression`	`Expression<Func<TValue>>`	—	`LgInputBase`	Expression identifiant la propriété liée.
`AriaLabel`	`string`	`null`	`LgAriaComponentBase`	Valeur de l'attribut `aria-label`.
`AriaLabelledBy`	`string`	`null`	`LgAriaComponentBase`	Valeur de l'attribut `aria-labelledby`.

`LgRadio<TValue>`

Nom	Type	Défaut	Déclaré dans	Description
`AdditionalAttributes`	`IReadOnlyDictionary<string, object>`	`null`	`LgRadio`	Attributs HTML additionnels appliqués à l'élément `input`.
`ChildContent`	`RenderFragment`	`null`	`LgRadio`	Contenu riche du libellé de l'option (à la place de `Text`).
`CssClass`	`string`	`null`	`LgRadio`	Classes CSS additionnelles de l'option.
`Disabled`	`bool`	`false`	`LgRadio`	Désactive l'option.
`Text`	`string`	`null`	`LgRadio`	Libellé de l'option.
`Tooltip`	`string`	`null`	`LgRadio`	Bulle d'aide de l'option.
`TooltipIsHtml`	`bool`	`false`	`LgRadio`	Indique si le contenu du `Tooltip` est au format HTML (sinon texte brut).
`Value`	`TValue`	—	`LgRadio`	Valeur portée par cette option.
`AriaLabel`	`string`	`null`	`LgAriaComponentBase`	Valeur de l'attribut `aria-label`.
`AriaLabelledBy`	`string`	`null`	`LgAriaComponentBase`	Valeur de l'attribut `aria-labelledby`.

Paramètres en cascade

LgRadio reçoit son groupe parent par le paramètre en cascade RadioGroup (ILgRadioGroup) — il doit être déclaré dans le Items d'un LgRadioGroup.

Événements

Événement	Type	Description
`OnChangingAsync`	`Func<ChangingEventArgs<TValue>, Task>`	Avant le changement de sélection ; `args.Cancel = true` l'annule.
`OnChange`	`EventCallback<ChangeEventArgs>`	Après le changement de sélection.
`OnReset`	`EventCallback<ChangeEventArgs>`	À la réinitialisation du groupe.

Énumérations associées

`DisplayOrientation`

Valeur	Description
`Vertical`	Options empilées verticalement (valeur par défaut).
`Horizontal`	Options alignées horizontalement.

`RadioButtonDisplayKind`

Valeur	Description
`Classic`	Case ronde affichée à côté du libellé (valeur par défaut).
`Modern`	Style de texte sélectionné, sans case.

Bonnes pratiques / accessibilité

Pour plus de quelques options, préférez LgSelect : la liste déroulante reste lisible quand les choix se multiplient.
Donnez un Tooltip aux options dont le libellé court mérite une précision, plutôt que d'allonger le libellé.

Référence complète

Tous les paramètres (hérités compris) : Référence API — LgRadioGroup · LgRadio.

Composants liés

LgSelect — sélection unique dans une liste déroulante.
LgCheckBoxList — sélection multiple par cases à cocher.

Utilisation​

Démonstration​

Groupe simple​

Orientation et style​

Contenu riche et option désactivée​

Annuler un changement de sélection​

Propriétés​

LgRadioGroup<TValue>​

LgRadio<TValue>​

Événements​

Énumérations associées​

DisplayOrientation​

RadioButtonDisplayKind​

Bonnes pratiques / accessibilité​

Composants liés​