<!-- Checkbox -->
<label class="ms-checkbox">Checkbox
    <input type="checkbox" checked="checked">
    <span class="checkmark"></span>
</label>
<label class="ms-checkbox">Checkbox
    <input type="checkbox">
    <span class="checkmark"></span>
</label>

<!-- Checkbox with Ripple effect -->
<label class="ms-checkbox">Checkbox
    <input type="checkbox" checked="checked">
    <span class="checkmark ripple"></span>
</label>
<label class="ms-checkbox">Checkbox
    <input type="checkbox">
    <span class="checkmark ripple"></span>
</label>

<!-- Checkbox with Accent color -->
<label class="ms-checkbox accent-pink">Checkbox
    <input type="checkbox" checked="checked">
    <span class="checkmark"></span>
</label>
<label class="ms-checkbox accent-pink">Checkbox
    <input type="checkbox">
    <span class="checkmark"></span>
</label>

<!-- Checkbox with Accent color + Ripple effect -->
<label class="ms-checkbox accent-pink">Checkbox
    <input type="checkbox" checked="checked">
    <span class="checkmark ripple"></span>
</label>
<label class="ms-checkbox accent-pink">Checkbox
    <input type="checkbox">
    <span class="checkmark ripple"></span>
</label>

<!-- Disabled Checkbox -->
<label class="ms-checkbox">Checkbox
    <input type="checkbox" checked="checked" disabled>
    <span class="checkmark"></span>
</label>
<label class="ms-checkbox">Checkbox
    <input type="checkbox" disabled>
    <span class="checkmark"></span>
</label>

<!-- Radio -->
<label class="ms-radio">Radio
    <input type="radio" name="radio1" checked="checked">
    <span class="checkmark"></span>
</label>
<label class="ms-radio">Radio
    <input type="radio" name="radio1">
    <span class="checkmark"></span>
</label>

<!-- Radio with Ripple effect -->
<label class="ms-radio">Radio
    <input type="radio" name="radio2" checked="checked">
    <span class="checkmark ripple"></span>
</label>
<label class="ms-radio">Radio
    <input type="radio" name="radio2">
    <span class="checkmark ripple"></span>
</label>

<!-- Radio with Accent color -->
<label class="ms-radio accent-pink">Radio
    <input type="radio" name="radio3" checked="checked">
    <span class="checkmark"></span>
</label>
<label class="ms-radio accent-pink">Radio
    <input type="radio" name="radio3">
    <span class="checkmark"></span>
</label>

<!-- Radio with Accent color + Ripple effect -->
<label class="ms-radio accent-pink">Radio
    <input type="radio" name="radio4" checked="checked">
    <span class="checkmark ripple"></span>
</label>
<label class="ms-radio accent-pink">Radio
    <input type="radio" name="radio4">
    <span class="checkmark ripple"></span>
</label>

<!-- Disabled Radio -->
<label class="ms-radio">Radio
    <input type="radio" name="radio5" checked="checked" disabled>
    <span class="checkmark"></span>
</label>
<label class="ms-radio">Radio
    <input type="radio" name="radio5" disabled>
    <span class="checkmark"></span>
</label>