Login Form#

A minimal form with two fields, basic validation, and a submit handler. This is the starting point — every other example builds on this pattern.

#Preview & Code

import Form from "./form.setup";

type LoginData = {
  username: string;
  password: string;
};

function LoginForm() {
  return (
    <Form<LoginData>
      config={{
        username: {
          type: "text",
          label: "Username",
          rules: {
            required: "Username is required",
          },
        },
        password: {
          type: "text",
          label: "Password",
          props: { type: "password" },
          rules: {
            required: "Password is required",
            minLength: {
              value: 6,
              message: "Password must be at least 6 characters",
            },
          },
        },
      }}
      onSubmit={(data) => {
        alert(JSON.stringify(data, null, 2));
      }}
    >
      <button type="submit">Log in</button>
    </Form>
  );
}

export default LoginForm;

#How it works

Form<LoginData> — the generic parameter binds the config to the data model. TypeScript will error if a field key doesn't exist on LoginData, or if type doesn't match the registered fieldMapping.

rules — standard RHF validation rules. Errors are resolved to errorMessage inside the field component automatically.

props: { type: 'password' } — extra props passed directly to InputField. BlueForm enforces at compile time that these match the component's declared prop types.

onSubmit — called only when validation passes. data is typed as LoginData.

No useForm, no Controller, no register — the engine handles all RHF wiring. The form is described entirely as configuration.