File input

The file input component lets the user select a file that will be attached as part of a form submission. The accept attribute to defines the file types the control can select.

Component data

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Forms




Responsive preview

Usage best practices

Consider using file input when:

  • users are expected to submit their own content in a specified file format

Usage examples:

  • upload profile image
  • submit application


Ensure date input control is large enough for mouse clicking and finger pressing.

Ensure labels and instructions are clear and easy to understand. Include assistive descriptions, such file size or format limitations, to help the user make an informed selection.

Give feedback on file upload status, such as the name of the file that has been successfully uploaded.

Provide validation to help the user recover from uploading an incorrect file.