LgCheckBox

LgCheckBox<TValue> lie une valeur booléenne à une case à cocher classique (CheckBoxKind.Check) ou à un interrupteur (CheckBoxKind.Toggle). Le type lié doit être bool ou bool? (nécessaire pour l'état indéterminé).

<LgCheckBox Text="#ReceiveNotifications" @bind-Value="_model.NotificationsEnabled" />

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

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Case à cocher simple

Text est le texte affiché à côté de la case (TextPosition le place à gauche ou à droite) ; Label reste le libellé standard du champ de formulaire.

NotificationsPage.razor
<LgCheckBox Label="#Notifications"
            Text="#ReceiveNotifications"
            TextPosition="CheckBoxTextPosition.Right"
            @bind-Value="_model.NotificationsEnabled" />

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

    private sealed class NotificationsVm
    {
        public bool NotificationsEnabled { get; set; }
    }
}

Interrupteur (toggle)

CheckBoxKind="CheckBoxKind.Toggle" rend la case comme un interrupteur.

AdvancedModePage.razor
<LgCheckBox Label="#AdvancedMode"
            Text="#Enable"
            CheckBoxKind="CheckBoxKind.Toggle"
            TextPosition="CheckBoxTextPosition.Right"
            @bind-Value="_model.AdvancedMode" />

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

    private sealed class AdvancedVm
    {
        public bool AdvancedMode { get; set; }
    }
}

État indéterminé

AllowIndeterminateState="true" autorise le troisième état (ni coché ni décoché) ; la propriété liée doit alors être bool?.

SelectionPage.razor
<LgCheckBox Text="#SelectAll"
            AllowIndeterminateState="true"
            @bind-Value="_model.SelectAll" />

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

    private sealed class SelectionVm
    {
        // bool? : null représente l'état indéterminé (sélection partielle).
        public bool? SelectAll { get; set; }
    }
}

Annuler ou confirmer le basculement

OnChangingAsync est appelé avant le changement et permet de l'annuler (args.Cancel) ; args.Item restitue l'objet passé au paramètre Item, pratique quand la case est répétée dans une liste.

FeatureListPage.razor
@foreach (FeatureVm feature in _features)
{
    <LgCheckBox Text="@feature.Name"
                Item="feature"
                OnChangingAsync="OnFeatureChangingAsync"
                @bind-Value="feature.IsEnabled" />
}

FeatureListPage.razor.cs
public partial class FeatureListPage : LgPage
{
    // Fonctionnalités affichées : chaque case porte sa fonctionnalité via Item.
    private readonly List<FeatureVm> _features = new();

    // Appelé avant le basculement : interdit de désactiver une fonctionnalité verrouillée.
    private Task OnFeatureChangingAsync(ChangingItemEventArgs<bool> args)
    {
        if (args.Item is FeatureVm feature && feature.IsLocked)
        {
            args.Cancel = true;
            ShowWarning("#FeatureLocked");
        }
        return Task.CompletedTask;
    }

    private sealed class FeatureVm
    {
        public string Name { get; set; }
        public bool IsEnabled { get; set; }
        public bool IsLocked { get; set; }
    }
}

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
`AllowIndeterminateState`	`bool`	`false`	`LgCheckBox`	Autorise l'état indéterminé (la propriété liée doit être `bool?`).
`CheckBoxKind`	`CheckBoxKind`	`Check`	`LgCheckBox`	Rendu de la case : case à cocher ou interrupteur.
`Item`	`object`	`null`	`LgCheckBox`	Donnée associée au contrôle, restituée dans `ChangingItemEventArgs.Item`.
`OnChangingAsync`	`Func<ChangingItemEventArgs<TValue>, Task>`	`null`	`LgCheckBox`	Callback appelé avant le changement de valeur ; le changement peut y être annulé.
`Text`	`string`	`null`	`LgCheckBox`	Texte affiché à côté de la case.
`TextPosition`	`CheckBoxTextPosition`	`Left`	`LgCheckBox`	Position du texte par rapport à la case.
`AdditionalAttributes`	`IReadOnlyDictionary<string, object>`	`null`	`LgInputBase`	Attributs HTML additionnels appliqués à l'élément rendu.
`AutoFocus`	`bool`	`false`	`LgInputBase`	Donne le focus au contrôle lors du premier rendu.
`ConfirmationMessage`	`string`	`null`	`LgInputBase`	Message de confirmation affiché avant d'appliquer le basculement.
`Container`	`IInputContainer<TValue>`	`null`	`LgInputBase`	Usage interne : rattache une cellule de GridView au contrôle.
`CssClass`	`string`	`null`	`LgInputBase`	Classes CSS additionnelles.
`Disabled`	`bool`	`false`	`LgInputBase`	Désactive le contrôle.
`DisplayName`	`string`	`null`	`LgInputBase`	Nom du champ utilisé dans les messages d'erreur.
`HideValidationMessage`	`bool`	`false`	`LgInputBase`	Masque le message de validation sous le contrôle.
`Label`	`string`	`null`	`LgInputBase`	Libellé du champ (zone de libellé standard des champs de formulaire).
`LabelContent`	`RenderFragment`	`null`	`LgInputBase`	Contenu personnalisé de la zone de libellé.
`OnChange`	`EventCallback<ChangeEventArgs>`	—	`LgInputBase`	Callback appelé après le changement de valeur.
`OnReset`	`EventCallback<ChangeEventArgs>`	—	`LgInputBase`	Callback appelé à la réinitialisation du contrôle.
`PolicyEdit`	`string`	`null`	`LgInputBase`	Policy requise pour modifier le contrôle.
`PolicyVisible`	`string`	`null`	`LgInputBase`	Policy requise pour afficher le contrôle.
`ReadOnly`	`bool`	`false`	`LgInputBase`	Affiche l'état 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`	`TValue`	—	`LgInputBase`	Valeur liée (`@bind-Value`), de type `bool` ou `bool?`.
`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`.

Paramètres en cascade

LgCheckBox 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<ChangingItemEventArgs<TValue>, Task>`	Avant le basculement ; `args.Cancel = true` l'annule, `args.Item` restitue la donnée associée.
`OnChange`	`EventCallback<ChangeEventArgs>`	Après le basculement.
`OnReset`	`EventCallback<ChangeEventArgs>`	À la réinitialisation du contrôle.

Énumérations associées

`CheckBoxKind`

Rendu du contrôle (propriété CheckBoxKind).

Valeur	Description
`Check`	Case à cocher classique (valeur par défaut).
`Toggle`	Interrupteur (toggle).

`CheckBoxTextPosition`

Position du texte Text par rapport à la case.

Valeur	Description
`Left`	Texte à gauche (valeur par défaut).
`Right`	Texte à droite.

Bonnes pratiques / accessibilité

Utilisez bool? avec AllowIndeterminateState uniquement : sur un bool simple, l'état indéterminé n'a pas de représentation.
Renseignez Text (ou AriaLabel) : une case sans texte n'a pas de libellé accessible.
Pour une action à effet immédiat de type marche/arrêt, voyez aussi LgToggle.

Référence complète

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

Composants liés

LgCheckBoxList — groupe de cases lié à une collection.
LgToggle — interrupteur avec textes par état.
LgRadioGroup — choix unique par boutons radio.

Utilisation​

Démonstration​

Case à cocher simple​

Interrupteur (toggle)​

État indéterminé​

Annuler ou confirmer le basculement​

Propriétés​

Événements​

Énumérations associées​

CheckBoxKind​

CheckBoxTextPosition​

Bonnes pratiques / accessibilité​

Composants liés​