Myna UI

Inputs

Basic

Last Edited on January 25, 2022

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

<div class="w-full space-y-0.5">
  <label for="basic" class="text-sm text-gray-500">Your Name</label>
  <input
    id="basic"
    type="text"
    placeholder="Enter your name"
    class="block w-full rounded-md border-gray-200 text-sm transition focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
</div>

Disabled

Last Edited on January 25, 2022

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

<div class="w-full space-y-0.5">
  <label for="disabled" class="text-sm text-gray-500">Your Name</label>
  <input
    disabled
    id="disabled"
    type="text"
    placeholder="Enter your name"
    class="block w-full rounded-md border-gray-200 text-sm transition focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
</div>

Error

Last Edited on January 25, 2022

Your email doesn't match our records.

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

<div class="w-full space-y-0.5">
  <label for="error" class="text-sm text-gray-500">Email Address</label>
  <input
    id="error"
    type="email"
    placeholder="Enter your email"
    value="mail@hey.com"
    class="block w-full rounded-md border-red-600 text-sm ring-1 ring-red-600 transition focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
  <p class="pt-1 text-xs text-red-600">Your email doesn't match our records.</p>
</div>