HTML

Everywhere in the form, we can use HTML to display some information. Everywhere a string is expected, we can use a string containing HTML.

{
  "text": {
    "type": "text",
    "text": "<b>Hello</b>"
  }
}

This will display the text in bold.

{
  "text": {
    "type": "message",
    "text": "<h1>Hello</h1><p>World</p>"
  }
}

This will display a title and a paragraph.

{
  "text": {
    "type": "message",
    "text": "<ul><li>Item 1</li><li>Item 2</li></ul>"
  }
}

This will display a list of items.

{
  "first_name": {
    "component": "text",
    "label": "Please enter your <b>first name</b>"
  }
}

This will display a label with the first name in bold.

{
  "first_name": {
    "label": "First name",
    "component": "text",
    "tooltip": "<ul><li>Item 1</li><li>Item 2</li></ul>"
  }
}

This will display a label with a tooltip that contains a list of items.

Customization

You can use a list of classes to customize the HTML content, those are defined in the Customization section.

Limitations

• The HTML is sanitized, so you can"t use it to inject arbitrary HTML.
• The HTML is rendered in a div, so if you need to display a list of element, you should use a ul or ol HTML tag.
• As it"s strings that are defined in a json, you need to escape the quotes in the HTML, for example " should be replaced by \".

Examples

{
  "html_text_input": {
    "component": "text",
    "tooltip": "<h1>Tooltip inner title</h1><p>subTitle</p><ul><li>item 1</li><li>item 2</li><li>item 3</li></ul>",
    "label": "HTML tooltip input"
  },
  "title": {
    "type": "title",
    "title": "Super title with <u>html elements in it</u>"
  },
  "alert": {
    "type": "message",
    "message": "<h1>Alert message content title</h1><p>subTitle</p><ul><li>item 1</li><li>item 2</li><li>item 3</li></ul>"
  },
  "separator": {
    "type": "text",
    "text": "<hr/>"
  },
  "text": {
    "type": "text",
    "text": "<h1>Text title</h1><p>subTitle</p><ul><li>item 1</li><li>item 2</li><li>item 3</li></ul>"
  },
  "text_with_div": {
    "type": "text",
    "text": "<div class=\"text-center\"><h1>Text with div</h1><p>subTitle with div</p><ul><li>item 1</li><li>item 2</li><li>item 3</li></ul></div>"
  },
  "separator_2": {
    "type": "text",
    "text": "<hr/><br/>"
  },
  "text_with_classname": {
    "type": "text",
    "text": "<h1 class=\"text-center\">Centered Text title</h1><p class=\"text-center\">Centered subTitle</p><p class=\"text-right\">Text aligned right</p>"
  },
  "separator_3": {
    "type": "text",
    "text": "<br/><hr/>"
  },
  "translated_object_text": {
    "type": "text",
    "text": {
      "from": "external_text_with_html_translated"
    }
  },
  "external_html_text": {
    "type": "text",
    "text": {
      "from": "external_html_text"
    }
  }
}

Storybook example

Form HTML#

HTML coming from translations#