Formisch

https://formisch.dev/solid/guides/
Admin
Formisch is a schema-based, headless form library for SolidJS that manages form state and validation...
Tokens:13,099
Snippets:100
Trust Score:4.8
Update:11 months ago
Show doc for...
Tokens:
Raw
### Import Formisch in JavaScript/TypeScript

Source: https://formisch.dev/solid/guides/installation

Demonstrates how to import Formisch into a JavaScript or TypeScript file after installation.

```typescript
import { … } from '@formisch/solid';
```

--------------------------------

### Install Formisch Package

Source: https://formisch.dev/solid/guides/installation

Installs the Formisch package for your project using various package managers. Commands are provided for npm, yarn, pnpm, bun, and deno.

```bash
npm install @formisch/solid     # npm
yarn add @formisch/solid        # yarn
pnpm add @formisch/solid        # pnpm
bun add @formisch/solid         # bun
deno add npm:@formisch/solid    # deno
```

--------------------------------

### Install Valibot Schema Validation Library

Source: https://formisch.dev/solid/guides/installation

Installs the Valibot library, a peer dependency for Formisch used for schema-based validation. Commands are provided for npm, yarn, pnpm, bun, and deno.

```bash
npm install valibot     # npm
yarn add valibot        # yarn
pnpm add valibot        # pnpm
bun add valibot         # bun
deno add npm:valibot    # deno
```

--------------------------------

### Formisch Method Examples (TSX)

Source: https://formisch.dev/solid/guides/form-methods

Demonstrates common Formisch methods for interacting with form state, such as getting input values, resetting the form with initial values, and manipulating array fields. These examples showcase the consistent API pattern where the form store is the first argument.

```tsx
import { getInput, reset, move } from '@formisch/core';

// Assume loginForm is your Formisch form store

// Get the value of a field
const emailInput = getInput(loginForm, { path: ['email'] });

// Reset the form with new initial values
reset(loginForm, { initialInput: { email: '', password: '' } });

// Move an item in a field array
move(loginForm, { path: ['items'], from: 0, to: 3 });
```

--------------------------------

### Handle Single File Input with Solid.js

Source: https://formisch.dev/solid/guides/special-inputs

This example shows how to integrate a single file input using the HTML `<input type="file" />` element within a Solid.js form. The file selected by the user will be accessible via the form state. It uses the `<Field>` component for binding.

```tsx
<Field of={form} path={['avatar']}>
  {(field) => <input {...field.props} type="file" accept="image/*" />}
</Field>
```

--------------------------------

### Create a Basic Form with `createForm` in Solid

Source: https://formisch.dev/solid/guides/create-your-form

Initializes a form store using the `createForm` primitive, defining the form's structure and validation rules with a Valibot schema. This is the foundational step for building interactive forms in Solid applications.

```tsx
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>;
}
```

--------------------------------

### Insert Item into Field Array with Formisch

Source: https://formisch.dev/solid/guides/field-arrays

Shows how to add a new item to a field array using the `insert` method from Formisch. This example demonstrates dynamically adding a new todo item with initial empty values to the 'todos' array via a button click.

```tsx
import { insert } from '@formisch/solid';

<button
  type="button"
  onClick={() =>
    insert(todoForm, {
      path: ['todos'],
      initialInput: { label: '', deadline: '' },
    })
  }
>
  Add Todo
</button>
```

--------------------------------

### Configure `createForm` with Options in Solid

Source: https://formisch.dev/solid/guides/create-your-form

Demonstrates using `createForm` with advanced configuration options, including setting `initialInput` values, specifying when validation occurs (`validate`), and when revalidation happens after initial validation (`revalidate`). This allows for more control over form behavior and state management.

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

--------------------------------

### Enable Strict Mode in tsconfig.json

Source: https://formisch.dev/solid/guides/installation

Enables strict mode in TypeScript's tsconfig.json file. This is recommended for Formisch to ensure correct type calculations. The minimum required TypeScript version is v5.0.2.

```json
{
  "compilerOptions": {
    "strict": true
    // ...
  }
}
```

--------------------------------

### Nested Field Arrays in SolidJS

Source: https://formisch.dev/solid/guides/field-arrays

Demonstrates how to manage deeply nested arrays of form fields in SolidJS using Formisch. The path array syntax allows for straightforward nesting by extending the path with additional array indices. This example shows a schema with categories, each containing items.

```tsx
const NestedSchema = v.object({
  categories: v.array(
    v.object({
      name: v.string(),
      items: v.array(
        v.object({
          title: v.string(),
        })
      ),
    })
  ),
});

<FieldArray of={form} path={['categories']}>
  {(categoryArray) => (
    <For each={categoryArray.items}>
      {(_, getCategoryIndex) => (
        <div>
          <Field of={form} path={['categories', getCategoryIndex(), 'name']}>
            {(field) => <input {...field.props} value={field.input ?? ''} />}
          </Field>

          <FieldArray
            of={form}
            path={['categories', getCategoryIndex(), 'items']}
          >
            {(itemArray) => (
              <For each={itemArray.items}>
                {(_, getItemIndex) => (
                  <Field
                    of={form}
                    path={[
                      'categories',
                      getCategoryIndex(),
                      'items',
                      getItemIndex(),
                      'title',
                    ]} 
                  >
                    {(field) => (
                      <input {...field.props} value={field.input ?? ''} />
                    )}
                  </Field>
                )}
              </For>
            )}
          </FieldArray>
        </div>
      )}
    </For>
  )}
</FieldArray>
```

--------------------------------

### Handle Multiple Checkbox Array Input with Solid.js

Source: https://formisch.dev/solid/guides/special-inputs

This example shows how to use multiple checkboxes to manage an array of strings in a Solid.js form. Each checkbox has a 'value' attribute, and its 'checked' state is determined by whether that value is included in the form's array input. It iterates over options using `<For>`.

```tsx
<For
  each={[
    { label: 'Bananas', value: 'bananas' },
    { label: 'Apples', value: 'apples' },
    { label: 'Grapes', value: 'grapes' },
  ]}>
  {({ label, value }) => (
    <Field of={form} path={['fruits']}>
      {(field) => (
        <label>
          <input
            {...field.props}
            type="checkbox"
            value={value}
            checked={field.input?.includes(value)}
          />
          {label}
        </label>
      )}
    </Field>
  )}
</For>
```

--------------------------------

### Refactor Form Field with Custom TextInput Component

Source: https://formisch.dev/solid/guides/input-components

Demonstrates how to integrate a custom TextInput component into a SolidJS form, replacing verbose input field markup. This example shows the simplified usage of the `TextInput` component, passing form field properties and error states directly, leading to cleaner and more maintainable form code.

```tsx
import { Field } from '@solidjs/meta'; // Assuming Field is from a form library

// Assuming loginForm and TextInput are defined elsewhere

<Field of={loginForm} path={['email']}>
  {(field) => (
    <TextInput
      {...field.props}
      type="email"
      label="Email"
      input={field.input}
      errors={field.errors}
      required
    />
  )}
</Field>

```

--------------------------------

### Manage Multiple Forms on a Page with `createForm` in Solid

Source: https://formisch.dev/solid/guides/create-your-form

Illustrates how to manage multiple independent forms within a single Solid component by creating separate form stores using `createForm` for each distinct form. This approach ensures that each form maintains its own state and validation logic.

```tsx
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>
    </>
  );
}
```

--------------------------------

### Controlled Text Input Example (SolidJS)

Source: https://formisch.dev/solid/guides/controlled-fields

Demonstrates how to control a text input field by binding its 'value' attribute to the field's state. This is useful for dynamic updates or setting initial values. It handles undefined input by defaulting to an empty string.

```tsx
<Field of={loginForm} path={['firstName']}>
  {(field) => (
    <input
      {...field.props}
      type="text"
      // Pass value or empty string
      value={field.input ?? ''}
    />
  )}
</Field>
```

--------------------------------

### Complete SolidJS TextInput Component Implementation

Source: https://formisch.dev/solid/guides/input-components

Provides the full source code for a reusable TextInput component in SolidJS. This includes the TypeScript props definition, the component function utilizing `splitProps`, and the JSX rendering logic for labels, input fields, and error messages, suitable for integration into forms.

```tsx
import { JSX, splitProps } from 'solid-js';

type TextInputProps = {
  name: string;
  type: 'text' | 'email' | 'tel' | 'password' | 'url' | 'date';
  label?: string;
  placeholder?: string;
  input: string | undefined;
  errors: [string, ...string[]] | null;
  required?: boolean;
  ref: (element: HTMLInputElement) => void;
  onFocus: JSX.EventHandler<HTMLInputElement, FocusEvent>;
  onInput: JSX.EventHandler<HTMLInputElement, InputEvent>;
  onChange: JSX.EventHandler<HTMLInputElement, Event>;
  onBlur: JSX.EventHandler<HTMLInputElement, FocusEvent>;
};

export function TextInput(props: TextInputProps) {
  const [, inputProps] = splitProps(props, ['input', 'label', 'errors']);
  return (
    <div>
      {props.label && (
        <label for={props.name}>
          {props.label} {props.required && <span>*</span>}
        </label>
      )}
      <input
        {...inputProps}
        id={props.name}
        value={props.input ?? ''}
        aria-invalid={!!props.errors}
        aria-errormessage={`${props.name}-error`}
      />
      {props.errors && <div id={`${props.name}-error`}>{props.errors[0]}</div>}
    </div>
  );
}

```

--------------------------------

### Field Array Validation with Valibot in SolidJS

Source: https://formisch.dev/solid/guides/field-arrays

Shows how to apply validation rules to field arrays in SolidJS forms using Valibot. This example defines a schema for todos, enforcing minimum and maximum lengths for the array using `v.minLength` and `v.maxLength`. Validation errors for the array are accessible via `fieldArray.errors`.

```tsx
const TodoFormSchema = v.object({
  todos: v.pipe(
    v.array(
      v.object({
        label: v.string(),
        deadline: v.string(),
      })
    ),
    v.minLength(1),
    v.maxLength(10)
  ),
});
```

--------------------------------

### Handle Multiple File Input with Solid.js

Source: https://formisch.dev/solid/guides/special-inputs

This snippet demonstrates handling multiple file uploads in a Solid.js form using the 'multiple' attribute on the file input element. Users can select multiple files, and the form state will contain a list of these files. It utilizes the `<Field>` component for integration.

```tsx
<Field of={form} path={['documents']}>
  {(field) => <input {...field.props} type="file" multiple />}
</Field>
```

--------------------------------

### Create SolidJS TextInput Component Function

Source: https://formisch.dev/solid/guides/input-components

Implements the core logic for the TextInput component in SolidJS. It utilizes the `splitProps` utility to efficiently separate props intended for the underlying HTML input element from props managed by the component itself, such as label and error display.

```tsx
import { JSX, splitProps } from 'solid-js';

type TextInputProps = {
  /* ... */
};

export function TextInput(props: TextInputProps) {
  const [, inputProps] = splitProps(props, ['input', 'label', 'errors']);
  // Component logic continues here...
}

```

--------------------------------

### Handle Multiple Select Input with Solid.js

Source: https://formisch.dev/solid/guides/special-inputs

This snippet demonstrates how to implement a multi-select dropdown in Solid.js, allowing users to choose multiple options. The 'multiple' attribute is added to the select element, and the form state will store an array of the selected values. It uses `<Field>` and `<For>` for rendering options.

```tsx
<Field of={form} path={['frameworks']}>
  {(field) => (
    <select {...field.props} multiple>
      <For
        each={[ 
          { label: 'Preact', value: 'preact' },
          { label: 'Solid', value: 'solid' },
          { label: 'Qwik', value: 'qwik' },
        ]}>
        {({ label, value }) => (
          <option value={value} selected={field.input?.includes(value)}>
            {label}
          </option>
        )}
      </For>
    </select>
  )}
</Field>
```

--------------------------------

### Remove Item from Field Array with Formisch

Source: https://formisch.dev/solid/guides/field-arrays

Illustrates how to remove an item from a field array using the `remove` method from Formisch. This example shows a button that, when clicked, removes the corresponding todo item from the 'todos' array based on its index.

```tsx
import { remove } from '@formisch/solid';

<button
  type="button"
  onClick={() =>
    remove(todoForm, {
      path: ['todos'],
      at: getIndex(),
    })
  }
>
  Delete
</button>
```

--------------------------------

### Define Todo Form Schema with Valibot

Source: https://formisch.dev/solid/guides/field-arrays

Defines the validation schema for a todo form using Valibot. It includes a heading and an array of todos, each with a label and deadline. The array has constraints for non-empty content and a maximum length of 10.

```tsx
import * as v from 'valibot';

const TodoFormSchema = v.object({
  heading: v.pipe(v.string(), v.nonEmpty()),
  todos: v.pipe(
    v.array(
      v.object({
        label: v.pipe(v.string(), v.nonEmpty()),
        deadline: v.pipe(v.string(), v.nonEmpty()),
      })
    ),
    v.nonEmpty(),
    v.maxLength(10)
  ),
});
```

--------------------------------

### Handle Checkbox Boolean Input with Solid.js

Source: https://formisch.dev/solid/guides/special-inputs

This snippet demonstrates how to bind a single HTML checkbox to a boolean value in a Solid.js form. The input is considered 'true' when checked and 'false' otherwise. It uses the `<Field>` component for state management.

```tsx
<Field of={form} path={['cookies']}>
  {(field) => (
    <label>
      <input {...field.props} type="checkbox" checked={!!field.input} />
      Yes, I want cookies
    </label>
  )}
</Field>
```

--------------------------------

### Specify nested field path in Field component

Source: https://formisch.dev/solid/guides/add-form-fields

Illustrates how to specify a nested path for a form field within the Field component. This example demonstrates accessing a deeply nested field within a complex schema structure.

```tsx
// For a schema like: v.object({ user: v.object({ email: v.string() }) })
<Field of={form} path={['user', 'email']}>
  {(field) => <input {...field.props} value={field.input} type="email" />}
</Field>
```

--------------------------------

### Render SolidJS TextInput Component JSX

Source: https://formisch.dev/solid/guides/input-components

Constructs the JSX structure for the TextInput component in SolidJS. It conditionally renders a label with a required indicator and the input element, incorporating accessibility attributes like `aria-invalid` and `aria-errormessage`. Error messages are displayed below the input if they exist.

```tsx
import { JSX, splitProps } from 'solid-js';

type TextInputProps = {
  /* ... */
};

export function TextInput(props: TextInputProps) {
  const [, inputProps] = splitProps(props, ['input', 'label', 'errors']);
  return (
    <div>
      {props.label && (
        <label for={props.name}>
          {props.label} {props.required && <span>*</span>}
        </label>
      )}
      <input
        {...inputProps}
        id={props.name}
        value={props.input ?? ''}
        aria-invalid={!!props.errors}
        aria-errormessage={`${props.name}-error`}
      />
      {props.errors && <div id={`${props.name}-error`}>{props.errors[0]}</div>}
    </div>
  );
}

```

--------------------------------

### Define TextInput Component Props in TypeScript

Source: https://formisch.dev/solid/guides/input-components

Defines the TypeScript interface for the TextInput component's properties, specifying types for various attributes like name, type, label, input value, errors, and event handlers. This ensures type safety and clarity for component usage.

```tsx
import { JSX } from 'solid-js';

type TextInputProps = {
  name: string;
  type: 'text' | 'email' | 'tel' | 'password' | 'url' | 'date';
  label?: string;
  placeholder?: string;
  input: string | undefined;
  errors: [string, ...string[]] | null;
  required?: boolean;
  ref: (element: HTMLInputElement) => void;
  onFocus: JSX.EventHandler<HTMLInputElement, FocusEvent>;
  onInput: JSX.EventHandler<HTMLInputElement, InputEvent>;
  onChange: JSX.EventHandler<HTMLInputElement, Event>;
  onBlur: JSX.EventHandler<HTMLInputElement, FocusEvent>;
};

```

--------------------------------

### Create Todo Form with FieldArray in SolidJS

Source: https://formisch.dev/solid/guides/field-arrays

Implements a todo form using Formisch's createForm, Field, and FieldArray components with SolidJS. It renders a heading input and a dynamic list of todo items, each with a label and deadline input. The form uses nested Field components within a FieldArray to manage the dynamic list.

```tsx
import { createForm, Field, FieldArray, Form } from '@formisch/solid';
import { For } from 'solid-js';

export default function TodoPage() {
  const todoForm = createForm({
    schema: TodoFormSchema,
    initialInput: {
      heading: '',
      todos: [{ label: '', deadline: '' }],
    },
  });

  return (
    <Form of={todoForm} onSubmit={(output) => console.log(output)}>
      <Field of={todoForm} path={['heading']}>
        {(field) => (
          <>
            <input {...field.props} value={field.input ?? ''} type="text" />
            {field.errors && <div>{field.errors[0]}</div>}
          </>
        )}
      </Field>

      <FieldArray of={todoForm} path={['todos']}>
        {(fieldArray) => (
          <div>
            <For each={fieldArray.items}>
              {(_, getIndex) => (
                <div>
                  <Field of={todoForm} path={['todos', getIndex(), 'label']}>
                    {(field) => (
                      <>
                        <input
                          {...field.props}
                          value={field.input ?? ''}
                          type="text"
                        />
                        {field.errors && <div>{field.errors[0]}</div>}
                      </>
                    )}
                  </Field>

                  <Field of={todoForm} path={['todos', getIndex(), 'deadline']}>
                    {(field) => (
                      <>
                        <input
                          {...field.props}
                          value={field.input ?? ''}
                          type="date"
                        />
                        {field.errors && <div>{field.errors[0]}</div>}
                      </>
                    )}
                  </Field>
                </div>
              )}
            </For>
            {fieldArray.errors && <div>{fieldArray.errors[0]}</div>}
          </div>
        )}
      </FieldArray>

      <button type="submit">Submit</button>
    </Form>
  );
}
```

--------------------------------

### Handling Input/Output Types with Transformations - TypeScript

Source: https://formisch.dev/solid/guides/typescript

Illustrates how Formisch and Valibot handle forms with transformations, where input and output types differ. This example shows type safety for fields like 'age' (string input, number output) and 'birthDate' (string input, Date output). It uses `@formisch/solid` and `valibot`.

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

const ProfileSchema = v.object({
  age: v.pipe(
    v.string(), // Input type: string (from HTML input)
    v.transform((input) => Number(input)), // Output type: number
    v.number()
  ),
  birthDate: v.pipe(
    v.string(), // Input type: string (ISO date string)
    v.transform((input) => new Date(input)), // Output type: Date
    v.date()
  ),
});

export default function ProfilePage() {
  const profileForm = createForm({
    schema: ProfileSchema,
  });

  return (
    <Form
      of={profileForm}
      onSubmit={(output) => {
        // output is: { age: number; birthDate: Date }
        console.log(output.age); // number
        console.log(output.birthDate); // Date
      }}
    >
      <Field of={profileForm} path={['age']}>
        {(field) => (
          // field.input is string
          <input {...field.props} value={field.input ?? ''} type="text" />
        )}
      </Field>

      <Field of={profileForm} path={['birthDate']}>
        {(field) => (
          // field.input is string
          <input {...field.props} value={field.input ?? ''} type="date" />
        )}
      </Field>

      <button type="submit">Submit</button>
    </Form>
  );
}

```

--------------------------------

### Handle Single Select Input with Solid.js

Source: https://formisch.dev/solid/guides/special-inputs

This code illustrates how to bind an HTML select element to a string value in a Solid.js form. It allows users to choose one option from a predefined list. The selected option's value is stored in the form state. It uses `<Field>` and `<For>` for rendering options.

```tsx
<Field of={form} path={['framework']}>
  {(field) => (
    <select {...field.props}>
      <For
        each={[ 
          { label: 'Preact', value: 'preact' },
          { label: 'Solid', value: 'solid' },
          { label: 'Qwik', value: 'qwik' },
        ]}>
        {({ label, value }) => (
          <option value={value} selected={field.input === value}>
            {label}
          </option>
        )}
      </For>
    </select>
  )}
</Field>
```

--------------------------------

### Replace Item in Solid Array

Source: https://formisch.dev/solid/guides/field-arrays

Replaces an item at a specific index in a SolidJS array managed by Formisch with new data. This is useful for updating individual elements in a list. It takes the form instance, the path to the array, the index ('at') to replace, and the new data ('initialInput').

```tsx
import { replace } from '@formisch/solid';

<button
  type="button"
  onClick={() =>
    replace(todoForm, {
      path: ['todos'],
      at: 0,
      initialInput: {
        label: 'New task',
        deadline: new Date().toISOString().split('T')[0],
      },
    })
  }
>
  Replace first
</button>
```

--------------------------------

### Define Nested Object Schema in Valibot

Source: https://formisch.dev/solid/guides/nested-fields

This snippet demonstrates how to define a nested object structure within a Valibot schema. It groups 'first' and 'last' name fields under a 'name' object, enforcing non-empty strings. This pattern is useful for organizing related form fields.

```tsx
import * as v from 'valibot';

const ContactSchema = v.object({
  name: v.object({
    first: v.pipe(v.string(), v.nonEmpty()),
    last: v.pipe(v.string(), v.nonEmpty()),
  }),
  email: v.pipe(v.string(), v.email()),
  message: v.pipe(v.string(), v.nonEmpty()),
});
```

--------------------------------

### Swap Items in Solid Array

Source: https://formisch.dev/solid/guides/field-arrays

Swaps two items at specified indices within a SolidJS array managed by Formisch. This function is ideal for interactive reordering or comparison of elements. It requires the form instance, the path to the array, and the two indices ('at' and 'and') to be swapped.

```tsx
import { swap } from '@formisch/solid';

<button
  type="button"
  onClick={() =>
    swap(todoForm, {
      path: ['todos'],
      at: 0,
      and: 1,
    })
  }
>
  Swap first two
</button>
```

--------------------------------

### Reference Nested Field with Index in Formisch

Source: https://formisch.dev/solid/guides/field-arrays

Demonstrates how to reference a specific item within a field array using an index. The `path` property combines the array key with the index obtained from the `<For>` component's `getIndex()` function, enabling correct field mapping for dynamic array elements.

```tsx
<Field of={todoForm} path={['todos', getIndex(), 'label']}>
  {(field) => <input {...field.props} value={field.input ?? ''} type="text" />}
</Field>
```

--------------------------------

### Move Item in Solid Array

Source: https://formisch.dev/solid/guides/field-arrays

Moves an item within a SolidJS array managed by Formisch from one index to another. This is useful for reordering list items. It takes the form instance and an options object specifying the path to the array, the source index ('from'), and the destination index ('to').

```tsx
import { move } from '@formisch/solid';

<button
  type="button"
  onClick={() =>
    move(todoForm, {
      path: ['todos'],
      from: 0,
      to: fieldArray.items.length - 1,
    })
  }
>
  Move first to end
</button>
```

--------------------------------

### Access Nested Field Using Path Array

Source: https://formisch.dev/solid/guides/nested-fields

This snippet shows how to reference a nested form field using a path array. The `path` property takes an array of keys representing the nested structure, allowing access to fields like 'first' name within the 'name' object. This is crucial for binding form elements to specific schema properties.

```tsx
<Field of={contactForm} path={['name', 'first']}>
  {(field) => <input {...field.props} value={field.input ?? ''} type="text" />}
</Field>
```

--------------------------------

### Deeply Nested Schema Definition and Access in Valibot

Source: https://formisch.dev/solid/guides/nested-fields

This snippet illustrates defining and accessing deeply nested objects within a Valibot schema. It shows a schema with 'user', 'address', and 'city' nested levels. The corresponding form field access uses an extended path array to pinpoint the 'city' field, enabling granular control over complex data structures.

```tsx
const ProfileSchema = v.object({
  user: v.object({
    address: v.object({
      street: v.string(),
      city: v.string(),
      country: v.string(),
    }),
  }),
});

// Access deeply nested field
<Field of={profileForm} path={['user', 'address', 'city']}>
  {(field) => <input {...field.props} value={field.input ?? ''} type="text" />}
</Field>
```

--------------------------------

### Create a Login Form with Formisch and Valibot in SolidJS

Source: https://formisch.dev/solid/guides/introduction

This snippet demonstrates how to create a login form using Formisch and Valibot in a SolidJS application. It defines a validation schema for email and password, initializes the form using `createForm`, and renders input fields using `<Form />` and `<Field />` components. The `onSubmit` handler logs the form output. Dependencies include `@formisch/solid` and `valibot`.

```tsx
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 LoginPage() {
  const loginForm = createForm({
    schema: LoginSchema,
  });

  return (
    <Form of={loginForm} onSubmit={(output) => console.log(output)}>
      <Field of={loginForm} path={['email']}>
        {(field) => (
          <div>
            <input {...field.props} value={field.input} type="email" />
            {field.errors && <div>{field.errors[0]}</div>}
          </div>
        )}
      </Field>
      <Field of={loginForm} path={['password']}>
        {(field) => (
          <div>
            <input {...field.props} value={field.input} type="password" />
            {field.errors && <div>{field.errors[0]}</div>}
          </div>
        )}
      </Field>
      <button type="submit">Login</button>
    </Form>
  );
}

```

--------------------------------

### Create and Render a Login Form with Formisch and Valibot in SolidJS

Source: https://formisch.dev/solid/guides/index

This snippet demonstrates how to initialize a form using `createForm` with a Valibot schema, and then render it using the `<Form>` component. It shows how to use the `<Field>` component to connect input elements to the form state and handle validation errors. The form submission logs the output to the console.

```typescript
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 LoginPage() {
  const loginForm = createForm({
    schema: LoginSchema,
  });

  return (
    <Form of={loginForm} onSubmit={(output) => console.log(output)}>
      <Field of={loginForm} path={['email']}>
        {(field) => (
          <div>
            <input {...field.props} value={field.input} type="email" />
            {field.errors && <div>{field.errors[0]}</div>}
          </div>
        )}
      </Field>
      <Field of={loginForm} path={['password']}>
        {(field) => (
          <div>
            <input {...field.props} value={field.input} type="password" />
            {field.errors && <div>{field.errors[0]}</div>}
          </div>
        )}
      </Field>
      <button type="submit">Login</button>
    </Form>
  );
}
```

--------------------------------

### Create Form with Valibot Schema - TypeScript

Source: https://formisch.dev/solid/guides/typescript

Demonstrates creating a form using Formisch's `createForm` function with a Valibot schema. It highlights how TypeScript infers the form's structure and provides type-safe access to form data during submission. Dependencies include `@formisch/solid` and `valibot`.

```tsx
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 LoginPage() {
  const loginForm = createForm({
    schema: LoginSchema,
  });

  // TypeScript knows the form structure from the schema
  // loginForm is of type FormStore<typeof LoginSchema>

  return (
    <Form
      of={loginForm}
      onSubmit={(output) => {
        // output is fully typed based on LoginSchema
        console.log(output.email); // ✓ Type-safe
        console.log(output.username); // ✗ TypeScript error
      }}
    >
      {/* Form fields */}
    </Form>
  );
}

```

--------------------------------

### Basic Form Submission Handler in Solid

Source: https://formisch.dev/solid/guides/handle-submission

This snippet demonstrates how to create a basic form submission handler in Solid.js using Formisch. It defines a validation schema with Valibot, creates a form instance, and provides a synchronous handler function to process validated form values. The handler receives the validated values as its argument.

```tsx
import { createForm, Field, Form } from '@formisch/solid';
import type { SubmitHandler } 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,
  });

  const handleSubmit: SubmitHandler<typeof LoginSchema> = (values) => {
    // Process the validated form values
    console.log(values); // { email: string, password: string }
  };

  return (
    <Form of={loginForm} onSubmit={handleSubmit}>
      {/* Form fields will go here */}
    </Form>
  );
}
```

--------------------------------

### Asynchronous Form Submission Handler in Solid

Source: https://formisch.dev/solid/guides/handle-submission

This snippet illustrates how to implement an asynchronous form submission handler in Solid.js with Formisch. The handler function is marked as `async` and performs an API call using `fetch`. It includes basic error handling for the network request and checks the `response.ok` status to determine success or failure.

```tsx
const handleSubmit: SubmitHandler<typeof LoginSchema> = async (values) => {
  try {
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(values),
    });

    if (response.ok) {
      // Handle successful login
      console.log('Login successful!');
    } else {
      // Handle error
      console.error('Login failed');
    }
  } catch (error) {
    console.error('Error during submission:', error);
  }
};
```

--------------------------------

### Type-Safe Form Props - TypeScript

Source: https://formisch.dev/solid/guides/typescript

Shows how to pass a form instance to another component with full type safety using the `FormStore` type from Formisch. This ensures that the receiving component correctly understands the form's structure and can interact with it reliably. Dependencies include `@formisch/solid` and `valibot`.

```tsx
import { createForm, Form, type FormStore } 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 LoginPage() {
  const loginForm = createForm({
    schema: LoginSchema,
  });

  return <FormContent of={loginForm} />; 
}

type FormContentProps = {
  of: FormStore<typeof LoginSchema>;
};

function FormContent(props: FormContentProps) {
  return (
    <Form of={props.of} onSubmit={(output) => console.log(output)}>
      {/* Form fields */}
    </Form>
  );
}

```

--------------------------------

### Create Generic Email Input Component in Solid.js

Source: https://formisch.dev/solid/guides/typescript

This snippet shows how to create a generic `EmailInput` component in Solid.js. It uses Formisch's `useField` hook and Valibot's `GenericSchema` to ensure the form store has a string `email` field. The component handles input, displays errors, and enforces type safety at compile time.

```tsx
import { type FormStore, useField } from '@formisch/solid';
import type { Component } from 'solid-js';
import * as v from 'valibot';

type EmailInputProps = {
  of: FormStore<v.GenericSchema<{ email: string }>>;
};

const EmailInput: Component<EmailInputProps> = (props) => {
  const field = useField(props.of, { path: ['email'] });

  return (
    <div>
      <label>
        Email
        <input {...field.props} value={field.input ?? ''} type="email" />
      </label>
      {field.errors && <div>{field.errors[0]}</div>}
    </div>
  );
};

```

--------------------------------

### Add form fields using Field component in Solid

Source: https://formisch.dev/solid/guides/add-form-fields

Demonstrates adding email and password fields to a form using the Field component in Solid. It connects the input elements to the form store and schema validation provided by Formisch.

```tsx
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}>
      <Field of={loginForm} path={['email']}>
        {(field) => <input {...field.props} value={field.input} type="email" />}
      </Field>
      <Field of={loginForm} path={['password']}>
        {(field) => (
          <input {...field.props} value={field.input} type="password" />
        )}
      </Field>
      <button type="submit">Login</button>
    </Form>
  );
}
```

--------------------------------

### Type-Safe Field Paths in Forms - TypeScript

Source: https://formisch.dev/solid/guides/typescript

Demonstrates how Formisch ensures type safety for field paths within a form structure defined by a Valibot schema. TypeScript provides autocompletion and compile-time error checking for invalid paths, enhancing developer experience. This snippet uses `createForm` and `Field` from `@formisch/solid` and `valibot`.

```tsx
const UserSchema = v.object({
  profile: v.object({
    name: v.object({
      first: v.string(),
      last: v.string(),
    }),
    email: v.string(),
  }),
});

const userForm = createForm({ schema: UserSchema });

// ✓ Valid paths - TypeScript provides autocompletion
<Field of={userForm} path={['profile', 'name', 'first']} />
<Field of={userForm} path={['profile', 'email']} />

// ✗ Invalid paths - TypeScript error
<Field of={userForm} path={['profile', 'age']} />
<Field of={userForm} path={['username']} />

```

--------------------------------

### Displaying Loading State for Form Submission

Source: https://formisch.dev/solid/guides/handle-submission

This code demonstrates how to disable a submit button and display a 'Submitting...' message while the form is being processed. It utilizes the `loginForm.isSubmitting` reactive property provided by Formisch to control the button's disabled state and its text content.

```tsx
<button type="submit" disabled={loginForm.isSubmitting}>
  {loginForm.isSubmitting ? 'Submitting...' : 'Login'}
</button>
```

--------------------------------

### Define Login Form Schema with Valibot

Source: https://formisch.dev/solid/guides/define-your-form

This TypeScript snippet defines a Valibot schema for a login form. It includes an 'email' field with string, non-empty, and email format validation, and a 'password' field with string, non-empty, and minimum length validation. Custom error messages are provided for each validation rule.

```typescript
import * as v from 'valibot';

const LoginSchema = v.object({
  email: v.pipe(
    v.string('Please enter your email.'),
    v.nonEmpty('Please enter your email.'),
    v.email('The email address is badly formatted.')
  ),
  password: v.pipe(
    v.string('Please enter your password.'),
    v.nonEmpty('Please enter your password.'),
    v.minLength(8, 'Your password must have 8 characters or more.')
  ),
});
```

--------------------------------

### Define Profile Form Schema with Optional Field

Source: https://formisch.dev/solid/guides/define-your-form

This TypeScript snippet demonstrates defining a Valibot schema for a profile form, including an optional 'bio' field. The 'name' field is required and must be a non-empty string. The 'bio' field is marked as optional using `v.optional()`, meaning it can be omitted or have an undefined value.

```typescript
import * as v from 'valibot';

const ProfileSchema = v.object({
  name: v.pipe(v.string(), v.nonEmpty()),
  bio: v.optional(v.string()), // <- Optional field
});
```

--------------------------------

### Access field state with useField primitive in Solid

Source: https://formisch.dev/solid/guides/add-form-fields

Shows how to use the useField primitive to access and manage the state of a single form field, specifically an email input, within a custom component. It includes displaying potential errors for the field.

```tsx
import { useField } from '@formisch/solid';
import type { FormStore } from '@formisch/solid';
import * as v from 'valibot';

type EmailInputProps = {
  form: FormStore<v.GenericSchema<{ email: string }>>;
};

function EmailInput(props: EmailInputProps) {
  const field = useField(props.form, { path: ['email'] });

  return (
    <div>
      <input {...field.props} value={field.input} type="email" />
      {field.errors && <div>{field.errors[0]}</div>}
    </div>
  );
}
```

--------------------------------

### Controlled Number Input Component (SolidJS)

Source: https://formisch.dev/solid/guides/controlled-fields

A reusable SolidJS component for controlled number inputs. It handles the conversion of number values to strings for the input element and manages potential NaN values during input, preventing the input from clearing unexpectedly. It includes label, error message display, and standard input event handlers.

```tsx
import { createMemo, JSX, splitProps } from 'solid-js';

type NumberInputProps = {
  name: string;
  type: 'number';
  label?: string;
  placeholder?: string;
  input: number | undefined;
  errors: [string, ...string[]] | null;
  required?: boolean;
  ref: (element: HTMLInputElement) => void;
  onFocus: JSX.EventHandler<HTMLInputElement, FocusEvent>;
  onInput: JSX.EventHandler<HTMLInputElement, InputEvent>;
  onChange: JSX.EventHandler<HTMLInputElement, Event>;
  onBlur: JSX.EventHandler<HTMLInputElement, FocusEvent>;
};

export function NumberInput(props: NumberInputProps) {
  const [, inputProps] = splitProps(props, ['input', 'label', 'errors']);

  // Update memo if value is not `NaN`
  const getValue = createMemo<number | undefined>(
    (prevValue) => (!Number.isNaN(props.input) ? props.input : prevValue),
    undefined
  );

  return (
    <div>
      {props.label && <label for={props.name}>{props.label}</label>}
      <input
        {...inputProps}
        id={props.name}
        value={getValue() ?? ''}
        aria-invalid={!!props.errors}
        aria-errormessage={`${props.name}-error`}
      />
      {props.errors && <div id={`${props.name}-error`}>{props.errors[0]}</div>}
    </div>
  );
}
```

--------------------------------

### Controlled Date Input Component (SolidJS)

Source: https://formisch.dev/solid/guides/controlled-fields

A custom SolidJS component for controlled date inputs. It converts Date objects or numbers representing dates into the 'YYYY-MM-DD' string format required by the date input element. It uses `createMemo` to efficiently update the displayed value and handles cases where the input date is invalid.

```tsx
import { createMemo, JSX, splitProps } from 'solid-js';

type DateInputProps = {
  name: string;
  type: 'date';
  label?: string;
  placeholder?: string;
  input: Date | number | undefined;
  errors: [string, ...string[]] | null;
  required?: boolean;
  ref: (element: HTMLInputElement) => void;
  onFocus: JSX.EventHandler<HTMLInputElement, FocusEvent>;
  onInput: JSX.EventHandler<HTMLInputElement, InputEvent>;
  onChange: JSX.EventHandler<HTMLInputElement, Event>;
  onBlur: JSX.EventHandler<HTMLInputElement, FocusEvent>;
};

export function DateInput(props: DateInputProps) {
  const [, inputProps] = splitProps(props, ['input', 'label', 'errors']);

  // Transform date or number to string
  const getValue = createMemo(() =>
    props.input &&
    !Number.isNaN(
      typeof props.input === 'number' ? props.input : props.input.getTime()
    )
      ? new Date(props.input).toISOString().split('T', 1)[0]
      : ''
  );

  return (
    <div>
      {props.label && <label for={props.name}>{props.name}</label>}
      <input
        {...inputProps}
        id={props.name}
        value={getValue()}
        aria-invalid={!!props.errors}
        aria-errormessage={`${props.name}-error`}
      />
      {props.errors && <div id={`${props.name}-error`}>{props.errors[0]}</div>}
    </div>
  );
}
```
Tokens:
Raw