Create your form

Formisch consists of primitives, components and methods. To create a form you use the createForm primitive.

Form primitive

The createForm primitive initializes and returns the store of your form. The store contains the state of the form and can be used with other Formisch primitives, components and methods to build your form.

import { createForm, Field, Form } from '@formisch/solid';
import * as v from 'valibot';

const LoginSchema = v.object({
  email: v.pipe(v.string(), v.email()),
  password: v.pipe(v.string(), v.minLength(8)),
});

export default function App() {
  const loginForm = createForm({
    schema: LoginSchema,
  });

  return <Form of={loginForm}>{/* Form fields will go here */}</Form>;
}

Configuration options

The createForm primitive accepts a configuration object with the following options:

schema: Your Valibot schema that defines the form
initialInput: Initial values for your form fields (optional)
validate: When validation first occurs (optional, defaults to 'submit')
revalidate: When revalidation occurs after initial validation (optional, defaults to 'input')

const loginForm = createForm({
  schema: LoginSchema,
  initialInput: {
    email: 'user@example.com',
  },
  validate: 'initial',
  revalidate: 'input',
});

Multiple forms

When a page contains multiple forms, you can create separate form stores for each one:

import { createForm, Form } from '@formisch/solid';
import * as v from 'valibot';

const LoginSchema = v.object({
  email: v.pipe(v.string(), v.email()),
  password: v.pipe(v.string(), v.minLength(8)),
});

const RegisterSchema = v.object({
  username: v.pipe(v.string(), v.minLength(3)),
  email: v.pipe(v.string(), v.email()),
  password: v.pipe(v.string(), v.minLength(8)),
});

export default function App() {
  const loginForm = createForm({ schema: LoginSchema });
  const registerForm = createForm({ schema: RegisterSchema });

  return (
    <>
      <Form of={loginForm}>{/* … */}</Form>
      <Form of={registerForm}>{/* … */}</Form>
    </>
  );
}

Next steps

Now that you know how to create a form, continue to the add form fields guide to learn how to connect your input elements to the form using the Field component.