Preview Purchase
License Reminder
One license allows using Metronic for a single deployment and all subsequent usage requires a separate license.
If you plan to use Metronic in a Software as a Service (SaaS) model with paid subscriptions, you'll need an Extended License.
Forms

Tailwind CSS File Input

Tailwind CSS File Input is a custom component that enhances the standard file input element with a more appealing design and improved usability.

Default File Input

A basic example of Tailwind CSS File Input component.
Preview HTML

Multiple

Use multiple attribute to enable multiple file attachments.
Preview HTML

Disabled

Use the disabled state of Tailwind CSS File Input to indicate non-interactivity to users.
Preview HTML

Validation

Utilize Tailwind CSS File Input validation states based on the form validation status to enhance user feedback and overall form usability.
Preview HTML

Sizes

Use the .file-input-sm and .file-input-lg custom classes to adjust the size of Tailwind CSS File Input fields, providing flexibility for different design requirements.
Preview HTML

Source Code

The following source file manages the CSS styles of the Tailwind CSS File Input component. Upon building the assets using Webpack Build Tools, the below file is compiled and added into the dist/assets/css/styles.css bundle, making it available globally across all pages.
File Description
src/core/plugins/components/file-input.js The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS File Input component.
Previous Checkbox Next Image Input