Design your space exactly how you want it !
<div class="flex items-center gap-2">
<input id="check-s-1" type="checkbox" checked class="check check-primary-solid">
<label for="check-s-1" class="leading-none font-medium text-gray-500 dark:text-dark-text">Default Check Box</label>
</div>
<div class="flex items-center gap-2">
<input id="check-s-2" type="checkbox" class="check check-secondary-solid">
<label for="check-s-2" class="leading-none font-medium text-gray-500 dark:text-dark-text">Default Check Box</label>
</div>
<div class="flex items-center gap-2">
<input id="check-s-3" type="checkbox" checked class="check check-warning-solid">
<label for="check-s-3" class="leading-none font-medium text-gray-500 dark:text-dark-text">Default Check Box</label>
</div>
<div class="flex items-center gap-2">
<input id="check-s-4" type="checkbox" class="check check-danger-solid">
<label for="check-s-4" class="leading-none font-medium text-gray-500 dark:text-dark-text">Default Check Box</label>
</div>
<div class="flex items-center gap-2">
<input id="check-s-5" type="checkbox" checked class="check check-info-solid">
<label for="check-s-5" class="leading-none font-medium text-gray-500 dark:text-dark-text">Default Check Box</label>
</div>
<div class="flex items-center gap-2">
<input id="check-s-6" type="checkbox" class="check check-success-solid">
<label for="check-s-6" class="leading-none font-medium text-gray-500 dark:text-dark-text">Default Check Box</label>
</div>
<div class="flex items-center gap-2">
<input id="check-s-7" type="checkbox" checked class="check check-success-solid" disabled>
<label for="check-s-7" class="leading-none font-medium text-gray-500 dark:text-dark-text">Default Check Box</label>
</div>
<div class="flex items-center gap-2">
<input id="check-rs-1" type="checkbox" class="check check-primary-solid rounded-full">
<label for="check-rs-1" class="leading-none font-medium text-gray-500 dark:text-dark-text">Rounded Check Box</label>
</div>
<div class="flex items-center gap-2">
<input id="check-rs-2" type="checkbox" checked class="check check-secondary-solid rounded-full">
<label for="check-rs-2" class="leading-none font-medium text-gray-500 dark:text-dark-text">Rounded Check Box</label>
</div>
<div class="flex items-center gap-2">
<input id="check-rs-3" type="checkbox" class="check check-warning-solid rounded-full">
<label for="check-rs-3" class="leading-none font-medium text-gray-500 dark:text-dark-text">Rounded Check Box</label>
</div>
<div class="flex items-center gap-2">
<input id="check-rs-4" type="checkbox" checked class="check check-danger-solid rounded-full">
<label for="check-rs-4" class="leading-none font-medium text-gray-500 dark:text-dark-text">Rounded Check Box</label>
</div>
<div class="flex items-center gap-2">
<input id="check-rs-5" type="checkbox" class="check check-info-solid rounded-full">
<label for="check-rs-5" class="leading-none font-medium text-gray-500 dark:text-dark-text">Rounded Check Box</label>
</div>
<div class="flex items-center gap-2">
<input id="check-rs-6" type="checkbox" checked class="check check-success-solid rounded-full">
<label for="check-rs-6" class="leading-none font-medium text-gray-500 dark:text-dark-text">Rounded Check Box</label>
</div>
<div class="flex items-center gap-2">
<input id="check-o-1" type="checkbox" checked class="check check-primary-outline">
<label for="check-o-1" class="leading-none font-medium text-gray-500 dark:text-dark-text">Outline Check Box</label>
</div>
<div class="flex items-center gap-2">
<input id="check-o-2" type="checkbox" checked class="check check-secondary-outline">
<label for="check-o-2" class="leading-none font-medium text-gray-500 dark:text-dark-text">Outline Check Box</label>
</div>
<div class="flex items-center gap-2">
<input id="check-o-3" type="checkbox" checked class="check check-warning-outline">
<label for="check-o-3" class="leading-none font-medium text-gray-500 dark:text-dark-text">Outline Check Box</label>
</div>
<div class="flex items-center gap-2">
<input id="check-o-4" type="checkbox" checked class="check check-danger-outline">
<label for="check-o-4" class="leading-none font-medium text-gray-500 dark:text-dark-text">Outline Check Box</label>
</div>
<div class="flex items-center gap-2">
<input id="check-o-5" type="checkbox" checked class="check check-info-outline">
<label for="check-o-5" class="leading-none font-medium text-gray-500 dark:text-dark-text">Outline Check Box</label>
</div>
<div class="flex items-center gap-2">
<input disabled id="check-o-6" type="checkbox" class="check check-success-outline">
<label for="check-o-6" class="leading-none font-medium text-gray-500 dark:text-dark-text">Outline Check Box</label>
</div>