LgCheckBoxList

LgCheckBoxList<TValue> displays a checkbox group and binds the set of checked values to a collection (ICollection<TValue>). Each checkbox is declared with a LgCheckBoxListItem carrying its value and text.

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

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

Usage

Demonstration

Try this component in the Lagoon showcase.

Simple group

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
    {
        // Bound collection: contains the values of the checked checkboxes.
        public List<int> SelectedOptions { get; set; } = new();
    }
}

Orientation and rendering

DisplayOrientation stacks checkboxes vertically (default) or aligns them horizontally. CheckBoxKind renders each checkbox as a checkbox or toggle, and TextPosition places text to the left or right.

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

Cancel a selection change

OnChangingAsync is called before the collection is updated; args.ItemsToAdd / args.ItemsToRemove detail the change and args.Cancel cancels it.

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

    // Called before the change: prevents unchecking the required module.
    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" };
    }
}

Properties

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

Name	Type	Default	Declared in	Description
CheckBoxKind	CheckBoxKind	Check	LgCheckBoxList	Rendering of checkboxes: checkbox or toggle.
DisplayOrientation	DisplayOrientation	Vertical	LgCheckBoxList	Orientation of checkboxes.
Items	RenderFragment	null	LgCheckBoxList	The checkboxes, declared with LgCheckBoxListItem.
OnChangingAsync	Func<ChangingCollectionEventArgs<TValue>, Task>	null	LgCheckBoxList	Callback called before the collection change; the change can be canceled there.
TextPosition	CheckBoxTextPosition	Left	LgCheckBoxList	Text position of each checkbox.
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<ICollection<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 selection change.
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 in read-only mode.
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) of the reset button.
Tooltip	string	null	LgInputBase	Tooltip.
TooltipIsHtml	bool	false	LgInputBase	Indicates whether the Tooltip content is in HTML format (otherwise plain text).
Value	ICollection<TValue>	null	LgInputBase	Collection of checked values (@bind-Value).
ValueChanged	EventCallback<ICollection<TValue>>	—	LgInputBase	Callback for updating the bound collection.
ValueExpression	Expression<Func<ICollection<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.

LgCheckBoxListItem

Each checkbox in the group is declared with a LgCheckBoxListItem :

Name	Type	Default	Description
CssClass	string	null	Additional CSS classes for the checkbox.
Disabled	bool	false	Disables the checkbox.
Text	string	null	Text of the checkbox.
Tooltip	string	null	Tooltip of the checkbox.
TooltipIsHtml	bool	false	Indicates whether the Tooltip content is in HTML format.
Value	TValue	—	Value added to the collection when the checkbox is checked.

Cascading Parameters

LgCheckBoxList also consumes parameters automatically provided by ancestor components (you do not have to define them): ParentAuthorizeView (LgAuthorizeView) and the edit context of a parent LgEditForm.

Events

Event	Type	Description
OnChangingAsync	Func<ChangingCollectionEventArgs<TValue>, Task>	Before the collection change; args.ItemsToAdd / args.ItemsToRemove detail the change, args.Cancel = true cancels it.
OnChange	EventCallback<ChangeEventArgs>	After the collection change.
OnReset	EventCallback<ChangeEventArgs>	On group reset.

Related Enumerations

The enumerations used are documented on the base components: CheckBoxKind and CheckBoxTextPosition on LgCheckBox, DisplayOrientation on LgRadioGroup.

Best practices / Accessibility

• Initialize the bound collection with an empty list rather than null.
• For a long list of choices, prefer LgSelect with multiple selection: the searchable dropdown list remains readable.

Complete Reference

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

Related Components

• LgCheckBox — single checkbox.
• LgRadioGroup — single choice via radio buttons.
• LgSelect — selection from a dropdown list.