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

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule));
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbSwitch>Switch</IgbSwitch>
</div>

@code {
    

}razorCOPY CODE

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssCOPY CODE

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

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" />
razor

<IgbSwitch />
razor

The IgbSwitch component doesn't work with the standard <form> element. Use Form instead.

Examples

Label

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

<IgbSwitch>Label</IgbSwitch>
razor

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="@ToggleLabelPosition.Before">Label</IgbSwitch>
razor

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" />
razor

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule));
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="wrapper" style="display: flex; align-items: center;">
        <span id="switch-label">Label</span>
        <IgbSwitch AriaLabelledby="switch-label" LabelPosition="ToggleLabelPosition.Before" />
    </div>
</div>

@code {
    

}razorCOPY CODE

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssCOPY CODE

Checked

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

<IgbSwitch Checked="true" />
razor

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule));
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbSwitch Checked="true">Label</IgbSwitch>
</div>

@code {
    

}razorCOPY CODE

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssCOPY CODE

Required

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

<IgbSwitch Required="true" />
razor

Invalid

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

<IgbSwitch Invalid="true" />
razor

Disabled

You can use the disabled attribute to disable the switch.

<IgbSwitch Disabled="true" />
razor

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule));
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbSwitch Disabled="true">Label</IgbSwitch>
</div>

@code {
    

}razorCOPY CODE

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssCOPY CODE

Forms

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

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

Styling

The IgbSwitch component exposes several CSS parts to give you full control over its styling:

Name	Description
base	The base wrapper of the switch.
control	The switch input element.
thumb	The position indicator of the switch.
label	The switch label.

igc-switch::part(thumb) {
  background-color: var(--ig-success-500);
  box-shadow: none;
}

igc-switch::part(thumb checked) {
  background-color: var(--ig-gray-50);
}

igc-switch::part(control checked) {
  background-color: var(--ig-success-500);
}
css

EXAMPLE

API References

• LabelPosition
• IgbSwitch
• Styling & Themes

Additional Resources

• Ignite UI for Blazor Forums
• Ignite UI for Blazor GitHub