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.
Basic file input example with label.
The file inputs are stacked in three sizes:extra small input-xs
small input-sm
, default, and large input-lg
.
Default type.
Floating label example.
Success state can be show using is-valid
class.
Error state can be show using is-invalid
class.
The file:
prefix in Tailwind allows us to style the ::file-selector-button
, and it can be combined with the btn
class.
Add the disabled
boolean attribute on an file input to remove pointer events, and prevent focusing.
Placement of helper text and label.
Add multiple
attribute to select more then 1 file.
The following example showcases a file input with an avatar.