Basic Form

<RavenForm> is the main component for rendering a single-page form from a schema.

Minimal Example

Preview

First Name*

Last Name*

Email*

Code

import { RavenForm } from "raven-form-engine";
import type { FormSchema } from "raven-form-engine";

const schema: FormSchema = {
  fields: [
    {
      name: "firstName",
      type: "text",
      label: "First Name",
      validation: { required: "First name is required" },
      colSpan: 6,
    },
    {
      name: "lastName",
      type: "text",
      label: "Last Name",
      validation: { required: "Last name is required" },
      colSpan: 6,
    },
    {
      name: "email",
      type: "email",
      label: "Email",
      validation: { required: "Email is required" },
      colSpan: 12,
    },
  ],
};

export function MyForm() {
  return (
    <RavenForm
      schema={schema}
      onSubmit={(values) => console.log(values)}
      submitLabel="Submit"
    />
  );
}

---

RavenForm Props

Prop	Type	Description
schema	FormSchema	Required. The field definitions
onSubmit	(values) => void | Promise<void>	Required. Submit handler
defaultValues	Record<string, unknown>	Pre-fill form values
adapter	FormAdapter	Override the global form adapter
ui	UIAdapter	Override the global UI adapter
submitLabel	string	Label for the submit button
showReset	boolean	Show the reset button
showStateInspector	boolean	Show inline state inspector (dev only)
className	string	CSS class for the form element

---

Default Values

Preview

Full Name

Email

RoleSelect…AdminEditorViewer

Code

<RavenForm
  schema={schema}
  defaultValues={{
    name: "Jane Doe",
    email: "jane@example.com",
    role: "editor",
  }}
  onSubmit={handleSubmit}
  submitLabel="Save"
  showReset
/>

---

Conditional Fields

hidden and disabled accept a static boolean or a function of form values:

Preview

I have a promo code

Promo Code

In RavenForm this field is hidden until the checkbox is checked via: hidden: (values) => !values.hasPromo

Code

{
  name: 'promoCode',
  type: 'text',
  label: 'Promo Code',
  hidden: (values) => !values.hasPromo,
  dependsOn: ['hasPromo'],
}

tip

Add field names to dependsOn so the engine knows which fields to watch when re-evaluating hidden / disabled functions.

---

Inline State Inspector

Preview

Username

Active

🐛 Form State Inspector

{
  "values": {
    "username": "",
    "active": false
  },
  "errors": {},
  "touched": {}
}

Code

<RavenForm schema={schema} onSubmit={handleSubmit} showStateInspector />