File Inputs

The File Input component lets the user choose one or more files from their device.

Variations

Button File Input

Rounded:

copydone
copydone
copydone
copydone
copydone
copydone

Rounded Full:

copydone
copydone
copydone
copydone
copydone
copydone

Basic File Input

Base Size:

copydone
The user can select any image files
copydone
The user can select multiple files
copydone
The user can select multiple files
copydone

Large Size:

copydone
The user can select any image files
copydone
The user can select multiple files
copydone
The user can select multiple files
copydone

Outline File Input

Base Size:

copydone
The user can select any image files
copydone
The user can select multiple files
copydone
The user can select multiple files
copydone

Large Size:

copydone
The user can select any image files
copydone
The user can select multiple files
copydone
The user can select multiple files
copydone

Dropzone

copydone
copydone

Usage

The file input provides a button that opens up a file picker dialog that allows the user to choose a file.

Specs

File input fields come in four basic styles (basic, outlined, button and dropzone) and may include the following elements:

  • Icon: A 1.25rem (20px) in width and height icon. Icons can be leading or trailing.
  • Helper text: text font size of 0.75rem (12px) and a line height of 1rem (16px).
  • Accept attribute: The accept specifier is a string that describes a type of file that may be selected by the user in an input element. For instance <accept=".gif,.jpg,.png,.jpeg"> accepts PNG, JPEG or GIF files.

Accessibility notes

File inputs are built with the native <input type="file"> element and no additional accessibility roles are required. For better accessibility when using the element:

  • An id attribute to allow the file <input> to be associated with a <label> element for accessibility purposes.
  • A name attribute to set the name of the associated data point submitted to the server when the form is submitted.

Check out the latest release!