Example of File input - default
<BcFileInput name='user-avatar' onChange={() => {}} label='Upload avatar' />
React documentation
Last modified:
BcFileInput
| Prop | Type | Required? | Default | Description |
|---|---|---|---|---|
| name | string | true | Used to set the name attribute for the input for form submission | |
| label | string | true | Used to set the label for the file attachment | |
| buttonSize | string | false | Used to set the size of the element to either small or large | |
| disabled | boolean | false | false | Used to handle the disabled state of the input as well as adding .bc-file-input--disabled |
| isFullWidth | boolean | false | false | Used to toggle .bc-file-input--block variant for full-width styling |
| onChange | function | false | Used as a function to handle file selection events |
Possible values for buttonSize prop
| Prop | Value | Description |
|---|---|---|
| buttonSize | sm | Used to display the upload file element smaller |
| buttonSize | lg | Used to display the upload file element larger |
Extended types
React.InputHTMLAttributes<HTMLLabelElement>for labelReact.InputHTMLAttributes<HTMLInputElement>for input
HTML
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.
Design
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:
| Variant | Purpose |
|---|---|
.bc-file-input--block | Makes the component span 100% of its block width |
.bc-file-input--disabled | To 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.
Accessibility
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.
Rationale
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: