LgToggle

LgToggle is a toggle switch linked to a boolean value. It displays different text for each state (TextOn / TextOff) and an optional label on the left or right of the button.

<LgToggle Text="#Notifications" @bind-Value="_model.NotificationsEnabled" />

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

Usage

Demonstration

Try this component in the Lagoon showcase.

Simple toggle

Text is the label displayed next to the toggle switch; TextPosition places it on the left (default) or right.

SettingsPage.razor

<LgToggle Text="#Notifications"
          TextPosition="ToggleTextPosition.Right"
          @bind-Value="_model.NotificationsEnabled" />

SettingsPage.razor.cs

public partial class SettingsPage : LgPage
{
    private readonly SettingsVm _model = new();

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

State text

TextOn and TextOff are displayed in the toggle switch according to the state. In read-only mode (ReadOnly), the text of the current state is rendered.

PublicationPage.razor

<LgToggle Text="#Visibility"
          TextOn="#Published"
          TextOff="#DraftState"
          @bind-Value="_model.IsPublished" />

PublicationPage.razor.cs

public partial class PublicationPage : LgPage
{
    private readonly PublicationVm _model = new();

    private sealed class PublicationVm
    {
        public bool IsPublished { get; set; }
    }
}

Cancel or confirm the toggle

OnChangingAsync is invoked before the change and allows canceling it (args.Cancel); args.Item returns the object passed to the Item parameter, useful when the toggle switch is repeated in a list. ConfirmationMessage (inherited) displays a confirmation prompt before the toggle.

UserListPage.razor

@foreach (UserVm user in _users)
{
    <LgToggle Text="@user.Name"
              Item="user"
              ConfirmationMessage="#ConfirmToggleUser"
              OnChangingAsync="OnActiveChangingAsync"
              @bind-Value="user.IsActive" />
}

UserListPage.razor.cs

public partial class UserListPage : LgPage
{
    // Displayed users: each toggle carries its user via Item.
    private readonly List<UserVm> _users = new();

    // Called before toggle: prevents disabling the last administrator.
    private Task OnActiveChangingAsync(ChangingItemEventArgs<bool> args)
    {
        if (args.Item is UserVm user && user.IsLastAdmin && !args.NewValue)
        {
            args.Cancel = true;
            ShowWarning("#CannotDisableLastAdmin");
        }
        return Task.CompletedTask;
    }

    private sealed class UserVm
    {
        public string Name { get; set; }
        public bool IsActive { get; set; }
        public bool IsLastAdmin { get; set; }
    }
}

Properties

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

Name	Type	Default	Declared in	Description
Item	object	null	LgToggle	Data associated with the control, returned in ChangingItemEventArgs.Item.
OnChangingAsync	Func<ChangingItemEventArgs<bool>, Task>	null	LgToggle	Callback invoked before the value changes; the change can be canceled there.
Text	string	null	LgToggle	Label displayed next to the toggle switch.
TextOff	string	null	LgToggle	Text displayed in the toggle switch in the "off" state.
TextOn	string	null	LgToggle	Text displayed in the toggle switch in the "on" state.
TextPosition	ToggleTextPosition	Left	LgToggle	Position of the Text label relative to the toggle switch.
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgInputBase	Additional HTML attributes applied to the rendered element.
AutoFocus	bool	false	LgInputBase	Focuses the control on first render.
ConfirmationMessage	string	null	LgInputBase	Confirmation message displayed before applying the toggle.
Container	IInputContainer<bool>	null	LgInputBase	Internal use: attaches a grid 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 label area content.
OnChange	EventCallback<ChangeEventArgs>	—	LgInputBase	Callback invoked after the value changes.
OnReset	EventCallback<ChangeEventArgs>	—	LgInputBase	Callback invoked when the control is 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 current state text 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's behavior configuration applies.
ResetText	string	null	LgInputBase	Reset button text.
ResetTextAriaLabel	string	null	LgInputBase	Accessible label (aria-label) for the reset button.
Tooltip	string	null	LgInputBase	Tooltip (applied to the Text label).
TooltipIsHtml	bool	false	LgInputBase	Indicates whether the Tooltip content is in HTML format (otherwise plain text).
Value	bool	false	LgInputBase	Bound value (@bind-Value).
ValueChanged	EventCallback<bool>	—	LgInputBase	Callback for updating the bound value.
ValueExpression	Expression<Func<bool>>	—	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

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

Events

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

Associated enumerations

ToggleTextPosition

Position of the Text label relative to the toggle switch.

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

Best practices / accessibility

• Use LgToggle for an action with immediate effect (enable/disable); for a checkbox in a submitted form, prefer LgCheckBox.
• Provide AriaLabel if no Text is supplied, to give an accessible label to the toggle switch.

Complete reference

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

Related components

• LgCheckBox — checkbox.
• LgCheckBoxList — list of checkboxes.