Text Field – Design Portal

Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.

Demo

Your Name:

<div class="flex-1 mb-4">
  <label for="email-name" class="inline-block mb-2">Your Name:</label>
  <input id="email-name" class="w-full border border-gray rounded-md focus:ring-royal-blue px-4 py-3 placeholder-gray-dark text-gray-darkest transition duration-150 ease-in-out sm:leading-5 required" type="text" maxlength="50" name="name" value="" placeholder="Name" required="">
  <div class="color-red-error mt-1 text-sm hidden">You must provide your name.</div>
</div>

/* HSW components use Tailwind! 
Individual utility classes are added to the HTML. */

No JS! 😀

Anatomy

Text Box / Input
Label
Placeholder