Skip to main content

Text

{
  "text": {
    "type": "text",
    "text": "Simple text"
  }
}

With that, the string Simple text will be displayed in the form. The text property accepts either a string or an object that defines where the text comes from.

{
  "text": {
    "type": "text",
    "text": {
      "from": "external_text"
    }
  }
}

In this example, when the form will be rendered, the value of the external_text property in the store context will be displayed.

Text styles​

We can customize the style of the text by adding a textStyles property to the text. It accepts multiple styles, highlight, delete, underline, small, bold, italic. All styles can be combined, so the textStyles property takes an array of styles. A styles for a textStyle can be either a string or an object. If it is a string, it will be the name of the style, if it is an object, it will be the name of the style and the conditions that will apply the style.

{
  "text": {
    "type": "text",
    "text": "Simple text",
    "textStyles": ["bold"]
  }
}

This will show the Simple text in bold

"text_with_style_condition": {
  "type": "text",
  "text": "Text with condition on styles",
  "textStyles": [
    {
      "style": "highlight",
      "condition": {
        "property": "set_highlight",
        "assertion": "isTrue"
      }
    },
    {
      "style": "small",
      "condition": [
        {
          "property": "small_check_1",
          "assertion": "isTrue"
        },
        {
          "property": "small_check_2",
          "assertion": "isTrue"
        }
      ]
    }
  ]
}

This example will show the text in highlight if the set_highlight property is true, and will show the text in small if both small_check_1 and small_check_2 are true.

Text tooltips​

A text can also have a tooltip like defined in the tooltip section.

{
  "text": {
    "type": "text",
    "text": "Simple text",
    "tooltip": "This is a tooltip"
  }
}

Formats​

A text can be formatted in order to display the value as it should be. The text type takes a format property that will format the value. The formats can be either date or price. The date format will display the value as a date, the price format will display the value as a price.

Available formats are:​

FormatDescription
dateDisplay the value as a date
priceDisplay the value as a price
rawDisplay the value as is
kw_powerDisplay the value as a power in kW with autmatic conversion to HP
format[.XXX]Display the value formated as described in the []
{
  "text": {
    "type": "text",
    "text": "2024-01-14",
    "format": "date"
  }
}

Will displays 14/01/2024

{
  "text": {
    "type": "text",
    "text": "1000",
    "format": "price"
  }
}

Will displays 1 000,00 €

{
  "text": {
    "type": "text",
    "text": "100",
    "format": "kw_power"
  }
}

Will displays 100 kW / 134 CV

Colors​

We also can add a color to the text. The color can be defined in the color property. It accepts any color from this list primary, secondary, success, danger, warning, info, dark, muted.

{
  "text": {
    "type": "text",
    "text": "Text in red",
    "color": "danger"
  }
}

Conditionnal color​

We also can set a color the text based on data in the form, that allows the form to attract the user to some text or data.

"conditional_colored_text": {
  "type": "text",
  "text": "Conditional colored text",
  "color": {
    "color": "warning",
    "conditions": [
      {
        "property": "warning_color",
        "assertion": "isTrue"
      }
    ]
  }
}

This example will display the text in yellow if the warning_color property is true.

tip

You can define multiple colors on the same text. color accepts an array of colors with their respective conditions. Note that as a color should be unique, if you define multiple colors, the last one will be used.

{
  "conditional_colored_text": {
    "type": "text",
    "text": "Conditional colored text",
    "color": [
      {
        "color": "warning",
        "conditions": [
          {
            "property": "text_color",
            "assertion": "equal",
            "value": "warning"
          }
        ]
      },
      {
        "color": "danger",
        "conditions": [
          {
            "property": "text_color",
            "assertion": "equal",
            "value": "danger"
          }
        ]
      },
      {
        "color": "success",
        "conditions": [
          {
            "property": "text_color",
            "assertion": "equal",
            "value": "success"
          }
        ]
      }
    ]
  }
}

Form Text With Multiple Colors#

Size​

The size of the text can be defined in the size property. It accepts from h1 to h6 size.

{
  "text": {
    "type": "text",
    "text": "Text in h1 html tag",
    "size": "h1"
  }
}

URL​

We also can set an url to the text. The url can be defined in the link property. It accepts an object that takes an url and a target property. The target defines how the link will be opened, it can be _blank or _self. The url property accepts either an url or an object that defines where the url comes from.

{
  "simple_link": {
    "type": "text",
    "text": "This is a link to google",
    "link": {
      "target": "_blank",
      "url": "https://google.com"
    }
  }
}

This will add a link to google in the text.

{
  "link_from_store_context": {
    "type": "text",
    "text": "This is a link from store context",
    "link": {
      "target": "_blank",
      "url": {
        "from": "external_link"
      }
    }
  }
}

This will add a link to the value of the external_link property in the store context.

Visible conditions​

The text accepts any visible condition like any other field.

{
  "text": {
    "type": "text",
    "text": "This text will be displayed only if the `show_text` property is true",
    "visible": [
      {
        "property": "show_text",
        "assertion": "isTrue"
      }
    ]
  }
}

Storybook example​

Form Text#

Form Text With Conditions#

Form Text With Store Context#

Can Handle Translation Object For Keys#

Form Text Format#