<Form />

The Form component extends Base UI's Form. It coordinates validation across multiple form controls like Field, Checkbox, and CheckboxGroup. The Form validates all fields before calling onFormSubmit.

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;

Form with client-side validation

Use the validate prop on Field.Root to define custom validation rules. Set validationMode to control when validation runs: "onBlur" validates when the field loses focus, "onChange" validates on every keystroke.

Combining client-side validation and server errors

Client-side validation (via the validate prop) provides instant feedback, while server-side validation catches issues that can only be verified remotely, like checking if a code is valid.

Pass server errors to the errors prop on Form as an object mapping field names to error messages. Field.Error automatically displays both client-side and server errors.

Using with Zod

If you use Zod for validation, define your schema with custom error messages, then use safeParse and error.flatten() to convert validation errors into the format expected by Form's errors prop.

Integrating with other form libraries

Base UI can also integrate with TanStack Form and React Hook Form if you prefer to use these libraries to manage your form states.