Rich Text
A WYSIWYG editor for collecting formatted text with headings, lists, and inline styles.
Overview
The Rich Text field embeds a WYSIWYG (What You See Is What You Get) editor, allowing respondents to compose formatted content with headings, bold/italic text, numbered and bulleted lists, hyperlinks, and more. The value is stored as an HTML string.
Warning: Rich Text values are stored as raw HTML. When rendering submission data, always sanitize the HTML before displaying it to prevent XSS attacks.
The editor toolbar can be configured to show only the formatting options relevant to your use case. For example, a feedback form might only need bold, italic, and bullet lists, while a content submission form might need the full toolbar.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| type | string | — | The field type identifier (e.g. "text", "email"). |
| label | string | — | Human-readable label shown above the field. |
| name | string | — | Unique machine name used as the data key in submissions. |
| required | boolean | false | When true the form cannot be submitted without a value. |
| placeholder | string | undefined | Ghost text shown inside the input when empty. |
| defaultValue | any | undefined | Pre-filled value when the form loads. |
| hidden | boolean | false | Hides the field from the rendered form (still submitted). |
| disabled | boolean | false | Renders the field as read-only and non-interactive. |
| description | string | undefined | Helper text displayed below the field label. |
| className | string | undefined | Additional CSS class applied to the field wrapper. |
| toolbar | string[] | "full" | Array of toolbar items: "bold","italic","link","ul","ol","h2","h3". |
| minHeight | number | 150 | Minimum editor height in pixels. |
| validation.minLength | number | undefined | Minimum character count (excluding HTML tags). |
| validation.maxLength | number | undefined | Maximum character count (excluding HTML tags). |
JSON Schema
{
"type": "rich-text",
"label": "Project Description",
"name": "project_description",
"required": true,
"placeholder": "Describe your project in detail...",
"minHeight": 200,
"toolbar": ["bold", "italic", "ul", "ol", "link"],
"validation": {
"minLength": 50,
"maxLength": 2000
}
}