Components
Checkbox
<div class="space-y-3">
<div class="flex items-center space-x-2">
<input
type="checkbox"
id="example1"
class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
<label for="example1" class="text-sm font-medium text-gray-700">Default</label>
</div>
<div class="flex items-center space-x-2">
<input
type="checkbox"
id="example2"
checked
class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
<label for="example2" class="text-sm font-medium text-gray-700">Checked</label>
</div>
<div class="flex items-center space-x-2">
<input
type="checkbox"
id="example3"
indeterminate
class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
<label for="example3" class="text-sm font-medium text-gray-700">Indeterminate</label>
</div>
<script>
document.getElementById("example3").indeterminate = true;
</script>
</div>
<div class="space-y-3">
<div class="flex items-center space-x-2">
<input
type="checkbox"
id="example4"
disabled
class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
<label for="example4" class="text-sm font-medium text-gray-700">Default</label>
</div>
<div class="flex items-center space-x-2">
<input
type="checkbox"
id="example5"
checked
disabled
class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
<label for="example5" class="text-sm font-medium text-gray-700">Checked</label>
</div>
<div class="flex items-center space-x-2">
<input
type="checkbox"
id="example6"
disabled
class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
<label for="example6" class="text-sm font-medium text-gray-700">Indeterminate</label>
</div>
<script>
document.getElementById("example6").indeterminate = true;
</script>
</div>
<div class="space-y-3">
<div class="flex space-x-2">
<div class="flex h-5 items-center">
<input
type="checkbox"
id="example7"
name="checkGroup1"
class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
</div>
<label for="example7" class="text-sm">
<div class="font-medium text-gray-700">Remember me</div>
<p class="text-gray-500">Save my login details for next time.</p>
</label>
</div>
</div>
<div class="space-y-3">
<div class="flex space-x-2">
<div class="flex h-5 items-center">
<input
type="checkbox"
id="example8"
name="checkGroup1"
class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
</div>
<label for="example8" class="flex space-x-2 text-sm">
<div class="font-medium text-gray-700">
I agree with the
<a href="" class="text-primary-600 hover:text-primary-400">terms and conditions</a>.
</div>
</label>
</div>
</div>
<div class="w-80">
<div class="flex items-center space-x-2 rounded p-2 hover:bg-gray-100">
<input
type="checkbox"
id="example9"
name="checkGroup1"
class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
<label for="example9" class="flex w-full space-x-2 text-sm"> HTML </label>
</div>
<div class="flex items-center space-x-2 rounded p-2 hover:bg-gray-100">
<input
type="checkbox"
id="example10"
name="checkGroup1"
class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
<label for="example10" class="flex w-full space-x-2 text-sm"> CSS </label>
</div>
<div class="flex items-center space-x-2 rounded p-2 hover:bg-gray-100">
<input
type="checkbox"
id="example11"
name="checkGroup1"
class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
<label for="example11" class="flex w-full space-x-2 text-sm"> Javascript </label>
</div>
</div>
<div class="w-80">
<div class="divide-y divide-gray-200 border-y border-gray-200">
<div class="flex justify-between space-x-2 py-3">
<label for="example12" class="text-sm">
<div class="font-medium text-gray-700">Checkbox01</div>
<p class="text-gray-500">This is a help message.</p>
</label>
<div class="flex h-5 items-center">
<input
type="checkbox"
id="example12"
name="checkGroup1"
class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
</div>
</div>
<div class="flex justify-between space-x-2 py-3">
<label for="example13" class="text-sm">
<div class="font-medium text-gray-700">Checkbox02</div>
<p class="text-gray-500">This is a help message.</p>
</label>
<div class="flex h-5 items-center">
<input
type="checkbox"
id="example13"
name="checkGroup1"
class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
</div>
</div>
<div class="flex justify-between space-x-2 py-3">
<label for="example14" class="text-sm">
<div class="font-medium text-gray-700">Checkbox03</div>
<p class="text-gray-500">This is a help message.</p>
</label>
<div class="flex h-5 items-center">
<input
type="checkbox"
id="example14"
name="checkGroup1"
class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
</div>
</div>
</div>
</div>