LgCheckBox

LgCheckBox<TValue> binds a boolean value to a classic checkbox (CheckBoxKind.Check) or a toggle switch (CheckBoxKind.Toggle). The bound type must be bool or bool? (required for the indeterminate state).

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

Namespace: Lagoon.UI.Components
Inherits from: LgInputBase<TValue> → LgAriaComponentBase → LgComponentBase
Interfaces: ILgCheckBox<TValue>
NuGet package: Lagoon.UI

Usage

Demonstration

Try this component in the Lagoon showcase.

Simple checkbox

Text is the text displayed next to the checkbox (TextPosition places it on the left or right); Label remains the standard form field label.

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

Toggle switch

CheckBoxKind="CheckBoxKind.Toggle" renders the checkbox as a toggle switch.

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

Indeterminate state

AllowIndeterminateState="true" allows the third state (neither checked nor unchecked); the bound property must then be 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 represents the indeterminate state (partial selection).
        public bool? SelectAll { get; set; }
    }
}

Cancel or confirm the toggle

OnChangingAsync is called before the change and allows you to cancel it (args.Cancel); args.Item returns the object passed to the Item parameter, useful when the checkbox is repeated in a list.

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
{
    // Features displayed: each checkbox carries its feature via Item.
    private readonly List<FeatureVm> _features = new();

    // Called before the toggle: prevents disabling a locked feature.
    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; }
    }
}

Properties

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

Name	Type	Default	Declared in	Description
`AllowIndeterminateState`	`bool`	`false`	`LgCheckBox`	Allows the indeterminate state (the bound property must be `bool?`).
`CheckBoxKind`	`CheckBoxKind`	`Check`	`LgCheckBox`	Checkbox rendering: classic checkbox or toggle switch.
`Item`	`object`	`null`	`LgCheckBox`	Data associated with the control, returned in `ChangingItemEventArgs.Item`.
`OnChangingAsync`	`Func<ChangingItemEventArgs<TValue>, Task>`	`null`	`LgCheckBox`	Callback called before value change; the change can be cancelled.
`Text`	`string`	`null`	`LgCheckBox`	Text displayed next to the checkbox.
`TextPosition`	`CheckBoxTextPosition`	`Left`	`LgCheckBox`	Position of the text relative to the checkbox.
`AdditionalAttributes`	`IReadOnlyDictionary<string, object>`	`null`	`LgInputBase`	Additional HTML attributes applied to the rendered element.
`AutoFocus`	`bool`	`false`	`LgInputBase`	Gives focus to the control on first render.
`ConfirmationMessage`	`string`	`null`	`LgInputBase`	Confirmation message displayed before applying the toggle.
`Container`	`IInputContainer<TValue>`	`null`	`LgInputBase`	Internal use: attaches a GridView cell to the control.
`CssClass`	`string`	`null`	`LgInputBase`	Additional CSS classes.
`Disabled`	`bool`	`false`	`LgInputBase`	Disables the control.
`DisplayName`	`string`	`null`	`LgInputBase`	Field name used in error messages.
`HideValidationMessage`	`bool`	`false`	`LgInputBase`	Hides the validation message below the control.
`Label`	`string`	`null`	`LgInputBase`	Field label (standard label area for form fields).
`LabelContent`	`RenderFragment`	`null`	`LgInputBase`	Custom content for the label area.
`OnChange`	`EventCallback<ChangeEventArgs>`	—	`LgInputBase`	Callback called after value change.
`OnReset`	`EventCallback<ChangeEventArgs>`	—	`LgInputBase`	Callback called on control reset.
`PolicyEdit`	`string`	`null`	`LgInputBase`	Policy required to modify the control.
`PolicyVisible`	`string`	`null`	`LgInputBase`	Policy required to display the control.
`ReadOnly`	`bool`	`false`	`LgInputBase`	Displays the control in read-only state.
`Required`	`bool?`	`null`	`LgInputBase`	Required field. If `null`, inferred from the `[Required]` attribute of the bound property.
`ResetButton`	`bool?`	`null`	`LgInputBase`	Displays the clear button. If `null`, the application behavior configuration applies.
`ResetText`	`string`	`null`	`LgInputBase`	Clear button text.
`ResetTextAriaLabel`	`string`	`null`	`LgInputBase`	Accessible label (`aria-label`) for the clear button.
`Tooltip`	`string`	`null`	`LgInputBase`	Tooltip.
`TooltipIsHtml`	`bool`	`false`	`LgInputBase`	Indicates whether Tooltip content is in HTML format (otherwise plain text).
`Value`	`TValue`	—	`LgInputBase`	Bound value (`@bind-Value`), of type `bool` or `bool?`.
`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.

Cascading parameters

LgCheckBox also consumes parameters automatically provided by ancestor components (you don't need to define them): ParentAuthorizeView (LgAuthorizeView) and the editing context of a parent LgEditForm.

Events

Event	Type	Description
`OnChangingAsync`	`Func<ChangingItemEventArgs<TValue>, Task>`	Before the toggle; `args.Cancel = true` cancels it, `args.Item` returns the associated data.
`OnChange`	`EventCallback<ChangeEventArgs>`	After the toggle.
`OnReset`	`EventCallback<ChangeEventArgs>`	When the control is reset.

Associated enumerations

`CheckBoxKind`

Control rendering (CheckBoxKind property).

Value	Description
`Check`	Classic checkbox (default value).
`Toggle`	Toggle switch.

`CheckBoxTextPosition`

Position of Text relative to the checkbox.

Value	Description
`Left`	Text on the left (default value).
`Right`	Text on the right.

Best practices / accessibility

Use bool? with AllowIndeterminateState only: on a simple bool, the indeterminate state has no representation.
Provide Text (or AriaLabel): a checkbox without text has no accessible label.
For an immediate on/off action, see also LgToggle.

Complete reference

All parameters (including inherited ones): API Reference — LgCheckBox.

LgCheckBoxList — group of checkboxes linked to a collection.
LgToggle — toggle switch with state-specific text.
LgRadioGroup — single choice with radio buttons.

Usage​

Demonstration​

Simple checkbox​

Toggle switch​

Indeterminate state​

Cancel or confirm the toggle​

Properties​

Events​

Associated enumerations​

CheckBoxKind​

CheckBoxTextPosition​

Best practices / accessibility​

Related components​