Components
A standard file input for uploading files.
By default Preline UI uses Tailwind CSS Forms plugin. Don't forget to install it!
Basic file input example.
<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-lg text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600
file:bg-gray-50 file:border-0
file:bg-gray-100 file:me-4
file:py-3 file:px-4
dark:file:bg-gray-700 dark:file:text-gray-400">
</form>
File inputs stacked small to large sizes.
<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-lg text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600
file:bg-gray-50 file:border-0
file:bg-gray-100 file:me-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-lg text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600
file:bg-gray-50 file:border-0
file:bg-gray-100 file:me-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-lg text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600
file:bg-gray-50 file:border-0
file:bg-gray-100 file:me-4
file:py-3 file:px-4 file:sm:py-5
dark:file:bg-gray-700 dark:file:text-gray-400">
</form>
Button style file input example.
<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:me-4 file:py-2 file:px-4
file:rounded-lg file:border-0
file:text-sm file:font-semibold
file:bg-blue-600 file:text-white
hover:file:bg-blue-700
file:disabled:opacity-50 file:disabled:pointer-events-none
dark:file:bg-blue-500
dark:hover:file:bg-blue-400
">
</label>
</form>