Skip to main content
CYPEX Documentation
    Support
    v2.0.0 Latest stable release View changelog ->
    1. CYPEX — PostgreSQL Application Platform
    2. /
    3. Element Dictionary
    4. /
    5. Various
    6. /
    7. Text Field
    Various Referencegenerated

    Text Field

    Show unformatted text

    Technical id
    default_text_field

    A styleable text block supporting dynamic expressions, full color palettes (text and background), filled/outlined color variants, typography variants (h1-h6, subtitle, body, caption), and layout controls like rounded corners and line wrapping.

    When to use

    • Displaying dynamic text content that requires rich typography styling, background color variants, rounded corners, or line wrapping settings.
    • Rendering headlines, subtitles, badges, callouts, or stat labels with explicit horizontal and vertical alignment controls.

    What you need

    • Dynamic text strings, localized text values, or calculated expression outputs requiring custom presentation styling.

    Examples

    • An outlined status banner displaying a dynamic string expression with rounded corners and centered alignment.
    • A prominent section header styled as an ‘h1’ typography font variant with custom primary background highlights.

    Avoid

    • Using for long-form prose with rich markdown formatting like bullet lists or code blocks, use the markdown_field component instead.
    • Using for simple card metric containers, use the data_display component instead.

    Use instead

    • Markdown Text — The text content contains rich prose, bullet lists, markdown code blocks, or inline formatting tags.
    • Data Display — Displaying simple informational card views or basic data values without extensive typography or background color controls.

    Editor properties

    Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

    Text
    TextrequiredCustom expression
    A custom expression textbox expecting a text string. Defaults to ‘Text field’.
    Example 'Text field'
    Default: buildCustomExpressionValue('"Text field"')
    Colors
    ColoroptionalOne of: primary, secondary, success, error, warning, info, default, lighter, disabled, white, black (or not set)
    Dropdown defining the text color token.
    Choices
    • primary — Theme default branding blue color (#007bff).
    • secondary — Muted branding slate gray color (#6c757d).
    • success — Standard transactional green color (#28a745).
    • error — Severe action warning red color (#dc3545).
    • warning — Cautionary yellow color (#ffc107).
    • info — Informing teal/light blue color (#17a2b8).
    • default — Dark charcoal text color (#343a40).
    • lighter
    • disabled — Non-interactive gray color (#adb5bd).
    • white — Plain white color (#ffffff).
    • black — Plain black color (#000000).
    Default: none
    BackgroundoptionalOne of: primary, secondary, success, error, warning, info, default, lighter, disabled, white, black (or not set)
    Dropdown defining the background container color token.
    Choices
    • primary — Theme default branding blue color (#007bff).
    • secondary — Muted branding slate gray color (#6c757d).
    • success — Standard transactional green color (#28a745).
    • error — Severe action warning red color (#dc3545).
    • warning — Cautionary yellow color (#ffc107).
    • info — Informing teal/light blue color (#17a2b8).
    • default — Dark charcoal text color (#343a40).
    • lighter
    • disabled — Non-interactive gray color (#adb5bd).
    • white — Plain white color (#ffffff).
    • black — Plain black color (#000000).
    Default: none
    Alignment
    Horizontal AlignmentoptionalOne of: start, center, end
    Selection button choice for horizontal text alignment.
    Choices
    • start
    • center — Centers text horizontally.
    • end
    Default: none
    Vertical AlignmentoptionalOne of: start, center, end
    Selection button choice for vertical text alignment.
    Choices
    • start
    • center — Centers text vertically.
    • end
    Default: none
    Styles
    VariantoptionalOne of: outlined, filled
    Radio selector choosing between Filled (colored background with white text) and Outlined (white background with colored text).
    Choices
    • outlined
    • filled
    Default: none
    Fit ContentoptionalYes / no
    Boolean switch enabling vertical scroll when active, revealing fit content sizing options.
    Default: none
    RoundedoptionalYes / no
    Boolean switch applying rounded corners to the container frame.
    Default: none
    WrapoptionalYes / no
    Boolean switch enabling horizontal scrolling when line wrapping is toggled off.
    Default: none
    Font VariantoptionalOne of: h1, h2, h3, h4, h5, h6, subtitle1, subtitle2, body1, body2, caption, button, overline
    Dropdown defining the typography scale and semantic font level.
    Choices
    • h1 — Header level 1 typography scale.
    • h2 — Header level 2 typography scale.
    • h3 — Header level 3 typography scale.
    • h4 — Header level 4 typography scale.
    • h5 — Header level 5 typography scale.
    • h6 — Header level 6 typography scale.
    • subtitle1 — Primary subtitle typography scale.
    • subtitle2 — Secondary subtitle typography scale.
    • body1 — Standard body prose scale.
    • body2
    • caption — Small caption typography scale.
    • button — Button label typography scale.
    • overline — Small uppercase overline typography scale.
    Default: none
    SizeoptionalOne of: small, medium
    Configuration for size.
    Choices
    • small
    • medium
    Default: none

    Sizing

    • No size of its own: dropped at the platform default of 1 × 1 grid cells and resized on the page.

    Accessibility

    Renders semantic typography tags corresponding to font variants (e.g. <h1>-<h6>, <p>). Ensures contrast levels meet WCAG rules across filled and outlined color modes.

    Where you can place it

    Drag this element into one of these containers:

    1
2
3
4
5

    {
  "config": {
    "text": "@@expression:'value'"
  }
}

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

    {
  "config": {
    "text": "@@expression:'value'",
    "verticalAlignment": "start",
    "horizontalAlignment": "start",
    "color": "primary",
    "background": "primary",
    "rounded": false,
    "fitContent": false,
    "size": "small",
    "variant": "outlined",
    "fontVariant": "h1",
    "wrap": false,
    "labelMap": {
      "exampleKey": "value"
    }
  }
}

    Ready-made setups

    Configures a prominent header with primary background coloring, centered alignment, rounded corners, and an h2 typography scale.

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

    {
  "config": {
    "text": {
      "textExpression": "@@expression: 'System Status Overview'"
    },
    "colors": {
      "textColor": "primary",
      "backgroundColor": "light"
    },
    "alignment": {
      "horizontalAlignment": "center",
      "verticalAlignment": "center"
    },
    "styles": {
      "colorVariant": "Filled",
      "fitContent": false,
      "roundedCorners": true,
      "wrapLines": true,
      "fontVariant": "h2"
    }
  }
}