Skip to main content
Version: Next

Quick start 🚀

For people in a hurry

1. Install formulaik and a component library

npm install @formulaik/react @formulaik-community/react-mui

2. Define inputs

const inputs = [
  {
    component: 'input',
    id: 'email',
    label: 'Email',
    type: "string",
    params: {
      type: 'email',
      placeholder: "email@domain.com"
    },
    validations: [
      {
        kind: "format",
        value: "email",
        message: 'Invalid email format',
      },
      {
        kind: "required",
        value: true,
        message: "This field can't be blank",
      },
    ],
  },
  {
    component: 'inputPassword',
    label: 'Password',
    id: 'password',
    type: "string",
    params: {
      type: 'password',
      autoComplete: "current-password",
      placeholder: "xxxx-xxxx-xxxx"
    },
    validations: [
      {
        kind: "matches",
        value: /^(?=.*d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/,
        message: 'Invalid password, must contain at least 8 characters and at most 18 characters',
      },
      {
        kind: "required",
        value: true,
        message: "This field can't be blank",
      },
    ]
  },
  {
    component: 'submit',
    params: {
      text: 'Continue'
    }
  },
]

3. Provide initial values (optional)

const values = {
    email: cookies.get('email'),
}

4. Render forms and handle submit

import Formulaik from '@formulaik/react'
import FormulaikMui from '@formulaik-community/react-mui'

export default (props) => {
  
 const onSubmit = async (values) => {
    const { email, password } = values
    try { 
      await myapi.submit({ email, password })
    }
    catch(e) {
      throw (new Error('Could not sign in: ', e.message))
    }
    return { message: t("Email validated") }  
  }

  return <>      
      <h3>Login</h3>            
      <Formulaik
        components={[FormulaikMui]}
        values={values}        
        inputs={inputs}
        onSubmit={onSubmit}
         />      
    </>
}