File Field

ProNew

A form field for files built on react-dropzone: click, drop, paste or press Enter; accept, size and count rules with readable rejection messages; a removable file list with image previews, and Field-style label, hint and error.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/file-field

Usage

It is controlled: value is the list you submit. Hand the files to useUploadQueue (Upload Queue) when you want progress, or put them in a FormData yourself.

Props

Prop	Type	Default	Description
`value` / `onChange`	`File[]`	-	The files.
`label`, `description`	`ReactNode`	-	Visible label and hint.
`accept`	react-dropzone `Accept`	any	Types, by MIME with optional extensions.
`acceptLabel`	`string`	-	Plain-language types for the hint.
`maxSize`	`number`	none	Bytes.
`maxFiles`	`number`	`1`	Above 1 the list accumulates.
`error`	`string`	-	An outside message.
`previews`	`boolean`	`true`	Image thumbnails.

Accessibility

The drop area is one control with role="button", named by the label and described by the hint and error. Enter or Space opens the file picker; the hidden file input is not in the tab order.
Rejected files are announced in a role="alert" region naming each file and the reason, and the control gets aria-invalid.
Selected files are a labelled list. Each Remove button has the file name in its name and sits outside the drop area, so there is no button inside a button.
Paste works when the control has focus (react-dropzone handles it, with the same type and size checks as a drop). Drag state changes the prompt text ("Drop to add") as well as the colour.

Testing

The component ships with a Testing Library test (file-field.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/file-field

Usage

It is controlled: value is the list you submit. Hand the files to useUploadQueue (Upload Queue) when you want progress, or put them in a FormData yourself.

Props

Prop	Type	Default	Description
`value` / `onChange`	`File[]`	-	The files.
`label`, `description`	`ReactNode`	-	Visible label and hint.
`accept`	react-dropzone `Accept`	any	Types, by MIME with optional extensions.
`acceptLabel`	`string`	-	Plain-language types for the hint.
`maxSize`	`number`	none	Bytes.
`maxFiles`	`number`	`1`	Above 1 the list accumulates.
`error`	`string`	-	An outside message.
`previews`	`boolean`	`true`	Image thumbnails.

Accessibility

The drop area is one control with role="button", named by the label and described by the hint and error. Enter or Space opens the file picker; the hidden file input is not in the tab order.
Rejected files are announced in a role="alert" region naming each file and the reason, and the control gets aria-invalid.
Selected files are a labelled list. Each Remove button has the file name in its name and sits outside the drop area, so there is no button inside a button.
Paste works when the control has focus (react-dropzone handles it, with the same type and size checks as a drop). Drag state changes the prompt text ("Drop to add") as well as the colour.

Testing

The component ships with a Testing Library test (file-field.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.