Currency Styling
The Currency element is an input for collecting monetary values. It can display a currency symbol using a prefix and suffix if you need. These monetary values allow you to enter a decimal value or integer, using a comma as a separator.
This element can be broken down into several parts, which can be styled individually, for example, the label, font, size, color, or the input fill color.
The Currency element can be edited on both the Project Style Level and Element Style Level.
| # | Option | Function | Available in Project or Element 
|
|---|---|---|---|
| 1 | Root | This option enables you to set general properties that affect the Currency element as a whole. | 
|
| 2 | Label | The Label option allows you to control the style of the descriptive text above the Currency box. For example, its font size, color, and type. |
|
| 3 | Shrink Label | You can use the Shrink Label to control the style of the elevated label when the input label is configured as floating. The Shrink Label option is available under the Standard, Filled, and Outlined variants on the project styling properties, and is not found on the Classic and Fixed variants. |
|
| 4 | Input | This option allows you to style the text entered inside the Currency element, including the prefix texts, suffix texts, and icons that may be shown. |
|
| 5 | Messages | This option allows you to style text shown under the Currency element when the input text is found to be valid or invalid. You can select a font for both messages and set separate colors for success and error messages. These colors will be applied to the input border and the relevant message. |
|
| 6 | Valid Icon | The Valid Icon is a simplified image used to represent input text is correct. It is a graphic symbol that can visually support and clarify your content. You can set a size, color, and stroke option for the Valid Icon. |
|
| 7 | Invalid Icon | The Invalid Icon is a simplified image used to represent input text is an error. It is a graphic symbol that can visually support and clarify your content. You can set a size, color, and stroke option for the Invalid Icon. |
|
1. Root
The Root option enables you to set general properties that affect the Currency element as a whole, such as primary color, element size, position, and alignment.
| # | Option | Function | Available in Project or Element
|
|---|---|---|---|
| 1 | Primary | The Primary color given to the Currency field affects its border color. |
|
| 2 | Position | You can use this option to change the Currency’s location in the content area, on the x and y-axis (left/right/top/bottom). Position also allows you to make the Currency float over its parent container or over the entire page. “Float over Parent” allows to set the location of the Currency within the box containing it, e.g. container or strip. “Float over Page” allows you to set the location of the Currency inside of the entire page (and have it stay in the same location even when the user is scrolling in it). |
|
| 3 | Size | This option allows you to change the width and height of the Currency element. |
|
| 4 | Alignment | You can set the Currency element to a vertical or horizontal position in relation to its container (left/center/right/top/middle/bottom). The Alignment option also allows you to set the position of a few elements in relation to each other. |
|
| 5 | User CSS | Cascading Style Sheets (CSS) allows the user to apply styles on the Currency element with CSS code. Note: For Project styling, CSS is accessed via the Tools menu, which you can read about in our Style Elements Using User CSS article. |
|
| 6 | Input Variant | This option allows you to choose the general look of the input from five existing variants: Standard, Filled, Outlined, Fixed, and Classic. Except for the Fixed and Classic options, the labels in all variants can be set as Floating. |
|
2. Label
The Label setting allows you to control the style of the descriptive text above the Currency box. For example, its font type, font size, and color.
| # | Option | Function | Available in Project or Element
|
|---|---|---|---|
| 1 | Font | The Font option lets you change the typography style, for instance, font family, weight, color, and size. |
|
| 2 | Margin | This option allows you to add space between the label and adjacent element parts. |
|
| 3 | Asterisk | This option allows you to set the style of the asterisk sign (*) that appears next to a label when an element is mandatory. |
|
3. Shrink Label
You can use the Shrink Label option to control the style of the elevated label when the input label is configured as floating.
The Shrink Label option is available under the Standard, Filled, and Outlined variants on the project styling properties and is not found on the Classic and Fixed variants.
| # | Option | Function | Available in Project or Element
|
|---|---|---|---|
| 1 | Font | This option enables you to turn on the Floating Label functionality (which is turned off by default), by switching off the “Always shrunk” checkbox. It then enables you to change the typography style of the floating label (for instance, font family, weight, color, and size) and set the Top and Left offset for the floating label. |
|
| 2 | Margin | This option allows you to add space between the Shrink Label and the adjacent element parts. |
|
4. Input
Input allows you to style the Currency box and the text entered in it. You can also style the prefix texts, suffix texts, and icons that can be shown before or after the text.
| # | Option | Function | Available in Project or Element
|
|---|---|---|---|
| 1 | Input Font | You can use the Input Font setting to change the typography style, for instance, font family, weight, color, and size. |
|
| 2 | Prefix Text Font | You can use this option to style the static text that appears before the user input text. |
|
| 3 | Prefix Icon | The Prefix Icon allows you to style the static icon that appears before the user input text. |
|
| 4 | Suffix Text Font | This option allows you to style the static text that appears after the user input text. |
|
| 5 | Suffix Icon | You can use the Suffix Icon option to style the static icon that appears after the user input text. |
|
5. Messages
This option allows you to style text shown under the Currency element when the input text is found to be valid or invalid. You can select a font for both messages and set separate colors for success and error messages. These colors will be applied to the input border and the relevant message.
| # | Option | Function | Available in Project or Element
|
|---|---|---|---|
| 1 | Font | This option allows you to change the error and success message typography style, such as the font family, weight, etc. The color set for these messages will also be applied to the input border and the message. |
|
6. Valid Icon
The Valid Icon is a simplified image used to represent input text is correct. It is a graphic symbol that can visually support and clarify your content.
| # | Option | Function | Available in Project or Element
|
|---|---|---|---|
| 1 | Color | The Color option allows you to set the Valid Icon’s color. The color can be set by selection from a color pallet or by specifying a HEX color code. |
|
| 2 | Stroke | This option refers to the outer contour of the Valid Icon. It allows you to make the icon’s border visible or invisible, and change its weight and color. |
|
| 3 | Size | This option allows you to change the width and height of the Valid Icon. |
|
7. Invalid Icon
The Invalid Icon is a simplified image used to represent input text is an error. It is a graphic symbol that can visually support and clarify your content.
| # | Option | Function | Available in Project or Element
|
|---|---|---|---|
| 1 | Color | The Color option allows you to set the Invalid Icon’s color. The color can be set by selection from a color pallet or by specifying a HEX color code. |
|
| 2 | Stroke | This option refers to the outer contour of the Invalid Icon. It allows you to make the icon’s border visible or invisible, and change its weight and color. |
|
| 3 | Size | This option allows you to change the width and height of the Invalid Icon. |
|
