<div class="container my-4">

​

    <p class="font-weight-bold">The checkbox is a component used to allow a user to make multiple choices which is broadly used in forms and surveys.</p>

​

    <p><strong>Detailed documentation and more examples you can find in our <a href="https://mdbootstrap.com/docs/jquery/forms/checkbox/"

          target="_blank">Checkbox Docs</a> </p>

​

    <hr>

​

    <p class="font-weight-bold">Basic examples</p>

    <section class="section-preview">

​

        <!-- Default unchecked -->

        <div class="custom-control custom-checkbox">

          <input type="checkbox" class="custom-control-input" id="defaultUnchecked">

          <label class="custom-control-label" for="defaultUnchecked">Default unchecked</label>

        </div>

​

        <div class="my-2"></div>

​

        <!-- Default checked -->

        <div class="custom-control custom-checkbox">

          <input type="checkbox" class="custom-control-input" id="defaultChecked" checked="">

          <label class="custom-control-label" for="defaultChecked">Default checked</label>

        </div>

​

        <div class="my-2"></div>

​

        <!-- Default indeterminate -->

        <div class="custom-control custom-checkbox">

          <input type="checkbox" class="custom-control-input" id="defaultIndeterminate" checked="">

          <label class="custom-control-label" for="defaultIndeterminate">Default indeterminate</label>

        </div>

​

        <div class="my-2"></div>

​

        <!-- Default unchecked disabled -->

        <div class="custom-control custom-checkbox">

          <input type="checkbox" class="custom-control-input" id="defaultUncheckedDisabled" disabled="">

          <label class="custom-control-label" for="defaultUncheckedDisabled">Default unchecked disabled</label>

        </div>

​

        <div class="my-2"></div>

​

        <!-- Default checked disabled -->

        <div class="custom-control custom-checkbox">

          <input type="checkbox" class="custom-control-input" id="defaultCheckedDisabled" checked="" disabled="">

          <label class="custom-control-label" for="defaultCheckedDisabled">Default checked disabled</label>

        </div>

​

      </section>

​

  </div>