Components / Controls
File input
A file picker that is a button, with the chosen name, a clear action, a description and an error.
@fabrials/ui
PDF or an image, up to 5 MB.
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { FileInput } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
label | ReactNode | The visible text of the button, in the interface's language. The browser's own "Choose File" is never shown. |
name / accept / multiple / required / disabled / onChange / ref | input props | Go to the real input, so the form works as usual. |
className / buttonClassName | string | The wrapper, and the button itself. |
onFilesChange | (files: File[]) => void | Called with the chosen files. |
fileName | ReactNode | null | The text beside the button. By default the names of the chosen files; pass a node to say something else and null to show nothing. |
onClear / clearLabel | () => void / string | Adds a clear button while a name shows. The picker is emptied, so the same file can be chosen again, and focus returns to it. |
description / error | ReactNode | Read with the input (aria-describedby); an error also sets aria-invalid. |
variant / size | Button variants | outline and default. |
Behavior
A label styled as a Button over a visually hidden input, so the keyboard, the form and the accessibility tree are the browser's. Focus draws its ring on the button.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.