File upload
File upload lets users select and upload files.
Used for this
- To let users attach a file or image to something else
- To let users add images to their avatars
How to use it
Default
Users drag and drop files on to the target or click to select which files to upload.
Disabled
A disabled File upload prevents user interaction. It doesn’t appear in the tab order and can’t receive focus.
Size
File upload can be default or compact. Size affects spacing between the label/description and the touch target.
Configuration
- Name8.42.0•View source•View on npm
- Installnpm install @zendeskgarden/react-forms
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Field, FileUpload, Hint, Input, Label } from '@zendeskgarden/react-forms'
API
Field
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
id | string | – | Sets the field ID and the prefix for the generated label, input, and hint IDs |
FileUpload
Extends HTMLAttributes<HTMLDivElement>
The File upload component works together with a library like react-dropzone.
| Prop name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | – | Indicates that the element is not interactive |
isCompact | boolean | – | Applies compact styling |
isDragging | boolean | – | Applies drag styling |
Hint
Extends HTMLAttributes<HTMLDivElement>
Input
Extends InputHTMLAttributes<HTMLInputElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
focusInset | boolean | – | Applies inset box-shadow styling on focus |
isBare | boolean | – | Removes borders and padding |
isCompact | boolean | – | Applies compact styling |
validation | VALIDATION | – | Applies validation state styling |
Label
Extends LabelHTMLAttributes<HTMLLabelElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isRegular | boolean | – | Applies regular (non-bold) font weight |