Components

Form fields

Visible labels, readable hints, and precise errors make forms easier to complete.

Usage & approach

Associate every label with its field. Connect hints and errors through aria-describedby. Use aria-invalid="true" for invalid values and keep validation on the server. Placeholder text supplements a label. These examples demonstrate states rather than an integrated validation system.

Specifications

Control: min-h-11 rounded-md border px-3 py-2
Label: text-sm font-medium
Hint: mt-2 text-xs leading-5
Invalid: aria-invalid="true"; border-red-600; described error

Default, invalid, and disabled

A responsive two-column form with all guidance attached to its input.

<form class="grid gap-6 sm:grid-cols-2" onsubmit="return false">
  <div><label for="full-name" class="text-sm font-medium">Full name</label><input id="full-name" name="full_name" autocomplete="name" aria-describedby="name-hint" placeholder="As shown on your ID" class="ui-form-field mt-2 block min-h-11 w-full rounded-md border border-[#c7d4c9] bg-white px-3 py-2 text-sm text-[#183d2c] placeholder:text-[#808080] focus:border-[#006838] focus:outline-2 focus:outline-[#006838] dark:border-[#565c58] dark:bg-[#1c1e1e] dark:text-[#f4f5f2] dark:placeholder:text-[#b2b7b4] dark:focus:border-[#006838] dark:focus:outline-[#006838]"><p id="name-hint" class="mt-2 text-xs leading-5 text-[#333] dark:text-[#c4c7c5]">Use the name on your identification document.</p></div>
  <div><label for="email" class="text-sm font-medium">Email address</label><input id="email" name="email" type="email" autocomplete="email" value="example" aria-invalid="true" aria-describedby="email-error" class="mt-2 block min-h-11 w-full rounded-md border border-red-600 bg-white px-3 py-2 text-sm text-[#183d2c] focus:outline-2 focus:outline-red-600 dark:bg-[#1c1e1e] dark:text-[#f4f5f2]"><p id="email-error" class="mt-2 text-xs text-red-700 dark:text-red-300">Enter a valid email address.</p></div>
  <div><label for="reference" class="text-sm font-medium">Policy reference</label><input id="reference" disabled value="Assigned after issuance" class="ui-form-field mt-2 block min-h-11 w-full rounded-md border border-[#c7d4c9] bg-white px-3 py-2 text-sm text-[#183d2c] placeholder:text-[#808080] focus:border-[#006838] focus:outline-2 focus:outline-[#006838] dark:border-[#565c58] dark:bg-[#1c1e1e] dark:text-[#f4f5f2] dark:placeholder:text-[#b2b7b4] dark:focus:border-[#006838] dark:focus:outline-[#006838] disabled:cursor-not-allowed disabled:opacity-60"></div>
  <div><label for="notes" class="text-sm font-medium">Additional notes <span class="font-normal">(optional)</span></label><textarea id="notes" name="notes" rows="3" class="ui-form-field mt-2 block min-h-11 w-full rounded-md border border-[#c7d4c9] bg-white px-3 py-2 text-sm text-[#183d2c] placeholder:text-[#808080] focus:border-[#006838] focus:outline-2 focus:outline-[#006838] dark:border-[#565c58] dark:bg-[#1c1e1e] dark:text-[#f4f5f2] dark:placeholder:text-[#b2b7b4] dark:focus:border-[#006838] dark:focus:outline-[#006838]"></textarea></div>
</form>

HTML + Tailwind CSS · fit to panel

Bring this into your project

Copy the HTML from the code panel. Keep complete utility names in files scanned by Tailwind, retain accessible labels and focus styles, and connect actions to your own application. Preview controls belong to this documentation and are not part of the copied example.