Blazor Switch

    The Ignite UI for Blazor Switch component is a binary choice selection component that behaves similarly to the switch component in iOS.

    Blazor Switch Example

    Usage

    At its core, the IgbSwitch component allows for toggling between on/off states. The default styling is done according to the selection controls specification in the Material Design guidelines.

    Before using the IgbSwitch, you need to register it as follows:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule));

    You will also need to link an additional CSS file to apply the styling to the IgbSwitch component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    <IgbSwitch />

    [!WARNING] The IgbSwitch component doesn't work with the standard <form> element. Use IgbForm instead.

    Examples

    Label

    To provide a meaningful label for the switch, simply place some text between the opening and closing tags:

    <IgbSwitch>Label</IgbSwitch>

    You can specify if the label should be positioned before or after the switch toggle by setting the LabelPosition attribute of the switch. Allowed values are before and after(default):

    <IgbSwitch LabelPosition="@CheckboxBaseLabelPosition.Before">Label</IgbSwitch>

    The switch can also be labelled by elements external to the switch. In this case, the user is given full control to position and style the label in accordance with their needs.

    <span id="switch-label>Label</span>
<IgbSwitch AriaLabelledBy="switch-label" />

    Checked

    You can use the checked attribute to toggle on the switch.

    <IgbSwitch Checked="true" />

    Required

    You can use the required attribute to mark the switch as required.

    <IgbSwitch Required="true" />

    Invalid

    You can use the invalid attribute to mark the switch as invalid.

    <IgbSwitch Invalid="true" />

    Disabled

    You can use the disabled attribute to disable the switch.

    <IgbSwitch Disabled="true" />

    Forms

    You can use the name and value attributes when using the switch with IgbForm.

    <IgbSwitch Name="wifi" Value="enabled" />

    Styling

    The switch component exposes several CSS parts (base, control, thumb, and label) to give you full control over its styling.

    igc-switch::part(control) {
  background: beige;
  border-radius: 0;
}

igc-switch::part(thumb) {
  background: olive;
  border-radius: 2px;
  box-shadow: none;
}

    API References

    Additional Resources