Text Input
freeSingle-line text input with minLength/maxLength and regex pattern validation.
Overview
The Text Input is your go-to field for collecting names, titles, addresses, and any single-line text data. It supports both built-in validation (min/max character length) and custom regex pattern validation, with configurable error and success messages.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
name | String | "name" | Field name used in form data submission. Use camelCase or snake_case. |
label | String | "Name" | Label displayed above the input field. |
placeholder | String | "Enter the name" | Placeholder text shown when the field is empty. |
required | Boolean | false | Whether the field must be filled before submission. |
validationType | Enum | "built-in" | Choose between "Built-in (Min/Max)" character validation or "Custom Pattern (Regex)" — mutually exclusive. |
minLength | Number | -- | Minimum character count. Shown when validation type is built-in. |
maxLength | Number | -- | Maximum character count. Shown when validation type is built-in. |
pattern | String | -- | Custom regex pattern. Shown when validation type is pattern. |
Features
- Built-in or regex pattern validation (mutually exclusive)
- Custom error messages with {x} placeholder for limits
- Success state with configurable message and icon
- Browser autofill styling override (preserves your colors)
- Conditional show/hide/enable/disable via rules
- Focus styles (separate background, border, shadow)
Tips
Use built-in validation for simple length limits, and regex for formats like postal codes or custom IDs.
Set both minLength and maxLength to enforce an exact length (e.g., 5 and 5 for ZIP codes).
The {x} placeholder in error messages is replaced with the actual limit value.
Validation
This component uses text validation. See the Validation Guide for details on configuring rules and error messages.