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
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.
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:
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:
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
Last updated
Was this helpful?