Forms
File input
File inputs enable users to choose files from their device, allowing them to upload documents, images, or other types of files.
Basic example
Default
Basic file input example.
Label
Basic file input example with label.
Size
File input sizes
Add responsive class `input-{size}` where `{size} = xs|sm|md|lg|xl` for file input of different sizes.
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.
Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
input | component | Base class for form input. |
input-floating | component | Base class for floating form input. |
label-text | part | Base class for title label text. |
input-floating-label | part | Floats the label to the top. |
helper-text | part | Base class for helper label text. |
is-valid | state | Adds success style to the input. |
is-invalid | state | Adds error style to the input. |
file:{tw-utility-class} | modifier | Adds tailwind classes to update file input. |
input-xs | size | Input with Extra small size. |
input-sm | size | Input with Smaller size. |
input-md | size | Input with medium(default) size. |
input-lg | size | Input with Larger size. |
input-xl | size | Input with Extra large size. |