LgCheckBoxList

LgCheckBoxList<TValue> affiche un groupe de cases à cocher et lie l'ensemble des valeurs cochées à une collection (ICollection<TValue>). Chaque case est déclarée avec un LgCheckBoxListItem portant sa valeur et son texte.

<LgCheckBoxList Label="#Options" @bind-Value="_model.SelectedOptions">
    <Items>
        <LgCheckBoxListItem Text="#Option1" Value="1" />
        <LgCheckBoxListItem Text="#Option2" Value="2" />
    </Items>
</LgCheckBoxList>

Espace de noms : Lagoon.UI.Components
Hérite de : LgInputBase<ICollection<TValue>> → LgAriaComponentBase → LgComponentBase
Package NuGet : Lagoon.UI

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Groupe simple

OptionsPage.razor
<LgCheckBoxList Label="#Options" @bind-Value="_model.SelectedOptions">
    <Items>
        <LgCheckBoxListItem Text="#Option1" Value="1" />
        <LgCheckBoxListItem Text="#Option2" Value="2" />
        <LgCheckBoxListItem Text="#Option3" Value="3" Disabled="true" />
    </Items>
</LgCheckBoxList>

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

    private sealed class OptionsVm
    {
        // Collection liée : contient les valeurs des cases cochées.
        public List<int> SelectedOptions { get; set; } = new();
    }
}

Orientation et rendu

DisplayOrientation empile les cases verticalement (par défaut) ou les aligne horizontalement. CheckBoxKind rend chaque case en case à cocher ou en interrupteur, et TextPosition place le texte à gauche ou à droite.

DaysPage.razor
<LgCheckBoxList Label="#WorkingDays"
                DisplayOrientation="DisplayOrientation.Horizontal"
                CheckBoxKind="CheckBoxKind.Toggle"
                TextPosition="CheckBoxTextPosition.Right"
                @bind-Value="_model.WorkingDays">
    <Items>
        <LgCheckBoxListItem Text="#Monday" Value="DayOfWeek.Monday" />
        <LgCheckBoxListItem Text="#Tuesday" Value="DayOfWeek.Tuesday" />
        <LgCheckBoxListItem Text="#Wednesday" Value="DayOfWeek.Wednesday" />
    </Items>
</LgCheckBoxList>

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

    private sealed class DaysVm
    {
        public List<DayOfWeek> WorkingDays { get; set; } = new();
    }
}

Annuler un changement de sélection

OnChangingAsync est appelé avant la mise à jour de la collection ; args.ItemsToAdd / args.ItemsToRemove détaillent le changement et args.Cancel l'annule.

ModulesPage.razor
<LgCheckBoxList Label="#Modules"
                OnChangingAsync="OnModulesChangingAsync"
                @bind-Value="_model.Modules">
    <Items>
        <LgCheckBoxListItem Text="#CoreModule" Value="@("core")" />
        <LgCheckBoxListItem Text="#ReportingModule" Value="@("reporting")" />
    </Items>
</LgCheckBoxList>

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

    // Appelé avant le changement : interdit de décocher le module obligatoire.
    private Task OnModulesChangingAsync(ChangingCollectionEventArgs<string> args)
    {
        if (args.ItemsToRemove.Contains("core"))
        {
            args.Cancel = true;
            ShowWarning("#CoreModuleRequired");
        }
        return Task.CompletedTask;
    }

    private sealed class ModulesVm
    {
        public List<string> Modules { get; set; } = new() { "core" };
    }
}

Propriétés

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

Nom	Type	Défaut	Déclaré dans	Description
`CheckBoxKind`	`CheckBoxKind`	`Check`	`LgCheckBoxList`	Rendu des cases : case à cocher ou interrupteur.
`DisplayOrientation`	`DisplayOrientation`	`Vertical`	`LgCheckBoxList`	Orientation des cases.
`Items`	`RenderFragment`	`null`	`LgCheckBoxList`	Les cases, déclarées avec `LgCheckBoxListItem`.
`OnChangingAsync`	`Func<ChangingCollectionEventArgs<TValue>, Task>`	`null`	`LgCheckBoxList`	Callback appelé avant le changement de la collection ; le changement peut y être annulé.
`TextPosition`	`CheckBoxTextPosition`	`Left`	`LgCheckBoxList`	Position du texte de chaque case.
`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<ICollection<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.
`TooltipIsHtml`	`bool`	`false`	`LgInputBase`	Indique si le contenu du `Tooltip` est au format HTML (sinon texte brut).
`Value`	`ICollection<TValue>`	`null`	`LgInputBase`	Collection des valeurs cochées (`@bind-Value`).
`ValueChanged`	`EventCallback<ICollection<TValue>>`	—	`LgInputBase`	Callback de mise à jour de la collection liée.
`ValueExpression`	`Expression<Func<ICollection<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`.

`LgCheckBoxListItem`

Chaque case du groupe est déclarée avec un LgCheckBoxListItem :

Nom	Type	Défaut	Description
`CssClass`	`string`	`null`	Classes CSS additionnelles de la case.
`Disabled`	`bool`	`false`	Désactive la case.
`Text`	`string`	`null`	Texte de la case.
`Tooltip`	`string`	`null`	Bulle d'aide de la case.
`TooltipIsHtml`	`bool`	`false`	Indique si le contenu du `Tooltip` est au format HTML.
`Value`	`TValue`	—	Valeur ajoutée à la collection quand la case est cochée.

Paramètres en cascade

LgCheckBoxList consomme aussi des paramètres fournis automatiquement par des composants ancêtres (vous n'avez pas à les définir) : ParentAuthorizeView (LgAuthorizeView) et le contexte d'édition d'un LgEditForm parent.

Événements

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

Énumérations associées

Les énumérations utilisées sont documentées sur les composants de base : CheckBoxKind et CheckBoxTextPosition sur LgCheckBox, DisplayOrientation sur LgRadioGroup.

Bonnes pratiques / accessibilité

Initialisez la collection liée avec une liste vide plutôt que null.
Pour une longue liste de choix, préférez LgSelect en sélection multiple : la liste déroulante avec recherche reste lisible.

Référence complète

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

Composants liés

LgCheckBox — case à cocher unitaire.
LgRadioGroup — choix unique par boutons radio.
LgSelect — sélection dans une liste déroulante.

Utilisation​

Démonstration​

Groupe simple​

Orientation et rendu​

Annuler un changement de sélection​

Propriétés​

LgCheckBoxListItem​

Événements​

Énumérations associées​

Bonnes pratiques / accessibilité​

Composants liés​