<Form />

A form with consolidated error handling. The Form component extends Base UI's Form. It validates every Field, Checkbox, and CheckboxGroup before it calls onFormSubmit, and it displays server errors with the errors prop.

Here is the component implementation code that you can copy to your project:

// https://devie-ui.com/components/form
// https://base-ui.com/react/components/form
 
import { Form as BaseForm } from "@base-ui/react/form";
import clsx from "clsx";
import styles from "./Form.module.scss";
 
function Form({ className, ...props }: BaseForm.Props) {
  return <BaseForm className={clsx(styles.form, className)} {...props} />;
}
 
namespace Form {
  export type Props = BaseForm.Props;
  export type State = BaseForm.State;
  export type Values = BaseForm.Values;
  export type SubmitEventDetails = BaseForm.SubmitEventDetails;
}
 
export default Form;

Client-side validation

Pass a validate function to Field.Root. Set validationMode to onBlur or onChange to validate before submit.

Server errors

Pass an object to the errors prop on Form. Keys are field names, values are messages. Field.Error displays server errors together with client errors.

With Zod

Define the Zod schema with custom messages. Call safeParse, then error.flatten() to build the errors object.

Other form libraries

Base UI also documents TanStack Form and React Hook Form.