FileInput

File upload input with drag support.

import { FileInput } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Loading preview…

Prop	Type	Default	Description
`value`	`File \| File[] \| null`	—	Currently selected file(s).
`onChange` *	`(files: File \| File[] \| null) => void`	—	Callback when files are selected or removed.
`mode`	`'single' \| 'list'`	`'single'`	Selection mode: 'single' for one file, 'list' for multiple.
`accept`	`string`	`'*'`	Accepted MIME types or file extensions.
`maxSize`	`number`	—	Maximum file size in bytes.
`placeholder`	`string`	`'Choose a file'`	Placeholder text shown when no files are selected.
`disabled`	`boolean`	`false`	Disable file selection.
`class`	`string`	—	Additional CSS classes.
`style`	`JSX.CSSProperties`	—	Custom styles.

* required prop.

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.