ASP.NET MVC Custom Checkbox Control

Overview

The ASP.NET MVC Checkbox is a custom checkbox-type HTML5 input control for selecting one or more options from a list of predefined choices. It supports an indeterminate state, different sizes, custom labels and positions, and UI customization.

Tri-state or indeterminate checkbox

The ASP.NET MVC Checkbox control also features a built-in indeterminate state for option selections.

Custom or fancy checkbox

The checkbox UI (frame and icons) can be completely customized.

• Checkbox customization documentation

Forms support

Seamlessly supports HTML forms, and reactive forms.

• Check box in form

Built-in themes

The ASP.NET MVC Checkbox control supports built-in themes such as Bootstrap 5, Tailwind CSS, Fluent, high contrast, and more. Users can customize these built-in themes or create new themes to achieve the desired look and feel either by simply overriding SASS variables or using the Theme Studio application.

• Theme Studio Application

Other supported frameworks

The Checkbox component is also available in Blazor, React, Angular, JavaScript and Vue frameworks. Check out the different Checkbox platforms from the links below,

• Blazor Checkbox

• React Checkbox

• Angular Checkbox

• JavaScript Checkbox

• Vue Checkbox

Web accessibility

• Fully supports WAI-ARIA accessibility standards to work with screen readers and assistive devices.
• Follows WAI-ARIA best practices for implementing keyboard interaction.
• Designs UI element visuals such as foreground color, background color, line spacing, text, and images based on WCAG 2.0 standards.
• Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian.

ASP.NET MVC Checkbox Code Example

Easily get started with the ASP.NET MVC Checkbox using a few simple lines of C# code example as demonstrated below. Also explore our ASP.NET MVC Checkbox Example that shows you how to render and configure a Checkbox in ASP.NET MVC.

@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div class="checkbox-control">
            <div class="row">
                @Html.EJS().CheckBox("checked").Change("onChange")
.Checked(true).Label("CheckBox:true").Render()
            </div>
            <div class="row">
                @Html.EJS().CheckBox("disabled").Checked(true).Label("CheckBox,Disabled").Disabled(true).Render()
            </div>
            <div class="row">
                @Html.EJS().CheckBox("indeterminate").Indeterminate(true).Disabled(true).Label("Intermediate,Disabled").Render()
            </div>
        </div>
    </div>
}

<script>
    function onChange(args) {
        this.label = 'CheckBox: ' + args.checked;
    }
</script>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace EJ2MVCSampleBrowser.Controllers.Button
{
    public partial class ButtonController : Controller
    {
        public ActionResult Checkbox()
        {
            return View();
        }
    }
}