Skip to main content

File

File allows users to upload a single file from a computers file system and is based on the HTML input element with a type of file.

Example

File

File upload examples on a default theme

Best practices

Use File when a file is needed to move forward in the workflow, or if and uploaded file will save time and effort for the user. For example, a file that contains data that would require time and effort to enter through the website.

Do

  • Label the the behaivor of the component clearly using the hint text and label to avoid an unwelcome suprise for the user when the file dialog pops up.
  • Valid label is required.

Don’t

  • Shorten the text field below the minimum recommended width, otherwise filenames may be clipped to aggressively.
  • Placeholder is not a valid label.

Also known as

Browse
File picker

Related

Button
Text-field

Options

Placeholder text: Placeholder text can be added to the text field by entering the text into the placeholder attribute of the text input.

Development

  • Schema definition: The file schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default

<label class="c-label" for="file1">Label</label>
<div class="c-file">
    <input type="file" id="file1">
    <input type="text" class="c-text-field" aria-hidden="true" placeholder="Choose a file to upload (default)" readonly="readonly">
    <button name="button" class="c-button" type="submit">Select</button>
</div>

Disabled

<label class="c-label" for="file2">Label</label>
<div class="c-file">
    <input type="file" id="file2" disabled="disabled">
    <input type="text" class="c-text-field" aria-hidden="true" placeholder="Choose a file to upload (disabled)" disabled="disabled">
    <button name="button" class="c-button" type="submit" disabled="disabled">Select</button>
</div>