Basic

Most basic usage is one without validators. Formeus will handle updates and return the latest values.

Initialize the form by passing your form initial values to the initial argument.

ℹ️

initial property can either be a static object, or a reactive primitive in libraries like Vue, Solid and Svelte.

Use the values object to read the latest form values and set them to their respective fields. This signifies that the values object expects a controlled UI component.

import { useForm } from "@formeus/react"
 
function SignIn() {
  const { values, update } = useForm({
    initial: {
      username: "",
      password: "",
    },
  })
 
  function onSubmit() {
    api.signIn(values.username, values.password)
  }
 
  return (
    <>
      <input
        value={values.username}
        onChange={(e) => update("username", e.target.value)}
      />
      <input
        value={values.password}
        onChange={(e) => update("password", e.target.value)}
      />
      <button onClick={() => onSumbit()}>Submit</button>
    </>
  )
}

ℹ️

Currently, Formeus doesn't support isolated re-renders. So each field update effectively causes complete re-render down the component hierarchy.

This is an expected drawback for controlled form fields where state needs to be hoisted up.

Validator functions Validation