Movatterモバイル変換

[0]ホーム
URL:

File Input

Tailwind CSS File Input / File Upload

Use responsive file upload input component with helper examples for file upload button, file type, multiple files & more. Free download, open-source license.

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.

                  <div class="mb-3">        <label          for="formFile"          class="mb-2 inline-block text-neutral-500 dark:text-neutral-400"          >Default file input example</label        >        <input          class="relative m-0 block w-full min-w-0 flex-auto cursor-pointer rounded border border-solid border-secondary-500 bg-transparent bg-clip-padding px-3 py-[0.32rem] text-base font-normal text-surface transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:me-3 file:cursor-pointer file:overflow-hidden file:rounded-none file:border-0 file:border-e file:border-solid file:border-inherit file:bg-transparent file:px-3  file:py-[0.32rem] file:text-surface focus:border-primary focus:text-gray-700 focus:shadow-inset focus:outline-none dark:border-white/70 dark:text-white  file:dark:text-white"          type="file"          id="formFile" />      </div>

Hey there 👋 we're excited about TW elements 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 themultiple attribute to the input to add multiple files with one input.

                  <div class="mb-3">        <label          for="formFileMultiple"          class="mb-2 inline-block text-neutral-500 dark:text-neutral-400"          >Multiple files input example</label        >        <input          class="relative m-0 block w-full min-w-0 flex-auto cursor-pointer rounded border border-solid border-secondary-500 bg-transparent bg-clip-padding px-3 py-[0.32rem] text-base font-normal text-surface transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:me-3 file:cursor-pointer file:overflow-hidden file:rounded-none file:border-0 file:border-e file:border-solid file:border-inherit file:bg-transparent file:px-3  file:py-[0.32rem] file:text-surface focus:border-primary focus:text-gray-700 focus:shadow-inset focus:outline-none dark:border-white/70 dark:text-white  file:dark:text-white"          type="file"          id="formFileMultiple"          multiple />      </div>

Disabled file input

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

                  <div class="mb-3">        <label          for="formFileDisabled"          class="mb-2 inline-block text-neutral-500 dark:text-neutral-400"          >Disabled file input example</label        >        <input          class="relative m-0 block w-full min-w-0 flex-auto rounded border border-solid border-secondary-500 bg-neutral-200 bg-clip-padding px-3 py-[0.32rem] text-base font-normal text-surface/50 transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:me-3 file:overflow-hidden file:rounded-none file:border-0 file:border-e file:border-solid file:border-inherit file:bg-transparent file:px-3  file:py-[0.32rem] file:text-surface/50 focus:border-primary focus:text-gray-700 focus:shadow-inset focus:outline-none dark:border-white/70 dark:bg-neutral-600  dark:text-white/50 file:dark:text-white/50"          type="file"          id="formFileDisabled"          disabled />      </div>

Small file input

File input size can be made small.

                  <div class="mb-3">        <label          for="formFileSm"          class="mb-2 inline-block text-neutral-500 dark:text-neutral-400"          >Small file input example</label        >        <input          class="relative m-0 block w-full min-w-0 flex-auto cursor-pointer rounded border border-solid border-secondary-500 bg-transparent bg-clip-padding px-3 py-[0.32rem] text-xs font-normal text-surface transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:me-3 file:cursor-pointer file:overflow-hidden file:rounded-none file:border-0 file:border-e file:border-solid file:border-inherit file:bg-transparent file:px-3  file:py-[0.32rem] file:text-surface focus:border-primary focus:text-gray-700 focus:shadow-inset focus:outline-none dark:border-white/70 dark:text-white  file:dark:text-white"          id="formFileSm"          type="file" />      </div>

Large file input

File input size can be made large.

                  <div class="mb-3">        <label          for="formFileLg"          class="mb-2 inline-block text-neutral-500 dark:text-neutral-400"          >Large file input example</label        >        <input          class="relative m-0 block w-full min-w-0 flex-auto cursor-pointer rounded border border-solid border-secondary-500 bg-transparent bg-clip-padding px-3 py-[0.32rem] text-base font-normal leading-[2.15] text-surface transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:me-3 file:cursor-pointer file:overflow-hidden file:rounded-none file:border-0 file:border-e file:border-solid file:border-inherit file:bg-transparent file:px-3  file:py-[0.32rem] file:text-surface focus:border-primary focus:text-gray-700 focus:shadow-inset focus:outline-none dark:border-white/70 dark:text-white  file:dark:text-white"          id="formFileLg"          type="file" />      </div>

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):

[8]ページ先頭
©2009-2025 Movatter.jp