File Input
A styled <input type="file"> with label, description, and error support. The placeholder text is shown in the UI; the selected filename updates natively in the browser without any JS.
Default
No file selected
<FileInput label="Upload file" />Description & placeholder
Accepted formats: JPG, PNG, WebP. Max size 5 MB.
Choose an image...
<FileInput
label="Profile photo"
description="Accepted formats: JPG, PNG, WebP. Max size 5 MB."
placeholder="Choose an image..."
accept="image/*"
/>Multiple files
Choose files...
<FileInput label="Attachments" multiple placeholder="Choose files..." />Accept filter
Choose an image...
Choose a PDF...
Choose a CSV...
<FileInput label="Images" accept="image/*" />
<FileInput label="PDFs" accept=".pdf" />
<FileInput label="CSV" accept=".csv,text/csv" />Required & error
No file selected
No file selected
Please select a file before continuing
<FileInput label="Required upload" withAsterisk />
<FileInput label="With error" error="Please select a file before continuing" />Size
No file selected
No file selected
No file selected
No file selected
No file selected
<FileInput size="xs" label="Extra small" />
<FileInput size="sm" label="Small" />
<FileInput size="md" label="Medium" />
<FileInput size="lg" label="Large" />
<FileInput size="xl" label="Extra large" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | children | — | Field label rendered above the input |
description | children | — | Helper text below the label |
error | children|boolean | — | Error message or true for styles only |
accept | string | — | MIME types or extensions the picker accepts |
multiple | boolean | — | Allows selecting multiple files |
capture | 'user'|'environment' | — | Mobile camera source |
placeholder | string | 'No file selected' | Text shown when no file is chosen |
disabled | boolean | — | Prevents interaction |
required | boolean | — | Marks the field required |
withAsterisk | boolean | — | Shows asterisk without native required |
size | 'xs'|'sm'|'md'|'lg'|'xl' | — | Font size and height |
radius | 'xs'|'sm'|'md'|'lg'|'xl'|string | — | Corner radius |
name | string | — | Form field name |
id | string | — | Associates label with input |