Validation
Every Form Kit field validates input before the form submits. Configure rules directly in the Properties Panel — no code, no guesswork.
How validation works
- Select any Form Kit field on your canvas
- Open the Properties Panel (right sidebar)
- Toggle Required, set length limits, or pick a format rule
- Write custom error messages that match your project's voice
- Preview — errors appear in real-time when users leave the field
Validation by field type
Each field type uses rules that make sense for its data. Text fields check character length, number fields check value ranges, and so on.
| Field Type | Available Rules | Notes |
|---|---|---|
| Text, Textarea, Password | required, minLength, maxLength, pattern (regex) | Choose built-in (min/max) OR regex — they're mutually exclusive |
| required, email format | Built-in format check, no regex needed | |
| Phone | required, phone format | Accepts digits, spaces, dashes, parentheses, + |
| URL | required, URL format | Must include protocol (https://) |
| Number | required, min, max | Validates value range, not character length |
| Checkbox, Toggle | required | Required means "must be checked" |
| Checkbox Group | required, minSelected, maxSelected | Enforces selection count range |
| Select, Radio, Button Group | required | Required means "must select an option" |
| Rating | required | 0 = no selection (required works correctly) |
| NPS | required | 0 = no selection |
| Slider | min, max | No "required" — slider always has a value |
| File, Image | required, accept (file type), maxSize (MB) | maxSize is configured in MB (e.g., 5 = 5MB) |
Custom error messages
Every rule has a configurable message. Use {x} to insert the limit value dynamically.
| Message Template | Output |
|---|---|
Minimum {x} characters | "Minimum 3 characters" |
Maximum {x} characters allowed | "Maximum 100 characters allowed" |
Value must be at least {x} | "Value must be at least 0" |
Select at least {min} options | "Select at least 2 options" |
{x} placeholder is replaced at runtime with the actual limit from your property controls. Great for keeping messages in sync with your rules.Built-in vs. custom pattern
Text-based fields (Text, Textarea, Password) offer two validation modes — pick one or the other, not both.
Built-in (Min/Max)
Set minimum and maximum character counts. Ideal for names, messages, and general text fields.
Custom Pattern (Regex)
Enter a regular expression for format validation. Use it for postal codes, IDs, or any structured format.
Success state
When a field passes validation, you can show a success indicator. Configure it in the Properties Panel:
- Show Success — toggle the success state on or off
- Success Message — text shown below the field (e.g., "Looks good!")
- Success Icon — checkmark icon inside the input
- Success Styles — custom border color, text color, and icon color
Hidden and disabled fields
Fields that are conditionally hidden or disabled automatically skip validation. A required field won't block submission if it's not visible or interactive. See