forms
Tailwind CSS
File input
File inputs enable users to choose files from their device, allowing them to upload documents, images, or other types of files.
Basic file input example.
<input type="file" class="input max-w-sm" aria-label="file-input" />
Basic file input example with label.
<div class="max-w-sm">
<label class="label-text" for="fileInputLabel"> Pick a file </label>
<input type="file" class="input" id="fileInputLabel" />
</div>
Add responsive class input-{size} where {size} = xs|sm|md|lg|xl for file input of different sizes.
<input type="file" class="input max-w-sm input-xs" aria-label="file-input" />
<input type="file" class="input max-w-sm input-sm" aria-label="file-input" />
<input type="file" class="input max-w-sm" aria-label="file-input" />
<input type="file" class="input max-w-sm input-lg" aria-label="file-input" />
<input type="file" class="input max-w-sm input-xl" aria-label="file-input" />
Default type.
<div class="max-w-sm">
<label class="label-text" for="inpuFileTypeDefault"> Pick a file </label>
<input type="file" class="input" id="inpuFileTypeDefault" />
</div>
Floating label example.
<div class="max-w-sm input-floating">
<input type="file" placeholder="John Doe" class="input" id="inpuFileTypeFloating" />
<label class="input-floating-label" for="inpuFileTypeFloating">Upload</label>
</div>
Success state can be show using is-valid class.
<div class="max-w-sm">
<label class="label-text" for="fileInputStateSuccess"> Pick a file </label>
<input type="file" class="input is-valid" id="fileInputStateSuccess" />
<span class="helper-text">Helper text</span>
</div>
<div class="input-floating max-w-sm">
<input type="file" placeholder="John Doe" class="input is-valid" id="fileInputStateSuccessFloating" />
<label class="input-floating-label" for="fileInputStateSuccessFloating">Upload</label>
<span class="helper-text">Helper text</span>
</div>
Error state can be show using is-invalid class.
<div class="max-w-sm">
<label class="label-text" for="fileInputStateError"> Pick a file </label>
<input type="file" class="input is-invalid" id="fileInputStateError" />
<span class="helper-text">Helper text</span>
</div>
<div class="input-floating max-w-sm">
<input type="file" placeholder="John Doe" class="input is-invalid" id="fileInputStateErrorFloating" />
<label class="input-floating-label" for="fileInputStateErrorFloating">Upload</label>
<span class="helper-text">Helper text</span>
</div>
The file: prefix in Tailwind allows us to style the ::file-selector-button, and it can be combined with the btn class.
<input type="file" class="block text-sm file:uppercase file:btn file:btn-primary file:me-3" aria-label="file-input" />
Add the disabled boolean attribute on an file input to remove pointer events, and prevent focusing.
<input type="file" class="input max-w-sm" aria-label="file-input" disabled />
Placement of helper text and label.
<div class="max-w-sm">
<label class="label-text" for="fileInputHelperText"> Pick a file </label>
<input type="file" class="input" id="fileInputHelperText" />
<span class="helper-text">Helper text</span>
</div>
Add multiple attribute to select more then 1 file.
<input type="file" class="input max-w-sm" aria-label="file-input" multiple />
The following example showcases a file input with an avatar.
<div class="flex items-center gap-2 max-sm:flex-wrap">
<div class="avatar">
<div class="size-14 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="Avatar" />
</div>
</div>
<input type="file" class="file:btn file:btn-primary block text-sm file:me-3 file:rounded-full file:uppercase" aria-label="file-input" />
</div>
