Application toolkit - File input

A standard file input for uploading files.

Basic

Basic file input example.

Open this basic file input example in new window
Copy basic file input code 
<form>
  <label for="file-input" class="sr-only">Choose file</label>
  <input type="file" name="file-input" id="file-input" class="block w-full border border-gray-200 shadow-sm rounded-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400
    file:bg-transparent file:border-0
    file:bg-gray-100 file:mr-4
    file:py-3 file:px-4
    dark:file:bg-gray-700 dark:file:text-gray-400">
</form>
Close basic file input code

Sizes

Open this sizes file input example in new window
Copy sizes file input code 
<div class="flex flex-col gap-3">
  <form>
    <label for="small-file-input" class="sr-only">Choose file</label>
    <input type="file" name="small-file-input" id="small-file-input" class="block w-full border border-gray-200 shadow-sm rounded-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400
      file:bg-transparent file:border-0
      file:bg-gray-100 file:mr-4
      file:py-2 file:px-4
      dark:file:bg-gray-700 dark:file:text-gray-400">
  </form>

  <form>
    <label for="file-input-medium" class="sr-only">Choose file</label>
    <input type="file" name="file-input-medium" id="file-input-medium" class="block w-full border border-gray-200 shadow-sm rounded-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400
      file:bg-transparent file:border-0
      file:bg-gray-100 file:mr-4
      file:py-3 file:px-4
      dark:file:bg-gray-700 dark:file:text-gray-400">
  </form>

  <form>
    <label for="large-file-input" class="sr-only">Choose file</label>
    <input type="file" name="large-file-input" id="large-file-input" class="block w-full border border-gray-200 shadow-sm rounded-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400
      file:bg-transparent file:border-0
      file:bg-gray-100 file:mr-4
      file:py-3 file:px-4 file:sm:py-5
      dark:file:bg-gray-700 dark:file:text-gray-400">
  </form>
</div>
Close sizes file input code

File input buttons

Open this input buttons file input example in new window
Copy input buttons file input code 
<form>
  <label class="block">
    <span class="sr-only">Choose profile photo</span>
    <input type="file" class="block w-full text-sm text-gray-500
      file:mr-4 file:py-2 file:px-4
      file:rounded-md file:border-0
      file:text-sm file:font-semibold
      file:bg-hs2-primary file:text-white
      hover:file:bg-hs2-primary-600
    " />
  </label>
</form>
Close input buttons file input code