File input

File input allows users to attach one or multiple files.

This component requires the following JavaScript plugin:

File Input

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Input accepts a single file

Drag file here or choose from folder

HTML

<div
  data-part="file-input-root"
  class="relative z-0 max-w-lg"
>
  <label
    data-part="file-input-label"
    class="block"
  >Input accepts a single file</label>
  <div>
    <div data-part="file-input-sr-status"></div>
      <div
        data-part="file-input-dropzone"
        class="border border-dashed border-gray-30 hover:border-gray-50 group data-[invalid]:border-orange-30v mt-2 relative w-full bg-white data-[dragging]:bg-blue-10"
      >
        <div
          data-part="file-input-preview-list"
          class="relative z-30 pointer-events-none hidden data-[valid]:block data-[valid]:bg-blue-10 group"
        >
          <div class="flex justify-between items-center p-2">
            <div
              data-part="file-input-preview-header"
              class="font-bold"
            ></div>
            <span class="text-blue-60v underline">Change File</span>
          </div>
          <div
            data-part="file-input-preview-item"
            class="flex gap-2 p-2 border-t border-t-white group-data-[dragging]:opacity-10"
          >
            <div
              data-part="file-input-preview-item-icon"
              class="size-8! text-blue-60v data-[type=pdf]:icon-[fa-solid--file-pdf] data-[type=doc]:icon-[fa-solid--file-word] data-[type=sheet]:icon-[fa-solid--file-excel] data-[type=vid]:icon-[fa-solid--file-video] data-[type=generic]:icon-[fa-solid--file]"
            ></div>
            <div data-part="file-input-preview-item-content" class="flex items-center"></div>
          </div>
        </div>
        <div
          data-part="file-input-instructions"
          class="py-8 px-4 pointer-events-none z-30 relative text-center data-[valid]:hidden"
        >
          <span>Drag file here or</span>
          <span class="text-blue-60v underline">choose from folder</span>
        </div>
        <div
          data-part="file-input-error-message"
          class="hidden text-red-60v font-bold data-[invalid]:block -mt-6 mb-6 text-center"
        ></div>
      <input
        data-part="file-input-input"
        id="file-input-single"
        class="cursor-pointer absolute inset-0 z-10 p-2 focus:outline-4 focus:outline-blue-40v [&::-webkit-file-upload-button]:hidden data-[dragging]:bg-blue-10 text-transparent"
        type="file"
        aria-label="Drag file here or choose from folder"
      />
    </div>
  </div>
</div>

Specific File Types

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Input accepts only specific file types Select PDF or TXT files

Drag file here or choose from folder

HTML

<div
  data-part="file-input-root"
  class="relative z-0 max-w-lg"
>
  <label
    data-part="file-input-label"
    class="block"
  >Input accepts only specific file types</label>
  <span class="text-gray-50" id="file-input-specific-hint">Select PDF or TXT files</span>
  <div>
    <div data-part="file-input-sr-status"></div>
    <div
      data-part="file-input-dropzone"
      class="border border-dashed border-gray-30 hover:border-gray-50 group data-[invalid]:border-orange-30v mt-2 relative w-full bg-white data-[dragging]:bg-blue-10"
    >
      <div
        data-part="file-input-preview-list"
        class="relative z-30 pointer-events-none hidden data-[valid]:block data-[valid]:bg-blue-10 group"
      >
        <div class="flex justify-between items-center p-2">
          <div
            data-part="file-input-preview-header"
            class="font-bold"
          ></div>
          <span class="text-blue-60v underline">Change File</span>
        </div>
        <div
          data-part="file-input-preview-item"
          class="flex gap-2 p-2 border-t border-t-white group-data-[dragging]:opacity-10"
        >
          <div
            data-part="file-input-preview-item-icon"
            class="size-8! text-blue-60v data-[type=pdf]:icon-[fa-solid--file-pdf] data-[type=doc]:icon-[fa-solid--file-word] data-[type=sheet]:icon-[fa-solid--file-excel] data-[type=vid]:icon-[fa-solid--file-video] data-[type=generic]:icon-[fa-solid--file]"
          ></div>
          <div data-part="file-input-preview-item-content" class="flex items-center"></div>
        </div>
      </div>
      <div
        data-part="file-input-instructions"
        class="py-8 px-4 pointer-events-none z-30 relative text-center data-[valid]:hidden"
      >
        <span>Drag file here or</span>
        <span class="text-blue-60v underline">choose from folder</span>
      </div>
      <div
        data-part="file-input-error-message"
        class="hidden text-red-60v font-bold data-[invalid]:block -mt-6 mb-6 text-center"
      ></div>
      <input
        data-part="file-input-input"
        id="file-input-single"
        class="cursor-pointer absolute inset-0 z-10 p-2 focus:outline-4 focus:outline-blue-40v [&::-webkit-file-upload-button]:hidden data-[dragging]:bg-blue-10 text-transparent"
        type="file"
        aria-label="Drag file here or choose from folder"
        aria-describedby="file-input-specific-hint"
        accept=".pdf,.txt"
        multiple
      />
    </div>
  </div>
</div>

Accept Multiple Files

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Input accepts multiple files Select one or more files

Drag file here or choose from folder

HTML

<div
  data-part="file-input-root"
  class="relative z-0 max-w-lg"
>
  <label
    data-part="file-input-label"
    class="block"
  >Input accepts multiple files</label>
  <span class="text-gray-50" id="file-input-many-hint">Select one or more files</span>
  <div>
    <div data-part="file-input-sr-status"></div>
    <div
      data-part="file-input-dropzone"
      class="border border-dashed border-gray-30 hover:border-gray-50 group data-[invalid]:border-orange-30v mt-2 relative w-full bg-white data-[dragging]:bg-blue-10"
    >
      <div
        data-part="file-input-preview-list"
        class="relative z-30 pointer-events-none hidden data-[valid]:block data-[valid]:bg-blue-10 group"
      >
        <div class="flex justify-between items-center p-2">
          <div
            data-part="file-input-preview-header"
            class="font-bold"
          ></div>
          <span class="text-blue-60v underline">Change File</span>
        </div>
        <div
          data-part="file-input-preview-item"
          class="flex gap-2 p-2 border-t border-t-white group-data-[dragging]:opacity-10"
        >
          <div
            data-part="file-input-preview-item-icon"
            class="size-8! text-blue-60v data-[type=pdf]:icon-[fa-solid--file-pdf] data-[type=doc]:icon-[fa-solid--file-word] data-[type=sheet]:icon-[fa-solid--file-excel] data-[type=vid]:icon-[fa-solid--file-video] data-[type=generic]:icon-[fa-solid--file]"
          ></div>
          <div data-part="file-input-preview-item-content" class="flex items-center"></div>
        </div>
      </div>
      <div
        data-part="file-input-instructions"
        class="py-8 px-4 pointer-events-none z-30 relative text-center data-[valid]:hidden"
      >
        <span>Drag file here or</span>
        <span class="text-blue-60v underline">choose from folder</span>
      </div>
      <div
        data-part="file-input-error-message"
        class="hidden text-red-60v font-bold data-[invalid]:block -mt-6 mb-6 text-center"
      ></div>
      <input
        data-part="file-input-input"
        id="file-input-single"
        class="cursor-pointer absolute inset-0 z-10 p-2 focus:outline-4 focus:outline-blue-40v [&::-webkit-file-upload-button]:hidden data-[dragging]:bg-blue-10 text-transparent"
        type="file"
        aria-label="Drag file here or choose from folder"
        aria-describedby="file-input-many-hint"
        multiple
      />
    </div>
  </div>
</div>

Component API

Root

x-file-input

Custom Alpine directive that marks the File Input Root.
data-dragging

Type: boolean
Default: false

Attribute used to style File Input Root when a file is dragged over the File Input Dropzone.
data-invalid

Type: boolean
Default: false

Attribute used to style File Input Root when an invalid file is provided.

Dropzone

x-file-input:dropzone

Custom Alpine directive that marks the File Input Dropzone.
data-dragging

Type: boolean
Default: false

Attribute used to style File Input Root when a file is dragged over the File Input Dropzone.
data-invalid

Type: boolean
Default: false

Attribute used to style File Input Root when an invalid file is provided.

Input

x-file-input:input

Custom Alpine directive that marks the File Input Input.
aria-label

Default: 'Drag file here or choose from folder'

Accessibility attribute describing the file input to assistive technology.
accept

Type: string | undefined
Default: undefined

Native attribute used to describe the file types accepted by this input.
data-minsize

Type: number | undefined
Default: undefined

Custom attribute use to provide the minimum acceptable file size, in bytes.
data-maxsize

Type: number | undefined
Default: undefined

Custom attribute use to provide the maximum acceptable file size, in bytes.
data-invalid

Type: boolean
Default: false

Attribute used to style File Input Root when an invalid file is provided.
aria-invalid

Type: boolean
Default: false

Accessibility attribute that communicates when a provided file was invalid.

Error Message

x-file-input:error-message

Custom Alpine directive that marks the File Input Error Message.

File input

Examples

Default

Specific File Types

Accept Multiple Files

Component API

Root

`x-file-input`

`data-dragging`

`data-invalid`

Dropzone

`x-file-input:dropzone`

`data-dragging`

`data-invalid`

Input

`x-file-input:input`

`aria-label`

`accept`

`data-minsize`

`data-maxsize`

`data-invalid`

`aria-invalid`

Error Message

`x-file-input:error-message`