File Input

Introduction

This component is a lightweight wrapper around an underlying <label> element that contains an <input type="file">. It supports the full range of HTML <label> props.

Examples

Basic File Selector

Large File Selector

Usage

import React from "react";
import { FileInput } from "@commure/components-foundation";
function MyFileInput() {
return (
<FileInput
hasSelection="true"
text="Select file..."
/>
);
}
export default MyFileInput;

API Reference

FileInput

Prop NameRequired?TypeDescription
disabledfalsebooleanWhether the file input is non-interactive. Setting this to `true` will automatically disable the child input too.
fillfalsebooleanWhether the file input should take up the full width of its container.
hasSelectionfalsebooleanWhether the user has made a selection in the input. This will affect the component's text styling. Make sure to set a non-empty value for the text prop as well.
inputPropsfalseHTMLProps<HTMLInputElement>The props to pass to the child input. `disabled` will be ignored in favor of the top-level prop. `type` will be ignored, because the input _must_ be `type="file"`. Pass `onChange` here to be notified when the user selects a file.
largefalsebooleanWhether the file input should appear with large styling.
onInputChangefalseReact.FormEventHandler<HTMLInputElement>Callback invoked on `<input>` `change` events. This callback is offered as a convenience; it is equivalent to passing `onChange` to `inputProps`. __Note:__ The top-level `onChange` prop is passed to the wrapping `<label>` rather than the `<input>`, which may not be what you expect.
textfalseReact.ReactNodeThe text to display.

Related Reading

Blueprint Reference