Skip to main content
Version: 0.46

Text

The Text component is responsible for displaying text content on a form. Text components can vary in complexity and functionality, and they are a fundamental part of building user interfaces.

Image

Properties

The following properties are available to configure the behavior of the component from the form editor (this is in addition to common properties).

Common

Type string

Select the HTML element type:

  • Span (default): Inline text.
  • Paragraph: Paragraph block.
  • Title: Heading style.

Content Display object

Controls the text source:

  • Content (default): Manual text.
  • Property name: Dynamically fetch text from the property.

Data Type object

Specify the data format:

  • String (default)
  • Date Time
  • Number
  • Boolean

Date Format string

The format string used to display the value. Only appears when Data Type is Date Time.

Number Format object

Controls how a numeric value is formatted. Only appears when Data Type is Number.

OptionDescription
CurrencyFormats the value as currency.
DoubleFormats the value as a decimal number.
RoundRounds the value to a whole number.
Thousand separatorAdds thousand separators without changing decimal places.

Content string

The static text content to display. Hidden when Content Display is set to Property name.

Italic boolean

Renders the text in italics if enabled.

Code boolean

Styles the text to look like code, using a monospace font.

Strikethrough boolean

Applies a line through the text for a strikethrough effect.

Underline boolean

Adds an underline to the text for emphasis.

Ellipsis boolean

Truncate overflowing text with an ellipsis (...).

Mark boolean

Highlights the text with a background color (like a marker).

Keyboard boolean

Styles the text to represent keyboard input (e.g., <kbd> styling).

Copyable boolean

Allows users to easily copy the text by clicking an icon or button.


Appearance

Font object

Typography for the text - Family, Weight, Colour, and Align.

The Size field is replaced by a Level dropdown (H1-H5) whenever Type is set to Title, so a title's size is chosen as a heading level instead of a raw font size.

Content Type object

Defines the tone or theme of the text:

  • Default (default)
  • Primary
  • Secondary
  • Success
  • Warning
  • Info
  • Error
  • Custom Color

Custom Color string

The colour used for the text. Only appears when Content Type is set to Custom Color.