Section
The Text component can be used in any form to provide a text field. It can be used for single-line text input fields.
Schema
[
{
"name": "source-details",
"meta": {
"className": "source-details-section",
"displayType": "section",
"displayName": "Create source",
"description": "Enter the details below to create a new source.",
"htmlProps": {
"divider": true,
"headerVariant": "h5",
"subHeaderVariant": "h6",
"description": "This is section description"
},
"children": [
{
"name": "meta.name",
"meta": {
"displayName": "Source",
"displayType": "text",
"placeholder": "Enter Source name",
"description": "Enter the name you want to show in stage",
"validation": {
"max": 60,
"required": true
},
"htmlProps": {
"allowDynamic": true
}
}
},
{
"name": "meta.password",
"meta": {
"displayName": "Password",
"displayType": "password",
"placeholder": "Enter password",
"validation": {
"max": 180,
"required": true
}
}
}
]
}
}
]
Example
Form Data:
{}Props
name
This field should be a unique string.
meta object
The meta object contains properties that define the display characteristics and behavior of the section.
| Name | Description | Type |
|---|---|---|
displayName | The name to display as the section header | string |
children | An array of child fields to render within the section | IField[] |
htmlProps | Additional HTML properties for the section | object |
displayType | "section" to indicate this controls a Section | String |
htmlProps Keys Documentation
The htmlProps object contains HTML-specific properties that can modify the appearance and functionality of a section. Below are the keys typically used within htmlProps:
| Key | Description | Type | Default Value |
|---|---|---|---|
divider | Whether to show a divider below the header | boolean | false |
headerVariant | Typography variant for the header | string | "h3" |
subHeaderVariant | Typography variant for the sub-header | string | "h5" |
description | Additional description text below the header | string | null |
allowDynamic | Allow dynamic content or features within the field | boolean | false |
Example JSON
Section Without Divider
[
{
"name": "source-details",
"meta": {
"className": "source-details-section",
"displayType": "section",
"displayName": "Create source",
"description": "Enter the details below to create a new source.",
"htmlProps": {
"divider": false
},
"children": [
{
"name": "meta.name",
"meta": {
"displayName": "Integration name",
"displayType": "text",
"placeholder": "Enter integration name",
"validation": {
"required": true
}
}
}
]
}
}
]
Section With Custom Typography
[
{
"name": "source-details",
"meta": {
"className": "source-details-section",
"displayType": "section",
"displayName": "Create source",
"description": "Enter the details below to create a new source.",
"htmlProps": {
"headerVariant": "title-md", // typography variant
"subHeaderVariant": "body-sm"
},
"children": [
{
"name": "meta.name",
"meta": {
"displayName": "Integration name",
"displayType": "text",
"placeholder": "Enter integration name",
"validation": {
"max": 60,
"required": true
}
}
}
]
}
}
]
Section Without Sub-Header
[
{
"name": "source-details",
"meta": {
"className": "source-details-section",
"displayType": "section",
"displayName": "Create source",
"htmlProps": {
"headerVariant": "title-md", // typography variant
"subHeaderVariant": "body-sm"
},
"children": [
{
"name": "meta.name",
"meta": {
"displayName": "Integration name",
"displayType": "text",
"placeholder": "Enter integration name",
"validation": {
"max": 60,
"required": true
}
}
}
]
}
}
]
Section With dependencies
[
{
"name": "subscribed_at",
"meta": {
"displayName": "Subscribed At",
"displayType": "datetime",
"placeholder": "Enter the subscribed date",
"description": "Must be a valid date in the format yyyy-MM-dd HH:mm:ss.",
"validation": {
"required": false
},
"htmlProps": {
"format": "YYYY-MM-DD",
"views": ["year", "month", "day", "hours", "minutes", "seconds"]
}
}
},
{
"name": "source-details",
"meta": {
"className": "source-details-section",
"displayType": "section",
"displayName": "Create source",
"description": "Enter the details below to create a new source.",
"htmlProps": {
"headerVariant": "title-md",
"subHeaderVariant": "body-sm"
},
"dependencies": {
"logic": "OR",
"conditions": [
{
"field": "subscribed_at",
"value": "2024-10-01",
"operator": "EQUALS"
},
{
"field": "subscribed_at",
"value": "2024-10-02",
"operator": "EQUALS"
}
]
},
"children": [
{
"name": "meta.name",
"meta": {
"displayName": "Integration name",
"displayType": "text",
"placeholder": "Enter integration name",
"validation": {
"max": 60,
"required": true
}
}
}
]
}
}
]
with 1st condition
with 2nd condition
