Checkbox with better UI.
<label class="zust-checkbox">
<input type="checkbox">
<span></span>
<span>Buy Oranges</span>
</label>
<br>
<label class="zust-checkbox">
<input type="checkbox">
<span></span>
<span>Call Dad</span>
</label>
The minimum code required to make a checkbox is
<label class="zust-checkbox">
<input type="checkbox">
<span></span>
</label>
You may have noticed, adding label is kinda easy.
<label class="zust-checkbox">
<input type="checkbox">
<span></span>
<span>Label After</span>
</label>
<br>
<br>
<label class="zust-checkbox">
<span>Label Before</span>
<input type="checkbox">
<span></span>
</label>
It includes all theme colors.
<label class="zust-checkbox">
<input type="checkbox">
<span></span>
<span>Default</span>
</label>
<br>
<label class="zust-checkbox zust-success">
<input type="checkbox">
<span></span>
<span>Success</span>
</label>
<br>
<label class="zust-checkbox zust-warning">
<input type="checkbox">
<span></span>
<span>Warning</span>
</label>
<br>
<label class="zust-checkbox zust-error">
<input type="checkbox">
<span></span>
<span>Error</span>
</label>
<br>
<label class="zust-checkbox zust-link">
<input type="checkbox">
<span></span>
<span>Link</span>
</label>
<br>
You can make a checkbox disabled by adding attribute disabled to label and input.
<label class="zust-checkbox" disabled>
<input type="checkbox" disabled>
<span></span>
<span>Disabled</span>
</label>
A checkbox can be checked by default. Add attribute checked to the input to achieve that.
<label class="zust-checkbox">
<input type="checkbox" checked>
<span></span>
<span>Checked by Default</span>
</label>
There is also outlined checkboxes. You may need them, just add class zust-outlined.
<label class="zust-checkbox zust-outlined">
<input type="checkbox" checked>
<span></span>
<span>Outlined</span>
</label>
There is another style, circular style. To get this style add class zust-circle. You can even use it with outlined.
<label class="zust-checkbox zust-circle">
<input type="checkbox" checked>
<span></span>
<span>Circular</span>
</label>