Application toolkit - Input

A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.

Basic

Basic input example.

Open this basic input example in new window
Copy basic input code 
<div class="flex flex-col gap-3">
  <input type="text" class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
  <textarea class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" rows="3"></textarea>
</div>
Close basic input code

Placeholder

Basic input example with placeholder.

Open this placeholder input example in new window
Copy placeholder input code 
<div class="flex flex-col gap-3">
  <input type="text" class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="This is placeholder">
  <textarea class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" rows="3" placeholder="This is a textarea placeholder"></textarea>
</div>
Close placeholder input code

Sizes

Inputs stacked small to large sizes.

Open this sizes input example in new window
Copy sizes input code 
<div class="flex flex-col gap-3">
  <input type="text" class="py-2 px-3 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="Small size">
  <input type="text" class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="Default size">
  <input type="text" class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 sm:p-5" placeholder="Large size">
</div>
Close sizes input code

Pilled input

Use the .rounded-full utility class to make inputs circular.

Open this pilled input input example in new window
Copy pilled input input code 
<input type="text" class="py-3 px-5 block w-full border-gray-200 rounded-full text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="Input text">
Close pilled input input code

Readonly

Add the readonly boolean attribute on an input to prevent modification of the input's value.

Open this readonly input example in new window
Copy readonly input code 
<input type="text" class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="Readonly input" readonly>
Close readonly input code

Disabled

Disabled input.

Open this disabled input example in new window
Copy disabled input code 
<div class="flex flex-col gap-3">
  <input type="text" class="opacity-70 pointer-events-none py-3 px-4 block w-full bg-gray-50 border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="Disabled input" disabled>
  <input type="text" class="opacity-70 pointer-events-none py-3 px-4 block w-full bg-gray-50 border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="Disabled readonly input" disabled readonly>
</div>
Close disabled input code

Label

Basic input example with label.

Open this label input example in new window
Copy label input code 
<label for="input-label" class="block text-sm font-medium mb-2 dark:text-white">Email</label>
<input type="email" id="input-label" class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="you@site.com">
Close label input code

Hidden label

<label> elements hidden using the .sr-only class

Open this hidden label input example in new window
Copy hidden label input code 
<label for="input-email-label" class="sr-only">Email</label>
<input type="email" id="input-email-label" class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="you@site.com">
Close hidden label input code

Helper text

Basic input example with helper text.

Open this helper text input example in new window
Copy helper text input code 
<div class="sm:inline-flex sm:items-center space-y-2 sm:space-y-0 sm:space-x-3 w-full">
  <label for="inline-input-label-with-helper-text" class="block text-sm font-medium mb-2 dark:text-white">Email</label>
  <input type="email" id="inline-input-label-with-helper-text" class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="you@site.com" aria-describedby="hs-inline-input-helper-text">
  <p class="text-sm text-gray-500 mt-2" id="hs-inline-input-helper-text">We'll never share your details.</p>
</div>
Close helper text input code

Inline helper text

Basic input example with inline helper text.

Open this inline helper text input example in new window
Copy inline helper text input code 
<div class="sm:inline-flex sm:items-center space-y-2 sm:space-y-0 sm:space-x-3 w-full">
  <label for="inline-input-label-with-helper-text" class="block text-sm font-medium mb-2 dark:text-white">Email</label>
  <input type="email" id="inline-input-label-with-helper-text" class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="you@site.com" aria-describedby="hs-inline-input-helper-text">
  <p class="text-sm text-gray-500 mt-2" id="hs-inline-input-helper-text">We'll never share your details.</p>
</div>
Close inline helper text input code

Corner hint

Basic input example with corner-hint.

Open this corner hint input example in new window
Copy corner hint input code 
<div class="flex justify-between items-center">
  <label for="with-corner-hint" class="block text-sm font-medium mb-2 dark:text-white">Email</label>
  <span class="block text-sm text-gray-500 mb-2">Optional</span>
</div>
<input type="email" id="with-corner-hint" class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="you@site.com">
Close corner hint input code

Validation states

It provides valuable, actionable feedback to your users with HTML5 form validation.

Open this validation states input example in new window
Copy validation states input code 
<div class="flex flex-col gap-4">
  <div>
    <label for="hs-validation-name-error" class="block text-sm font-medium mb-2 dark:text-white">Email</label>
    <div class="relative">
      <input type="text" id="hs-validation-name-error" name="hs-validation-name-error" class="py-3 px-4 block w-full border-hs2-danger rounded-md text-sm focus:border-hs2-danger focus:ring-hs2-danger dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400" required aria-describedby="hs-validation-name-error-helper">
      <div class="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3">
        <svg class="h-5 w-5 text-hs2-danger" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
        </svg>
      </div>
    </div>
    <p class="text-sm text-hs2-danger mt-2" id="hs-validation-name-error-helper">Please enter a valid email address.</p>
  </div>

  <div>
    <label for="hs-validation-name-success" class="block text-sm font-medium mb-2 dark:text-white">Email</label>
    <div class="relative">
      <input type="text" id="hs-validation-name-success" name="hs-validation-name-success" class="py-3 px-4 block w-full border-hs2-success rounded-md text-sm focus:border-hs2-success focus:ring-hs2-success dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400" required aria-describedby="hs-validation-name-success-helper">
      <div class="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3">
        <svg class="h-5 w-5 text-hs2-success" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z" />
        </svg>
      </div>
    </div>
    <p class="text-sm text-hs2-success mt-2" id="hs-validation-name-success-helper">Looks good!</p>
  </div>
</div>
Close validation states input code