Form

File input

Published on

Description

The file input allows users to select files from their device. It provides a browser-native file picker.

Example

Open in new tab
View HTML markup 
  <form method="POST" novalidate="">
  <div><label for="file">
      <hgroup>
        <h1>File w/ dropzone</h1>
      </hgroup>
    </label> <span id="file-hint">Choose file with .csv</span> <input id="file" name="file" is="ds-input-file" accept=".csv,text/csv" type="file" aria-describedby="file-hint" /> </div> <button type="button">Submit</button>
  <p>Need help? <a href="/form/input-file" target="_top">View our guidance </a></p>
</form>

Accessibility

  • Use explicit <label for="id"> association.
  • The file input has limited styling options. Avoid hiding the native control and replacing it with a custom button — this breaks keyboard and assistive technology support.
  • Communicate accepted file types and size limits via hint text using aria-describedby.

References

Variables

None for input