Application Checkboxes Described with divide Dark

Live Preview
<fieldset>
      <legend class="sr-only">Checkboxes</legend>

      <div class="flow-root">
        <div class="-my-3 flex flex-col items-start divide-y divide-gray-200 dark:divide-gray-700">
          <label for="Option1" class="inline-flex items-start gap-3 py-3">
            <input
              type="checkbox"
              class="my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
              id="Option1"
            />

            <div>
              <span class="font-medium text-gray-700 dark:text-gray-200"> Option 1 </span>

              <p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.
              </p>
            </div>
          </label>

          <label for="Option2" class="inline-flex items-start gap-3 py-3">
            <input
              type="checkbox"
              class="my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
              id="Option2"
            />

            <div>
              <span class="font-medium text-gray-700 dark:text-gray-200"> Option 2 </span>

              <p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.
              </p>
            </div>
          </label>

          <label for="Option3" class="inline-flex items-start gap-3 py-3">
            <input
              type="checkbox"
              class="my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
              id="Option3"
            />

            <div>
              <span class="font-medium text-gray-700 dark:text-gray-200"> Option 3 </span>

              <p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.
              </p>
            </div>
          </label>
        </div>
      </div>
    </fieldset>

Related components

More items from the merged UI library.

View all