• forms
  • File input

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.

Class Name
Type
Description
form-controlComponentBase class for file input container.
inputComponentBase class for form input.
labelComponentContainer class for helper texts.
label-textComponentBase class for title label text.
label-text-altComponentBase class for helper label text.
file:{tw-utility-class}ModifierAdds tailwind classes to update file input.
input-xsResponsiveInput with Extra small size.
input-smResponsiveInput with Smaller size.
input-lgResponsiveInput with Larger size.

Basic example

Default

Basic file input example.

Label

Basic file input example with label.

Size

File input sizes

The file inputs are stacked in three sizes:extra small input-xs small input-sm, default, and large input-lg.

Types

Default

Default type.

Floating label

Floating label example.

Validation states

Success state

Success state can be show using is-valid class.

Error state

Error state can be show using is-invalid class.

Illustrations

File input with button

The file: prefix in Tailwind allows us to style the ::file-selector-button, and it can be combined with the btn class.

Disabled

Add the disabled boolean attribute on an file input to remove pointer events, and prevent focusing.

Helper text and label

Placement of helper text and label.

Multiple files

Add multiple attribute to select more then 1 file.

Avatar

The following example showcases a file input with an avatar.