Inputs and Text Input Areas
Adding and styling inputs and text input areas.
Last updated
Was this helpful?
Adding and styling inputs and text input areas.
Last updated
Was this helpful?
An input is a simple input field where users can type in text and numerical responses. It's one of the most common form elements used in websites and apps. Inputs are useful because they allow users to provide free-form responses to questions or prompts.
Location in the Parts Library: Base Parts > Data Input > Input
A Text Input Area is similar to an Input, it just allows more space for free text over multiple lines.
Location in the Parts Library: Base Parts > Data Input > TextInputArea
The Input and Text Input Area parts can accommodate placeholder text inside, a label on the top and the bottom, and a prepend or icon next to the field.
The property editors are the same for Input and Text Input Areas.
To edit the placeholder text within the Input/Text Input Area, go to 'Placeholder' in the property panel on the right, and key in your preferred placeholder text in the 'value' box. Placeholder text is usually an instruction for what is needed in the Input/Text Input Area. The value disappears once your user enters their information.
To edit the label, select the text within the label, and edit as you would normally edit text - by going to 'Text' in the property panel on the right, and keying in your new value.
Your Input/Text Input Area will need to be given an ID, which is an identifier for your Input/Text Input Area. When you set an ID, that ID automatically gives the Input/Text Input Area a State. You can see this when you click on the State Model property in the right property panel. The property editors for these are shown below:
The 'Ghost' property makes the Input/Text Input Area invisible until it is clicked.
You can also change the colors of Inputs and Text Input Areas 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 Input/Text Input Area is being hovered, select the Input/Text Input Area 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 Input/Text Input Area is being hovered.
The 'Color on Focus' editor on the right refers to the color of the Input/Text Input Area after it has been clicked, or if the user tabs to the Input/Text Input Area.
The 'Color on Active' editor on the right refers to the color of the Input/Text Input Area when it is active (the moment it is clicked).
Like many other parts, , , , , and including preset sizes, can be amended using the property editor on the right, once the Input or Text Input Area has been selected.
Inputs and Text Input Areas have more properties than most other parts. The background and foreground colors can be set.
The background colors of Input/Text Input Areas can be a .
Icons
Text
Customizing and formatting
