File input

Allow a user to select a file to be uploaded as part of a form submission

Overview #

Use the file input component to allow the user to select a file to be uploaded as part of a form submission.

Examples #

Choose an example

<div class="rvt-file" data-rvt-file-input="example-file-input">
  <input type="file" data-rvt-file-input-button="example-file-input" id="example-file-input" aria-describedby="file-description">
  <label for="example-file-input" class="rvt-button">
    <span>Upload a file</span>
    <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M2 1h8.414L14 4.586V15H2V1Zm2 2v10h8V7.5H7.5V3H4Zm5.5 0v2.5H12v-.086L9.586 3H9.5Z"></path></svg>
  </label>
  <div class="rvt-file__preview" data-rvt-file-input-preview="example-file-input" id="file-description">
    No file selected
  </div>
</div>

Open in new window Copy link to example

<fieldset class="rvt-fieldset">
  <legend class="rvt-m-bottom-sm">Letter of Recommendation <span class="rvt-color-orange-500 rvt-text-bold">*</span></legend>
  <div class="rvt-file" data-rvt-file-input="example-file-input">
    <input type="file" data-rvt-file-input-button="example-file-input" id="example-file-input" aria-describedby="file-description" required>
    <label for="example-file-input" class="rvt-button">
      <span>Upload letter</span>
      <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M2 1h8.414L14 4.586V15H2V1Zm2 2v10h8V7.5H7.5V3H4Zm5.5 0v2.5H12v-.086L9.586 3H9.5Z"></path></svg>
    </label>
    <div class="rvt-file__preview" data-rvt-file-input-preview="example-file-input" id="file-description">
      No file selected
    </div>
  </div>
</fieldset>

Open in new window Copy link to example

<div class="rvt-file" data-rvt-file-input="example-file-input">
  <input type="file" data-rvt-file-input-button="example-file-input" id="example-file-input" aria-describedby="file-description">
  <label for="example-file-input" class="rvt-button rvt-button--secondary">
    <span>Upload a file</span>
    <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M2 1h8.414L14 4.586V15H2V1Zm2 2v10h8V7.5H7.5V3H4Zm5.5 0v2.5H12v-.086L9.586 3H9.5Z"></path></svg>
  </label>
  <div class="rvt-file__preview" data-rvt-file-input-preview="example-file-input" id="file-description">
    No file selected
  </div>
</div>

Open in new window Copy link to example

<div class="rvt-file" data-rvt-file-input="multipleFilesInput">
  <input type="file" data-rvt-file-input-button="multipleFilesInput" id="multipleFilesInput" aria-describedby="file-description-two" multiple>
  <label for="multipleFilesInput" class="rvt-button">
    <span>Upload multiple files</span>
    <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M2 1h8.414L14 4.586V15H2V1Zm2 2v10h8V7.5H7.5V3H4Zm5.5 0v2.5H12v-.086L9.586 3H9.5Z"></path></svg>
  </label>
  <div class="rvt-file__preview" data-rvt-file-input-preview="multipleFilesInput" id="file-description-two">
    No files selected
  </div>
</div>

Usage #

Do

Use to allow a user to upload one or more files as part of a form submission
Use an explicit allow list to specify which file types can be uploaded
Use both client- and server-side code to check that uploaded files match the size and format you expect

Don't

Replace the file icon with another icon
Allow users to upload files of unlimited size
Ask or allow users to upload executable files such as .exe, .bin, or .app
Rely on a block list to cover every possible malicious file type—use an explicit allow list instead

Accessibility #

Wrap required file inputs in a fieldset. Wrap individual required file inputs in a fieldset element. Use the legend element to describe the type of file the user should upload and add an asterisk (*) to indicate that the file is required. The required file input shows an example of this markup.
Include a note about required fields. If you use required file inputs in a form, add a note to the start of the form or field set explaining that required fields are marked with an asterisk (*). The create or edit resource page layout includes an example of this note.

JavaScript #

Event	Description	Detail object properties
`rvtFileAttached`	Emitted when one or more files is selected for upload	`files`: An array containing the name of each attached file

Learn more about using Rivet JavaScript