The file input component uses a wrapping <label>.

The <input type="file"> and sibling faux-button span are nested within the label so the component is accessible.

<label class="bc-file-input" data-testid="file-input-label">
  <input class="bc-file-input__input" type="file" disabled />
  <span class="bc-btn bc-btn--disabled bc-btn--block">
    Upload a single file
    <span data-testid="bc-icons" class="bc-icons bc-icons--attach-icon bc-icons--parent-color bc-icons--inlined">
      <svg class="bc-icons__svg" viewBox="0 0 24 24" width="100%" height="100%" focusable="false" role="none"
        aria-hidden="true">
        <use href="#attach-icon"></use>
      </svg>
    </span>
  </span>
</label>

The UI of the file input element is difficult to style due to limited CSS selectors (see Rationale).

To achieve consistency between various native OS implementations of this UI component we visually hide the <input>. Instead a sibling <span> is styled as a button, and everything is wrapped in the <label> so it is natively clickable.

The following variants are available:

Hint text

Remember to inform users of any limitations, such as file types or size.

Single or multiple file upload

Make it obvious whether a file upload supports only single or accepts multiple file sections to upload.

Do this using:

• Button text, eg. Attach a file and Attach file(s)
• Accompanying hint text.

The markup structure is important — see the HTML section.

Associate any related hint text using aria-describedby on the <input>.

If the component asynchronously uploads files and dynamically updates a list of uploaded files to be attached use ARIA to associate the files with then input.

File upload inputs are a familiar means for users to select single or multiple files to upload using their native OS file dialogs.

For consistency in function, the file input component is styled as a Button.

The faux-button implementation is used because of file input limitations in CSS styling.

• MDN: <input type="file">
• MDN: File API
• MDN: Using files from web applications