Blazor Checkbox Overview

The Blazor Checkbox is a component that lets you add checkboxes to your Blazor apps. It behaves as a standard HTML checkbox, enabling users to select basic checked and unchecked states or an additional indeterminate state. You also get full control over the styling of the Blazor checkbox component and ability to use it with forms.

Checkbox 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(IgbCheckboxModule));
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbCheckbox>Checkbox</IgbCheckbox>
</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 IgbCheckbox allows for a choice between selected/unselected state. The default styling is done according to the selection controls specification in the Material Design guidelines.

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

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbCheckboxModule));
razor

You will also need to link an additional CSS file to apply the styling to the IgbCheckbox 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

The simplest way to start using the IgbCheckbox is as follows:

<IgbCheckbox />
razor

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

Examples

Label

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

<IgbCheckbox>Label</IgbCheckbox>
razor

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

<IgbCheckbox LabelPosition="@ToggleLabelPosition.Before">Label</IgbCheckbox>
razor

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

<span id="checkbox-label">Label</span>
<IgbCheckbox AriaLabelledby="checkbox-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(IgbCheckboxModule));
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <style>
        .wrapper {
            display: flex;
            align-items: center;
        }
    </style>

    <div class="wrapper">
        <span id="checkbox-label">Label</span>
        <IgbCheckbox AriaLabelledby="checkbox-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 of the component to determine whether the checkbox should be toggled on or off by default.

<IgbCheckbox 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(IgbCheckboxModule));
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

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

@code {
    

}razorCOPY CODE

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

Indeterminate

You can use the Indeterminate property of the component to set the checkbox's value to neither true nor false.

<IgbCheckbox Indeterminate="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(IgbCheckboxModule));
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbCheckbox Indeterminate=true>Label</IgbCheckbox>
</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 property to mark the checkbox as required.

<IgbCheckbox Required="true" />
razor

Invalid

You can use the Invalid attribute to mark the checkbox as invalid.

<IgbCheckbox Invalid="true" />
razor

Disabled

You can use the Disabled attribute to disable the checkbox.

<IgbCheckbox 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(IgbCheckboxModule));
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbCheckbox Disabled=true>Label</IgbCheckbox>
</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 checkbox with Form.

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

Styling

The IgbCheckbox component exposes four CSS parts which we can use for styling:

Name	Description
base	The base wrapper of the checkbox.
control	The checkbox input element.
indicator	The checkbox indicator icon.
label	The checkbox label.

With this four CSS parts we have full control over the Checkbox styling.

igc-checkbox::part(indicator) {
  stroke: var(--ig-secondary-500-contrast);
}

igc-checkbox::part(control checked)::after {
  border-radius: 4px;
  background: var(--ig-secondary-500);
}
css

EXAMPLE

API References

• IgbCheckbox
• Checked
• Disabled
• Styling & Themes

Additional Resources

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