Skip to main content

Variable: FileInput

const FileInput: object;

Defined in: react/src/components/FileInput/index.tsx:136

Picks files, and hands them over as Files.

Type Declaration​

Root​

Root: ForwardRefExoticComponent<FileInputProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof FileInputProps> & RefAttributes<HTMLDivElement>>;

Hands over the files a person picked.

The <input type="file"> is here, kept out of sight but in the tab order, because it is the control: it takes the focus, opens the picker on Enter, and carries the accessible name. What is on screen is whatever the children draw.

Trigger​

Trigger: ForwardRefExoticComponent<FileInputTriggerProps & Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref">, "children" | "htmlFor"> & RefAttributes<HTMLLabelElement>>;

Opens the file picker, and names the input for a screen reader.

A <label> rather than a <button>: the browser forwards the click to the input on its own, the input stays the one thing in the tab order, and its accessible name comes from this text without an aria-label to keep in step. A disabled input ignores the click, so nothing has to be intercepted.