A checkbox is a part of form and it is a user interface element allows users to select one or more options from a list of choices.

Using our class ".null-form-checkbox" , you will get a simple and clean design.

- Basic:

<div class="null-margin-bottom-20 null-display-flex null-align-items-center null-gap-10">
     <input class="null-form-checkbox" type="checkbox" id="Google-Chrome" name="Google-Chrome" value="Google Chrome">
     <label class="null-cursor-pointer" for="Google-Chrome"> Google Chrome</label><br>
</div><!--End null-margin-bottom-20-->

<div class="null-margin-bottom-20 null-display-flex null-align-items-center null-gap-10">
     <input class="null-form-checkbox" type="checkbox" id="Mirosoft-Edge" name="Mirosoft-Edge" value="Mirosoft Edge">
     <label class="null-cursor-pointer" for="Mirosoft-Edge"> Mirosoft Edge</label><br>
</div><!--End null-margin-bottom-20-->

Add checked attributes to get the pre-select value: 

<form method="get" action="/">

<div class="null-margin-bottom-20 null-display-flex null-align-items-center null-gap-10">
     <input class="null-form-checkbox" type="checkbox" id="Google-Chrome" name="Google-Chrome" value="Google Chrome">
     <label class="null-cursor-pointer" for="Google-Chrome"> Google Chrome</label><br>
</div><!--End null-margin-bottom-20-->

<div class="null-margin-bottom-20 null-display-flex null-align-items-center null-gap-10">
     <input class="null-form-checkbox" type="checkbox" id="Mirosoft-Edge" name="Mirosoft-Edge" value="Mirosoft Edge" checked>
     <label class="null-cursor-pointer" for="Mirosoft-Edge"> Mirosoft Edge</label><br>
</div><!--End null-margin-bottom-20-->

</form>

Want checkboxes to be next to each other? then wrap them with flex class: 

<form method="get" action="/">

<div class="null-display-flex null-flex-wrap-wrap null-gap-10">

<div class="null-margin-bottom-20 null-display-flex null-align-items-center null-gap-10">
     <input class="null-form-checkbox" type="checkbox" id="Google-Chrome" name="Google-Chrome" value="Google Chrome">
     <label class="null-cursor-pointer" for="Google-Chrome"> Google Chrome</label><br>
</div><!--End null-margin-bottom-20-->

<div class="null-margin-bottom-20 null-display-flex null-align-items-center null-gap-10">
     <input class="null-form-checkbox" type="checkbox" id="Mirosoft-Edge" name="Mirosoft-Edge" value="Mirosoft Edge">
     <label class="null-cursor-pointer" for="Mirosoft-Edge"> Mirosoft Edge</label><br>
</div><!--End null-margin-bottom-20-->

</div><!--End null-display-flex-->

</form>

- Switcher:

Use class ".null-form-checkbox-switcher" , to have switch design:

<form method="get" action="/">

<div class="null-margin-bottom-20 null-display-flex null-align-items-center null-gap-10">
     <input class="null-form-checkbox-swither" type="checkbox" id="Google-Chrome" name="Google-Chrome" value="Google Chrome">
     <label class="null-cursor-pointer" for="Google-Chrome"> Google Chrome</label><br>
</div><!--End null-margin-bottom-20-->

<div class="null-margin-bottom-20 null-display-flex null-align-items-center null-gap-10">
     <input class="null-form-checkbox-swither" type="checkbox" id="Mirosoft-Edge" name="Mirosoft-Edge" value="Mirosoft Edge" >
     <label class="null-cursor-pointer" for="Mirosoft-Edge"> Mirosoft Edge</label><br>
 </div><!--End null-margin-bottom-20-->

</form>

Add checked attributes to get the pre-select value: 

<form method="get" action="/">

<div class="null-margin-bottom-20 null-display-flex null-align-items-center null-gap-10">
     <input class="null-form-checkbox-swither" type="checkbox" id="Google-Chrome" name="Google-Chrome" value="Google Chrome">
     <label class="null-cursor-pointer" for="Google-Chrome"> Google Chrome</label><br>
</div><!--End null-margin-bottom-20-->

<div class="null-margin-bottom-20 null-display-flex null-align-items-center null-gap-10">
     <input class="null-form-checkbox-swither" type="checkbox" id="Mirosoft-Edge" name="Mirosoft-Edge" value="Mirosoft Edge" checked>
     <label class="null-cursor-pointer" for="Mirosoft-Edge"> Mirosoft Edge</label><br>
</div><!--End null-margin-bottom-20-->

</form>

Want checkboxes to be next to each other? then wrap them with flex class: 

<form method="get" action="/">

<div class="null-display-flex null-flex-wrap-wrap null-gap-10">
<div class="null-margin-bottom-20 null-display-flex null-align-items-center null-gap-10">
     <input class="null-form-checkbox-swither" type="checkbox" id="Google-Chrome" name="Google-Chrome" value="Google Chrome">
     <label class="null-cursor-pointer" for="Google-Chrome"> Google Chrome</label><br>
</div><!--End null-margin-bottom-20-->

<div class="null-margin-bottom-20 null-display-flex null-align-items-center null-gap-10">
     <input class="null-form-checkbox-swither" type="checkbox" id="Mirosoft-Edge" name="Mirosoft-Edge" value="Mirosoft Edge">
     <label class="null-cursor-pointer" for="Mirosoft-Edge"> Mirosoft Edge</label><br>
</div><!--End null-margin-bottom-20-->

</div><!--End null-display-flex-->

</form>

Add the below HTML code to have title for checkboxes:

<div class="null-color-main null-font-weight-bold null-margin-bottom-10">Title</div>

<form method="get" action="/">

<div class="null-color-main null-font-weight-bold null-margin-bottom-10">Browser Type:</div>
            
<div class="null-margin-bottom-20 null-display-flex null-align-items-center null-gap-10">
     <input class="null-form-checkbox-swither" type="checkbox" id="Google-Chrome" name="Google-Chrome" value="Google Chrome">
     <label class="null-cursor-pointer" for="Google-Chrome"> Google Chrome</label><br>
</div><!--End null-margin-bottom-20-->

<div class="null-margin-bottom-20 null-display-flex null-align-items-center null-gap-10">
     <input class="null-form-checkbox-swither" type="checkbox" id="Mirosoft-Edge" name="Mirosoft-Edge" value="Mirosoft Edge">
     <label class="null-cursor-pointer" for="Mirosoft-Edge"> Mirosoft Edge</label><br>
</div><!--End null-margin-bottom-20-->

</form>