File Input

Adding and styling file inputs.

What is a File Input?

A File Input is an input field for uploading files.

Location in the Parts Library: Base Parts > Data Input > FileInput

Example of a File Input

If your form requires users to upload a file, you'll need a File Input part.

Setting Up The File Input ID and State

Your File Input will need to be given an ID, which is an identifier. For example, if your File Input part is to prompt a user to upload their resume, then you might give it an identifier such as Resume, or something that indicates to you what the File Input is about. When you give your File Input an ID, that ID automatically gives the File Input a State. You can see this when you click on the State Model property in the right property panel.

Setting A File Input ID

Styling a File Input

It's important to note that you cannot change the placeholder text in a file input part. It will automatically say "Choose File" and "No File Chosen", until a file has been uploaded.

Like many other parts, sizing, borders, shadow, opacity, rounding, and spacing can be applied using the property editor on the right, once the file input has been selected.

Changing the Colors of File Inputs

File Inputs allow you to set the foreground and background color. The colors are applied slightly differently than other parts, as follows:

Changing the Foreground and Background Colors of File Input Parts

You can also change the colors of File Inputs in an active state, when focused, and on hover. These are done the same way for foreground and background color.

To change the color when the File Input is being hovered, select the File Input and open the 'Colors on Hover' editor on the right. Now you can set your preferred background and foreground color combination to signify that the File Input is being hovered.

The 'Color on Focus' editor on the right refers to the color of the File Input after it has been clicked, or if the user tabs to the File Input.

The 'Color on Active' editor on the right refers to the color of the File Input when it is active (the moment it is clicked).

The background colors of File Inputs can be a color gradient.

File Input Variants

There are two file input variants:

File Input Variants

The 'Input Bordered' variant creates an outline around the file input.

The 'Input Ghost' variant removes the outline around the file input and makes it transparent.

Related Information

Customizing and formatting