<div class="form-check flex items-center gap-[8px] mb-[10px] last:mb-0">
    <input type="checkbox" class="cursor-pointer" id="defaultCheckbox">
    <label for="defaultCheckbox" class="cursor-pointer">
        Default checkbox
    </label>
</div>
<div class="form-check flex items-center gap-[8px] mb-[10px] last:mb-0">
    <input type="checkbox" checked class="cursor-pointer" id="checkedCheckbox">
    <label for="checkedCheckbox" class="cursor-pointer">
        Checked checkbox
    </label>
</div>

<div class="form-check flex items-center gap-[8px] mb-[10px] last:mb-0">
    <input type="checkbox" id="disabledCheckbox" disabled>
    <label for="disabledCheckbox">
        Disabled checkbox
    </label>
</div>
<div class="form-check flex items-center gap-[8px] mb-[10px] last:mb-0">
    <input type="checkbox" checked id="disabledCheckedCheckbox" disabled>
    <label for="disabledCheckedCheckbox">
        Disabled checked checkbox
    </label>
</div>

<div class="form-radio flex items-center gap-[8px] mb-[10px] last:mb-0">
    <input type="radio" class="cursor-pointer" name="flexRadioDefault" id="flexRadioDefault1">
    <label for="flexRadioDefault1" class="cursor-pointer">
        Default radio
    </label>
</div>
<div class="form-radio flex items-center gap-[8px] mb-[10px] last:mb-0">
    <input type="radio" checked class="cursor-pointer" name="flexRadioDefault" id="flexRadioDefault2">
    <label for="flexRadioDefault2" class="cursor-pointer">
        Default checked radio
    </label>
</div>

<div class="form-radio flex items-center gap-[8px] mb-[10px] last:mb-0">
    <input type="radio" name="disabledFlexRadioDefault" id="disabledFlexRadioDefault1" disabled>
    <label for="disabledFlexRadioDefault1">
        Disabled radio
    </label>
</div>
<div class="form-radio flex items-center gap-[8px] mb-[10px] last:mb-0">
    <input type="radio" checked name="disabledFlexRadioDefault" id="disabledFlexRadioDefault2" disabled>
    <label for="disabledFlexRadioDefault2">
        Disabled checked radio
    </label>
</div>