search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Dark mode
      • Theming
      • Changelog
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Next
    • Content & styles
      • Animations
      • Animations extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Pagination
      • Pills
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Collapse
      • Dropdown
      • Link
      • List group
      • Modal
      • Paragraphs
      • Placeholders
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Timeline
      • Toasts
      • Tooltip
      • Video carousel
    • Forms
      • Checkbox
      • File input
      • Form templates
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
    • Data
      • Charts
      • Tables
    • Methods
      • Ripple
    • ResourcesNew
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New

    File Input

    Tailwind CSS React File Input / File Upload

    Use responsive file upload input component with helper examples for file upload button, file type, multiple files & more.


    Basic example

    File input is a field which user can use to upload one or more files (photos, documents or any other file type) from the local storage.

    Most common use examples of file upload component is CSV upload CRM system, avatar picture upload, simple GIF upload.

    • JSX
            
                
          import React from 'react';
    
          export default function App() {
            return (
                <div className="mb-3 w-96">
                    <label
                      htmlFor="formFile"
                      className="mb-2 inline-block text-neutral-700 dark:text-neutral-200"
                    >
                    Default file input example
                    </label>
                    <input
                      className="relative m-0 block w-full min-w-0 flex-auto rounded border border-solid border-neutral-300 bg-clip-padding px-3 py-[0.32rem] text-base font-normal text-neutral-700 transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:overflow-hidden file:rounded-none file:border-0 file:border-solid file:border-inherit file:bg-neutral-100 file:px-3 file:py-[0.32rem] file:text-neutral-700 file:transition file:duration-150 file:ease-in-out file:[border-inline-end-width:1px] file:[margin-inline-end:0.75rem] hover:file:bg-neutral-200 focus:border-primary focus:text-neutral-700 focus:shadow-te-primary focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:file:bg-neutral-700 dark:file:text-neutral-100 dark:focus:border-primary"
                      type="file"
                     id="formFile"
                    />
                </div>  
            );
          }
          
            
        

    Hey there 👋 we're excited about TW Elements for React and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

    Multiple files input

    Use the multiple attribute to the input to add multiple files with one input.

    • JSX
            
                
          import React from 'react';
    
          export default function App() {
            return (
                <div className="mb-3 w-96">
                    <label
                      htmlFor="formFileMultiple"
                      className="mb-2 inline-block text-neutral-700 dark:text-neutral-200"
                    >
                    Multiple files input example
                    </label>
                    <input
                      className="relative m-0 block w-full min-w-0 flex-auto rounded border border-solid border-neutral-300 bg-clip-padding px-3 py-[0.32rem] text-base font-normal text-neutral-700 transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:overflow-hidden file:rounded-none file:border-0 file:border-solid file:border-inherit file:bg-neutral-100 file:px-3 file:py-[0.32rem] file:text-neutral-700 file:transition file:duration-150 file:ease-in-out file:[border-inline-end-width:1px] file:[margin-inline-end:0.75rem] hover:file:bg-neutral-200 focus:border-primary focus:text-neutral-700 focus:shadow-te-primary focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:file:bg-neutral-700 dark:file:text-neutral-100 dark:focus:border-primary"
                      type="file"
                      id="formFileMultiple"
                      multiple
                    />
                </div> 
            );
          }
          
            
        

    Disabled file input

    Use the disabled attribute to make file input unusable and un-clickable.

    • JSX
            
                
          import React from 'react';
    
          export default function App() {
            return (
                <div className="mb-3 w-96">
                    <label
                      htmlFor="formFileDisabled"
                      className="mb-2 inline-block text-neutral-700 dark:text-neutral-200"
                    >
                    Disabled file input example
                    </label>
                    <input
                      className="relative m-0 block w-full min-w-0 flex-auto rounded border border-solid border-neutral-300 bg-clip-padding px-3 py-[0.32rem] text-base font-normal text-neutral-700 transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:overflow-hidden file:rounded-none file:border-0 file:border-solid file:border-inherit file:bg-neutral-100 file:px-3 file:py-[0.32rem] file:text-neutral-700 file:transition file:duration-150 file:ease-in-out file:[border-inline-end-width:1px] file:[margin-inline-end:0.75rem] hover:file:bg-neutral-200 focus:border-primary focus:text-neutral-700 focus:shadow-te-primary focus:outline-none disabled:opacity-60 dark:border-neutral-600 dark:text-neutral-200 dark:file:bg-neutral-700 dark:file:text-neutral-100 dark:focus:border-primary"
                      type="file"
                      id="formFileDisabled"
                      disabled
                    />
                </div> 
            );
          }
          
            
        

    Small file input

    File input size can be made small.

    • JSX
            
                
          import React from 'react';
    
          export default function App() {
            return (
                <div className="mb-3 w-96">
                    <label
                      htmlFor="formFileSm"
                      className="mb-2 inline-block text-neutral-700 dark:text-neutral-200"
                    >
                    Small file input example
                    </label>
                    <input
                      className="relative m-0 block w-full min-w-0 flex-auto cursor-pointer rounded border border-solid border-neutral-300 bg-clip-padding px-3 py-[0.32rem] text-xs font-normal text-neutral-700 transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:cursor-pointer file:overflow-hidden file:rounded-none file:border-0 file:border-solid file:border-inherit file:bg-neutral-100 file:px-3 file:py-[0.32rem] file:text-neutral-700 file:transition file:duration-150 file:ease-in-out file:[border-inline-end-width:1px] file:[margin-inline-end:0.75rem] hover:file:bg-neutral-200 focus:border-primary focus:text-neutral-700 focus:shadow-te-primary focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:file:bg-neutral-700 dark:file:text-neutral-100 dark:focus:border-primary"
                      id="formFileSm"
                      type="file"
                    />
                </div>  
            );
          }
          
            
        

    Large file input

    File input size can be made large.

    • JSX
            
                
          import React from 'react';
    
          export default function App() {
            return (
                <div className="mb-3 w-96">
                    <label
                      htmlFor="formFileLg"
                      className="mb-2 inline-block text-neutral-700 dark:text-neutral-200"
                    >
                    Large file input example
                    </label>
                    <input
                      className="relative m-0 block w-full min-w-0 flex-auto cursor-pointer rounded border border-solid border-neutral-300 bg-clip-padding px-3 py-[0.32rem] font-normal leading-[2.15] text-neutral-700 transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:cursor-pointer file:overflow-hidden file:rounded-none file:border-0 file:border-solid file:border-inherit file:bg-neutral-100 file:px-3 file:py-[0.32rem] file:text-neutral-700 file:transition file:duration-150 file:ease-in-out file:[border-inline-end-width:1px] file:[margin-inline-end:0.75rem] hover:file:bg-neutral-200 focus:border-primary focus:text-neutral-700 focus:shadow-te-primary focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:file:bg-neutral-700 dark:file:text-neutral-100 dark:focus:border-primary"
                      id="formFileLg"
                      type="file"
                    />
                </div>  
            );
          }
          
            
        

    Related resources

    Survey form Inputs

    If you are looking for more advanced options, try Bootstrap File Input from MDBootstrap.

    • Basic example
    • Multiple files input
    • Disabled file input
    • Small file input
    • Large file input
    • Related resources
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com