<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

File Input

Select and upload a file from the users local file system.

Default

SWAN's FileInput component is built upon the native HTML <input type="file"> element, so it can accept all of the native input’s events and attributes, including onChange to get the contents of the uploaded file, or multiple to let the user select multiple files.

The FileInputLabel sub-component is the visible part, since we hide the native <input> and only show this <label>. For accessibility, it must have accessible text, such as visible HTML text, visually-hidden text, alt text on an image, or an aria-label.

The preview has been updated.

Button Variants

FileUploadLabel is a <label>, but it accepts many of the visual props from Button. You can use these to customize the appearance of the label.

Available props are skin, sizeVariant, size, widthVariant, width, specialVariant, iconPosition, and buttonShape.

The preview has been updated.

Disabled

Use disabled when a FileInput's action is unavailable.

The preview has been updated.

Inside of a Form

Since it is a form element, FileInput can be used inside of a StandardForm along with a separate, external label and/or helper text.l

The preview has been updated.

Props

This component does not have any custom props. Core props can still be used.


Related

Was this page useful?

Thanks for your feedback!

Feel free to include your name if you wish to have a follow up conversation.


form
Published: Aug 11, 2023Last updated: Sep 18, 2024