Appearance
Text Component
A text input component for string values. When you see "kind": "text" in a component, it represents a text input field that can be single-line or multi-line, with optional validation rules.
Understanding Text Component Fields
When reading a text component in the schema, you'll see these fields:
| Field | Type | Required | Description |
|---|---|---|---|
id | string | Yes | Unique identifier for this text field |
kind | string | Yes | Always "text" for text components |
metadata | object | No | Component-specific metadata |
metadata.multiline | boolean | No | If true, renders as multi-line textarea |
rules | object | No | Validation rules that apply to this field |
rules.required | boolean | No | If true, the field must be provided |
rules.minLength | number | No | Minimum number of characters required |
rules.maxLength | number | No | Maximum number of characters allowed |
Reading Metadata
metadata.multiline
- What it means: When
true, the field should be rendered as a multi-line textarea instead of a single-line input - Default:
false(single-line input) - When you see it: Usually present for description fields, bio fields, or notes
Understanding Validation Rules
rules.required
- What it means: If
true, the user must provide a value for this field. Validation will fail if the field is empty ornull - How to use: Check this value to determine if the field is mandatory in forms
rules.minLength
- What it means: The minimum number of characters the user must enter
- How to use: Use this value to set minimum length validation in your form inputs
- Example: If
minLength: 2, the input must have at least 2 characters
rules.maxLength
- What it means: The maximum number of characters allowed
- How to use: Use this value to set maximum length validation and character counters
- Example: If
maxLength: 50, the input cannot exceed 50 characters
Example: Reading a Text Component
Here's an example text component from a schema:
json
{
"id": "name",
"kind": "text",
"rules": {
"required": true
},
"lockedAfterEdit": true
}What this tells you:
- Field ID is
"name"- use this to reference the field - It's a text input (single-line, since
multilineis not specified) - Field is required (
required: true) - Field is locked after first edit (
lockedAfterEdit: true)
Example: Multi-line Text Component
json
{
"id": "bio",
"kind": "text",
"rules": {
"minLength": 5,
"maxLength": 200
},
"metadata": {
"multiline": true
}
}What this tells you:
- Field ID is
"bio" - It's a multi-line textarea (
multiline: true) - Field is optional (no
requiredrule) - Must be between 5 and 200 characters