Skip to main content
USWDS + Tailwind

Help shape v2! Take a short survey to make this tool better for everyone.

File input

File input allows users to attach one or multiple files.

This component requires the following JavaScript plugin:

Example

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
No file selected.
Twig 
<div x-file-input class="relative z-0 max-w-lg group data-[invalid]:border-l-4 data-[invalid]:red-60v data-[invalid]:-ml-5 data-[invalid]:pl-4">
  <label class="block" for="file-input-single">Input accepts a single file</label>
  <span x-file-input:error-message class="hidden text-red-60v py-1 font-bold group-[[data-invalid]]:block"></span>
  <div>
    <div class="sr-only" aria-live="polite">
      No file selected.
    </div>
    <div x-file-input:dropzone class="border border-dashed border-gray-30 hover:border-gray-50 group-[[data-invalid]]:border-2 group-[[data-invalid]]:border-red-60v mt-2 relative w-full">
      <div class="bg-white pointer-events-none absolute inset-0 z-20 group-[[data-dragging]]:bg-blue-10"></div>
      <div class="py-8 px-4 pointer-events-none z-30 relative text-center" aria-hidden="true">
        <span>Drag file here or</span>
        <span class="text-blue-60v underline">choose from folder</span>
      </div>
      <input x-file-input:input id="file-input-single" class="cursor-pointer absolute inset-0 z-10 p-2 focus:outline focus:outline-4 focus:outline-blue-40v" type="file" name="file-input-single" aria-label="Drag file here or choose from folder" accept=".pdf,.txt"/>
    </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.