# Appearance In the ***Appearance*** section, you can configure various options related to the visual presentation of fields in the form. Although these types of properties focus on style or formatting choices that do not directly affect the functionality of the components, it is important to note that they can significantly impact their effectiveness: a clear and user-friendly design will facilitate proper management, while an unintuitive design may hinder it. Let’s take a look at these properties for the different types of form elements. Remember that you can activate the ***Preview*** mode while working to review in real-time how your choices affect the design.

Appearance section and location of the **Preview** button.

## Columns and Static Elements Both columns and static elements like ***Text*** and ***Image*** have specific properties that define their positioning on the screen. The ***Vertical align*** property is common to all of them and refers to the position of the components relative to the top and bottom margins of the section or column containing them. This property can be set to ***Top*** (aligned at the top), ***Center*** (aligned in the center), or ***Bottom*** (aligned at the bottom).

Options for the **Vertical align** property

Another property that only affects columns is ***Spacing***, which refers to the vertical space between elements within the same column. The higher this value, the greater the separation between fields. The ***Align*** property, found in both text and image fields, works similarly but defines the horizontal positioning of the content. This can be set to ***Left***, ***Center***, or ***Right***, indicating alignment to the left, center, or right, respectively.

The ***Text*** field offers a richer set of options, with the following properties:

Property	Function
Margin	With values ranging from 0 to 10, this allows you to choose the margin of free space around the text. A lower value positions it closer to other components, while a higher value increases the separation.
Weight	Allows you to set the font weight to Light, Regular, or Bold.
Font style	Allows you to select the text style as Italic or Normal.
Text variant	Offers a series of preconfigured variants with different levels for headings, subtitles, body text, and other options.

## Input Fields Although input fields offer a wider range of options depending on their functionality, most of them include the following appearance properties: ### Mask This property defines a structure for the requested data, determining its possible values. To use this property, you need to understand certain parameters that define the type of characters allowed in each position of the string: * The character "a" represents any letter, meaning that when included in the mask, the user can only enter an alphabetic character in that position. * The character "0" represents any number. When included in the mask, it only allows values from 0 to 9 in that position.

Example of a mask that allows four alphabetic characters and four numeric characters

* If only a specific letter or number is valid in a position of the string, you must enter the corresponding character in the mask. * If a character in the string must specifically be "a" or "0" (since these also serve as generic letter or number placeholders), you must precede it with a backslash "\\" to ensure only that specific character is accepted. * Other characters like periods or hyphens can be added to the mask so that the entered data adopts this format. {% embed url="" %} Example of configuring Mask with different characters {% endembed %} ### Placeholder Sets a default text displayed to the user in the field, which can be used to provide examples or suggestions for completing it.

Adding a suggestion text using **Placeholder**

### Prefix Adds an expression as a prefix to the data entered in the field, such as the area code before a phone number.

### Multiline You can choose the value ***True*** if you want the field to have multiple lines (for a larger text area) or ***False*** if it should be displayed in a single line.

Creating additional space by setting the value **True** for the **Multiline** property

Keep in mind that some field types, such as ***Date*** or ***Attachment***, will have fewer properties or may not display this section, as they have a predefined format that does not allow variations. Other fields, like ***Options*** or ***Boolean***, will have unique properties specific to their type, as we will see later.