File input

Last modified:

A simple file upload form input element.

Example of File input - default

<BcFileInput name='user-avatar' onChange={() => {}} label='Upload avatar' />

React documentation

Last modified:


namestringtrueUsed to set the name attribute for the input for form submission
labelstringtrueUsed to set the label for the file attachment
buttonSizestringfalseUsed to set the size of the element to either small or large
disabledbooleanfalsefalseUsed to handle the disabled state of the input as well as adding .bc-file-input--disabled
isFullWidthbooleanfalsefalseUsed to toggle .bc-file-input--block variant for full-width styling
onChangefunctionfalseUsed as a function to handle file selection events

Possible values for buttonSize prop

buttonSizesmUsed to display the upload file element smaller
buttonSizelgUsed to display the upload file element larger

Extended types

  • React.InputHTMLAttributes<HTMLLabelElement> for label
  • React.InputHTMLAttributes<HTMLInputElement> for input


Last modified:

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.


Last modified:

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:

.bc-file-input--blockMakes the component span 100% of its block width
.bc-file-input--disabledTo handle passing disabled styles. Use in addition to setting disabled on the input itself

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.


Last modified:

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.


Last modified:

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.

See also

Last modified: