How to change size in ASP.NET MVC Toggle Switch Button

21 Aug 20261 minute to read

The different Switch sizes available are default and small. To reduce the size of default Switch to small, set the cssClass property to e-small.

CSHTML

<div id='container'>
    <table class='size'>
        <tr>
            <td class='lSize'>Small</td>
            <td>
                @Html.EJS().Switch("switch1").cssClass("e-small").Render()
            </td>
        </tr>
        <tr>
            <td class='lSize'>Default</td>
            <td>
                @Html.EJS().Switch("switch2").Render()
            </td>
        </tr>
    </table>
</div>


<style>

.size tr td {
  padding: 10px;
}

.size .lSize {
  font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
</style>

Default.cs

public ActionResult Default()
    {
            return View();
    }