File Input

The file input component is used to choose files from any location in the local machine and update those files to the server where the application is hosted. It is a common procedure in applications where files are required, like documents, images, or other information in digital formats.


File input design specifications
File input design specifications


The component file input is made-up of an input (type: file) and a file-item(s).


The element has the following states: enabled, hover, focus, active and disabled.

File variant states
File variant states


The element has the following states: enabled, hover, focus, active, dragover and disabled.

Filedrop variant states
Filedrop variant states


The element has the following states: enabled, hover, focus, active, dragover and disabled.

Dropzone variant states
Dropzone variant states

File items

The element has the following states: enabled, hover, focus, active, loading and error.

File item states
File item states


File input anatomy
  1. 1.
  2. 2.
    Drag and drop area
  3. 3.
    Error message
  4. 4.
    Error indicator
  5. 5.
    Action - Remove file
  6. 6.
    Helper text
  7. 7.
    file input button
  8. 8.
    File preview
  9. 9.
    File name
  10. 10.
    File item container

File item with preview

When the files to upload are mainly images, the preview can provide more feedback to the user rather than the name of the file, preventing errors loading content.

File item with preview
File item with preview

Single-file file input

In order to provide a compact version of the file input component to accommodate any layout restriction, the variant file displays the file name in the same row instead of growing vertically.

File variant
File variant

Design tokens



Component tokenElementCore tokenValue
dropBorderColorDrag and drop areacolor-black#000000
fileItemBorderColorFile itemcolor-grey-300#cccccc
deleteFileItemColorFile itemcolor-black#000000
fileNameFontColorFile namecolor-black#000000
filePreviewBackgroundColorFile previewcolor-grey-100#f2f2f2
filePreviewIconColorFile preview iconcolor-black#000000
helperTextFontColorHelper textcolor-black#000000
dropLabelFontColorDrop labelcolor-black#000000


Component tokenElementCore tokenValue
disabledHelperTextFontColorHelper text:disabledcolor-grey-500#999999
disabledDropLabelFontColorDrop label:disabledcolor-grey-500#999999
focusDropBorderColorDnd border:focuscolor-blue-600#0095ff
disabledDropBorderColorDnd border:disabledcolor-grey-500#999999
dragoverDropBackgroundColorDnd fill:dragovercolor-blue-50#f5fbff
hoverDeleteFileItemBackgroundColorFile item icon:hovercolor-grey-100-a#0000000d
focusDeleteFileItemBorderColorFile item icon:focuscolor-blue-600#0095ff
activeDeleteFileItemBackgroundColorFile item icon:activecolor-grey-300-a#00000033
errorFileItemBorderColorFile item container:errorcolor-red-700#d0011b
errorFileItemBackgroundColorFile item container:errorcolor-red-50#fff5f6
errorFilePreviewBackgroundColorFile item preview:errorcolor-red-200#ffccd3
errorFilePreviewIconColorFile item preview icon:errorcolor-red-700#d0011b
errorMessageFontColorFile item:errorcolor-red-700#d0011b


PropertyElementCore tokenValue
font-familyLabelfont-family-sansOpen Sans
font-sizeLabelfont-scale-020.875rem / 14px
font-familyFile itemfont-family-sansOpen Sans
font-sizeFile itemfont-scale-020.875rem / 14px
font-weightFile itemfont-regular400
line-heightFile itemfont-leading-normal1.5em
font-familyHelper textfont-family-sansOpen Sans
font-sizeHelper textfont-scale-0112px
font-weightHelper textfont-regular400
line-heightHelper textfont-leading-normal1.5em
font-familyDrop labelfont-family-sansOpen Sans
font-sizeDrop labelfont-scale-031rem / 16px
font-weightDrop labelfont-regular400
font-familyError messagefont-family-sansOpen Sans
font-sizeError messagefont-scale-010.75rem / 12px
font-weightError messagefont-regular400
line-heightError messagefont-leading-normal1.5em


PropertyElementCore tokenValue
border-styleDrag and drop areaborder-style-dasheddashed
border-widthDrag and drop areaborder-width-11px
border-radiusDrag and drop areaborder-radius-large0.375rem / 6px
border-styleFile itemborder-style-solidsolid
border-widthFile itemborder-width-11px
border-radiusFile itemborder-radius-medium0.25rem / 4px
box-shadowFile item icon:focus-0 0 0 2px
box-shadowDrag and drop area:dragover-0 0 0 2px