FileInput

Attach files by picking, dropping or pasting them. It checks type and size and lists what was chosen with a remove button each.

FileInput

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, FileInput

Attachments

or drop them here

PDF or images, up to 5 MB each.

brief.pdf48 kB

1 file chosen

Avatar

or drop it here

Add an image to continue.

Dark theme, FileInput

Attachments

or drop them here

PDF or images, up to 5 MB each.

brief.pdf48 kB

1 file chosen

Avatar

or drop it here

Add an image to continue.

High contrast theme, FileInput

Attachments

or drop them here

PDF or images, up to 5 MB each.

brief.pdf48 kB

1 file chosen

Avatar

or drop it here

Add an image to continue.

UsageLink to the section Usage

tsx

import { FileInput } from '@skribly/ui/forms'

tsx

<FileInput label="Attachments" buttonLabel="Choose files" dropLabel="or drop them here"
  removeLabel={(file) => `Remove ${file.name}`} allowsMultiple acceptedFileTypes={['.pdf', 'image/*']} />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

The button opens the picker.
The drop area has its own focus stop where keyboard drag and drop and pasting a copied file work.
Files left out by type or size raise a polite warning; each remove button names its file.

This demo runs through axe in all three themes on every test run. See what the tests check.