CheckBox.razor

@page "/Buttons/CheckBox"

@using Syncfusion.EJ2.Blazor.Buttons

@inherits SampleBaseComponent;

<div class="control-section">
    <div class="checkbox-control">
        <div class="row">
            <EjsCheckBox Checked="true" Label="CheckBox"></EjsCheckBox>
        </div>
        <div class="row">
            <EjsCheckBox Disabled="true" Checked="true" Label="Checked, Disabled"></EjsCheckBox>
        </div>
        <div class="row">
            <EjsCheckBox Indeterminate="true" Disabled="true" Label="Indeterminate, Disabled"></EjsCheckBox>
        </div>
    </div>
</div>

<style>
    .checkbox-control {
        margin: 12% 0 12% 40%;
    }

    @@media only screen and (max-width: 700px) {
        .checkbox-control {
            margin: 20% 0 0 32%;
        }

        .control-section {
            min-height: 200px;
        }
    }

    @@media only screen and (max-width: 500px) {
        .control-section {
            min-height: 200px;
        }

        .checkbox-control {
            margin-top: 27%;
            margin-left: 20%;
            margin-bottom: 27%;
        }
    }

    .control-section .row {
        margin: 20px 0;
    }
</style>