File Input
A styled file picker that wraps the native input[type=file]. Shows the selected filename and triggers the OS file dialog on click. For drag-and-drop uploads, use Dropzone instead.
Examples
No file chosen
Sizes
No file chosen
No file chosen
No file chosen
No file chosen
Accept specific types
No image chosen
No document chosen
Multiple files
No files chosen
Error state
No file chosen
Disabled
No file chosen
Custom button label
No file chosen
Props
size= 'md'
'sm' | 'md' | 'lg' | 'xl'
Height and text size of the control.
accept
string
Native file type filter, e.g. "image/*" or ".pdf,.doc".
multiple= false
boolean
Allow selecting more than one file.
disabled= false
boolean
Prevents interaction.
error= false
boolean
Applies error styling.
placeholder= 'No file chosen'
string
Text shown when no file is selected.
buttonLabel= 'Browse'
string
Label for the trigger button.
onChange
(files: FileList | null) => void
Called when the selection changes.
className
string
Extra class on the outer wrapper.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Height and text size of the control. |
| accept | string | — | Native file type filter, e.g. "image/*" or ".pdf,.doc". |
| multiple | boolean | false | Allow selecting more than one file. |
| disabled | boolean | false | Prevents interaction. |
| error | boolean | false | Applies error styling. |
| placeholder | string | 'No file chosen' | Text shown when no file is selected. |
| buttonLabel | string | 'Browse' | Label for the trigger button. |
| onChange | (files: FileList | null) => void | — | Called when the selection changes. |
| className | string | — | Extra class on the outer wrapper. |