Forms
File Upload
A drop zone that takes files by drag and drop, with a list of the ones you picked. You can open the zone from the keyboard too.
ReactVueWeb Components
View in Storybook Playground
Examples
<FileUpload multiple accept="image/*" onChange={setFiles} />Props
| Name | Type | Default | Description |
|---|---|---|---|
value | File[] | — | Controlled file list. |
defaultValue | File[] | — | Initial files when uncontrolled. @default [] |
onChange | (files: File[]) => void | — | Called with the updated file list. |
accept | string | — | `accept` attribute for the file input. |
multiple | boolean | false | Allow selecting multiple files. @default false |
disabled | boolean | false | Disable the control. @default false |
label | ReactNode | ファイルをドラッグ、またはクリックして選択 | Main dropzone label. @default 'ファイルをドラッグ、またはクリックして選択' |
hint | ReactNode | — | Secondary hint under the label. |
removeLabel | (name: string) => string | Remove ${name} | Builds the remove button label. @default `Remove ${name}` |
inputLabel | string | ファイルを選択 | Accessible name for the underlying file input. @default 'ファイルを選択' |
id | string | — | |
name | string | — | |
className | string | — |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.