Frigade Forms supports validation of form fields. You can use the validation property on any field in the multiInput form type to validate any input. Frigade uses Zod for validation and error handling and thus the Frigade YAML schema follows the same API.


The following example config.yml contains two fields: a number field and a username field. Both have custom validation and error handling:

- id: getting-started
  title: Getting Started
  subtitle: Let's collect some info
  type: multiInput
  primaryButtonTitle: Continue
    - id: age
      type: text
      title: Age
      required: true
         type: number
         requiredError: Age is required
         invalidTypeError: Age must be a number
          - requirement: positive
            message: Age must be a number
          - requirement: min
            value: 18
            message: Sorry, you must be over 18 to use Frigade
    - id: username
      type: text
      title: Username
      required: true
         type: string
         requiredError: Username is required
         invalidTypeError: Username must be a string
          - requirement: min
            value: 6
            message: Your username must be at least 6 characters
          - requirement: max
            value: 14
            message: Your username must be at max 14 characters
          - requirement: regex
            value: "^(?=[a-zA-Z0-9._]{8,20}$)(?!.*[_.]{2})[^_.].*[^_.]$"
            message: Your username is not valid

The corresponding frontend code looks like this using the <FrigadeForm /> component:

import { FrigadeForm } from '@frigade/react'

function App() {
  return (

Putting it all together, this will render as follows:

Input validation using Frigade Forms