Myna UI

Checkboxes

Basic

Last Edited on January 25, 2022

<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->

<div class="inline-flex items-center space-x-1.5">
  <input
    id="basic"
    type="checkbox"
    class="cursor-pointer rounded border-gray-300 text-blue-600 transition focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
  <label for="basic" class="cursor-pointer truncate text-sm text-gray-500">
    Are you ready?
  </label>
</div>

Disabled

Last Edited on January 25, 2022

<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->

<div class="inline-flex items-center space-x-1.5">
  <input
    id="disabled"
    type="checkbox"
    disabled
    class="cursor-pointer rounded border-gray-300 text-blue-600 transition focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
  <label for="disabled" class="cursor-pointer truncate text-sm text-gray-500">
    Are you ready?
  </label>
</div>

Error

Last Edited on January 25, 2022

I don't think you are ready.

<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->

<div class="space-y-1">
  <div class="inline-flex items-center space-x-1.5">
    <input
      id="error"
      type="checkbox"
      checked
      class="cursor-pointer rounded border-gray-300 text-blue-600 transition focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
    <label for="error" class="cursor-pointer truncate text-sm text-gray-500">
      Are you ready?
    </label>
  </div>
  <p class="text-xs text-red-600">I don't think you are ready.</p>
</div>