Skip to main content
Version: 2.33.0

Text

The Text component can be used to create headers, sub-headers, add labels next to various input fields and more. In this document, we'll go through all the configuration options for the Text component.

Data

Data TypeDescription
Plain textSimple text without any formatting. Ideal for straightforward messages where no emphasis or special layout is needed.
MarkdownAllows for easy formatting of text with elements like headers, bold, italics, links, and lists, making it suitable for writing content that requires basic styling.
HTMLUsed to create formatted text and various elements on web pages.

Events

Event
Description
On clickTriggers whenever the user clicks on the component.
On hoverTriggers whenever the user hovers over the component.
info

Check Action Reference docs to get detailed information about all the Actions.

Component Specific Actions (CSA)

Following actions of the Text component can be controlled using Component-Specific Actions(CSA):

Action
Description
How To Access
setText()Sets the value of the input field.Employ a RunJS query (for e.g.,
await components.text1.setText('this is input text')) or trigger it using an event.
clear()Clears the entered text in the input field.Employ a RunJS query (for e.g.,
await components.text1.clear()) or trigger it using an event.
setVisibility()Sets the visibility of the component.Employ a RunJS query (for e.g.,
await components.text1.setVisibility(false)) or trigger it using an event.
setLoading()Sets the loading state of the component.Employ a RunJS query (for e.g.,
await components.text1.setLoading(true)) or trigger it using an event.
setDisable()Disables the component.Employ a RunJS query (for e.g.,
await components.text1.setDisable(true)) or trigger it using an event.
info

Check the component specific actions available for this component here.

Exposed Variables

Variable
Description
How To Access
textHolds the value of the component's label.Accessible dynamically with JS (for e.g., {{components.text1.text}}).
isLoadingIndicates if the component is loading.Accessible dynamically with JS (for e.g., {{components.text1.isLoading}}).
isVisibleIndicates if the component is visible.Accessible dynamically with JS (for e.g., {{components.text1.isVisible}}).
isDisabledIndicates if the component is disabled.Accessible dynamically with JS (for e.g., {{components.text1.isDisabled}}).

Additional Actions

Action
Description
Configuration Options
Loading stateEnables a loading spinner, often used with isLoading to indicate progress. Toggle or set dynamically.Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
VisibilityControls component visibility. Toggle or set dynamically.Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
DisableEnables or disables the component. Toggle or set dynamically.Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
TooltipProvides additional information on hover. Set a string value for display.String (e.g., Enter your name here. ).

Devices

Show on desktop

Makes the component visible in desktop view. You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.

Show on mobile

Makes the component visible in mobile view. You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.


Styles

Text

Text PropertyDescriptionConfiguration Options
SizeDimensions of the characters in a font.Enter any number between 1-100 or dynamically configure it using fx.
WeightDetermines how bold or light your text will appear.Select from light, regular, semi-bold or bold or dynamically configure it using fx.
StyleAllows you to apply styles like italic or normal, altering the overall look of the text content.Select from normal, italic or oblique or dynamically configure it using fx.
ColorSets the color of the text.Choose a color using the color picker or dynamically configure it using fx.
ScrollCreates a scroll bar if the text exceeds the component's dimensions.Choose between enable or disable or dynamically configure it using fx.
Line HeightDetermines the vertical space between lines of text within an element.Enter a number as the value (example: 1.5) or dynamically configure it using fx.
Text IndentCommonly used to create an indentation effect.Enter a number as the value (example: 10) or dynamically configure it using fx.
AlignmentSets the alignment of the text.Select the available options to align the text vertically or horizontally or dynamically configure it using fx.
Text DecorationAdds an underline, overline, line-through, or a combination of lines to selected text.Select one of the available options - none(default), underline, overline, and strike-through or dynamically configure it using fx.
TransformationDictates the capitalization of text.Select one of the available options - none (default), uppercase, lowercase, capitalize or dynamically configure it using fx.
Letter spacingDetermines the space between each letter.Enter a number as the value (example: 15) or dynamically configure it using fx.
Word spacingDetermines the space between each word.Enter a number as the value (example: 15) or dynamically configure it using fx.
Font variantAdjusts the text appearance by applying font variations.Select one of the available options - normal, inherit, small-caps, initial or dynamically configure it using fx.

Container

Field Property
Description
Configuration Options
BackgroundSets the background color of the component.Select the color or click on fx and input code that programmatically returns a Hex color code.
BorderSets the border color of the component.Select the color or click on fx and input code that programmatically returns a Hex color code.
Border radiusModifies the border radius of the component.Enter a number or click on fx and enter a code that programmatically returns a numeric value.
Box shadowSets the box shadow properties of the component.Select the box shadow color and adjust the related properties or programmatically set it using fx.
PaddingAdds padding to the componentSelect None for no padding and Default for standard padding.