# Formisch

The modular and type-safe form library for any framework.

## Hooks

### useForm

Creates a reactive form store from a form configuration. The form store manages form state and provides reactive properties.

```ts
const form = useForm<TSchema>(config);
```

#### Generics

- `TSchema` <Property {...properties.TSchema} />

#### Parameters

- `config` <Property {...properties.config} />

##### Explanation

`useForm` creates a reactive form store that manages form state using the provided Valibot schema. Validation runs when a field is blurred or the form is submitted by default, but this can be customized with the `validate` and `revalidate` options.

#### Returns

- `form` <Property {...properties.FormStore} />

#### Related

The following APIs can be combined with `useForm`.

##### Hooks

<ApiList
  items={[
    { text: 'useField', href: '../useField/' },
    { text: 'useFieldArray', href: '../useFieldArray/' },
  ]}
/>

##### Components

<ApiList
  items={[
    { text: 'Field', href: '../Field/' },
    { text: 'FieldArray', href: '../FieldArray/' },
    { text: 'Form', href: '../Form/' },
  ]}
/>

##### Methods

<ApiList
  items={[
    { text: 'focus', href: '/methods/api/focus/' },
    { text: 'getAllErrors', href: '/methods/api/getAllErrors/' },
    { text: 'getErrors', href: '/methods/api/getErrors/' },
    { text: 'getInput', href: '/methods/api/getInput/' },
    { text: 'handleSubmit', href: '/methods/api/handleSubmit/' },
    { text: 'insert', href: '/methods/api/insert/' },
    { text: 'move', href: '/methods/api/move/' },
    { text: 'remove', href: '/methods/api/remove/' },
    { text: 'replace', href: '/methods/api/replace/' },
    { text: 'reset', href: '/methods/api/reset/' },
    { text: 'setErrors', href: '/methods/api/setErrors/' },
    { text: 'setInput', href: '/methods/api/setInput/' },
    { text: 'submit', href: '/methods/api/submit/' },
    { text: 'swap', href: '/methods/api/swap/' },
    { text: 'validate', href: '/methods/api/validate/' },
  ]}
/>

### useField

Creates a reactive field store of a specific field within a form store.

```ts
const field = useField<TSchema, TFieldPath>(form, config);
```

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldPath` <Property {...properties.TFieldPath} />

#### Parameters

- `form` <Property {...properties.form} />
- `config` <Property {...properties.config} />

##### Explanation

With `useField` you create a reactive field store for a specific field path within your form. The field store provides reactive access to the field's input value, validation errors, touched state, and more. It also includes a `props` object that you can spread onto an HTML input or textarea element to automatically handle user interactions like focus, blur, and input events.

#### Returns

- `field` <Property {...properties.FieldStore} />

#### Related

The following APIs can be combined with `useField`.

##### Hooks

<ApiList
  items={[
    { text: 'useForm', href: '../useForm/' },
    { text: 'useFieldArray', href: '../useFieldArray/' },
  ]}
/>

##### Components

<ApiList
  items={[
    { text: 'Field', href: '../Field/' },
    { text: 'FieldArray', href: '../FieldArray/' },
    { text: 'Form', href: '../Form/' },
  ]}
/>

##### Methods

<ApiList
  items={[
    { text: 'focus', href: '/methods/api/focus/' },
    { text: 'getErrors', href: '/methods/api/getErrors/' },
    { text: 'getInput', href: '/methods/api/getInput/' },
    { text: 'setErrors', href: '/methods/api/setErrors/' },
    { text: 'setInput', href: '/methods/api/setInput/' },
    { text: 'validate', href: '/methods/api/validate/' },
  ]}
/>

### useFieldArray

Creates a reactive field array store of a specific field array within a form store.

```ts
const fieldArray = useFieldArray<TSchema, TFieldArrayPath>(form, config);
```

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldArrayPath` <Property {...properties.TFieldArrayPath} />

#### Parameters

- `form` <Property {...properties.form} />
- `config` <Property {...properties.config} />

##### Explanation

With `useFieldArray` you create a reactive field array store for a specific array field within your form. The field array store provides reactive access to the array items (by their IDs), validation errors, touched state, and more. This is particularly useful when working with dynamic arrays of fields that users can add or remove.

#### Returns

- `fieldArray` <Property {...properties.FieldArrayStore} />

#### Related

The following APIs can be combined with `useFieldArray`.

##### Hooks

<ApiList
  items={[
    { text: 'useForm', href: '../useForm/' },
    { text: 'useField', href: '../useField/' },
  ]}
/>

##### Components

<ApiList
  items={[
    { text: 'Field', href: '../Field/' },
    { text: 'FieldArray', href: '../FieldArray/' },
    { text: 'Form', href: '../Form/' },
  ]}
/>

##### Methods

<ApiList
  items={[
    { text: 'focus', href: '/methods/api/focus/' },
    { text: 'getAllErrors', href: '/methods/api/getAllErrors/' },
    { text: 'getErrors', href: '/methods/api/getErrors/' },
    { text: 'getInput', href: '/methods/api/getInput/' },
    { text: 'insert', href: '/methods/api/insert/' },
    { text: 'move', href: '/methods/api/move/' },
    { text: 'remove', href: '/methods/api/remove/' },
    { text: 'replace', href: '/methods/api/replace/' },
    { text: 'reset', href: '/methods/api/reset/' },
    { text: 'setErrors', href: '/methods/api/setErrors/' },
    { text: 'setInput', href: '/methods/api/setInput/' },
    { text: 'swap', href: '/methods/api/swap/' },
    { text: 'validate', href: '/methods/api/validate/' },
  ]}
/>

## Components

### Form

Form component that manages form submission and applies internal state. Wraps form element and passes submission events to the provided handler.

```tsx
<Form of={…} onSubmit={…}>children</Form>
```

#### Generics

- `TSchema` <Property {...properties.TSchema} />

#### Properties

- `of` <Property {...properties.of} />
- `children` <Property {...properties.children} />
- `onSubmit` <Property {...properties.onSubmit} />

##### Explanation

The `Form` component wraps a native HTML `<form>` element and provides form submission handling. It automatically prevents the default form submission behavior and calls the `onSubmit` handler when the form is submitted and validation succeeds.

The component uses the `of` prop to reference the form store and renders the `children` elements within the form. It also sets `novalidate` on the form element to disable browser validation, as Formisch handles validation internally.

#### Related

##### Hooks

<ApiList items={[{ text: 'useForm', href: '../useForm/' }]} />

##### Components

<ApiList
  items={[
    { text: 'Field', href: '../Field/' },
    { text: 'FieldArray', href: '../FieldArray/' },
  ]}
/>

##### Methods

<ApiList
  items={[
    { text: 'focus', href: '/methods/api/focus/' },
    { text: 'getAllErrors', href: '/methods/api/getAllErrors/' },
    { text: 'getErrors', href: '/methods/api/getErrors/' },
    { text: 'handleSubmit', href: '/methods/api/handleSubmit/' },
    { text: 'reset', href: '/methods/api/reset/' },
    { text: 'setErrors', href: '/methods/api/setErrors/' },
    { text: 'setInput', href: '/methods/api/setInput/' },
    { text: 'submit', href: '/methods/api/submit/' },
    { text: 'validate', href: '/methods/api/validate/' },
  ]}
/>

### Field

Headless form field component that provides reactive properties and state. The field component takes a form store, path to field, and a render function that receives a field store to display field state and handle user interactions.

```tsx
<Field of={…} path={…}>children</Field>
```

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldPath` <Property {...properties.TFieldPath} />

#### Properties

- `of` <Property {...properties.of} />
- `path` <Property {...properties.path} />
- `children` <Property {...properties.children} />

##### Explanation

The `Field` component is a headless component that doesn't render any UI itself. Instead, it provides a render prop function via the `children` prop that receives a <Link href="../FieldStore/">`FieldStore`</Link> containing all the reactive state and props needed to render a form field.

The component automatically handles field registration, validation, and state management through the `of` prop that references the form store.

#### Related

##### Hooks

<ApiList
  items={[
    { text: 'useForm', href: '../useForm/' },
    { text: 'useField', href: '../useField/' },
  ]}
/>

##### Components

<ApiList
  items={[
    { text: 'Form', href: '../Form/' },
    { text: 'FieldArray', href: '../FieldArray/' },
  ]}
/>

### FieldArray

Headless field array component that provides reactive properties and state for managing array fields. The field array component takes a form store, path to array field, and a render function that receives a field array store to manage array items and handle array operations.

```tsx
<FieldArray of={…} path={…}>children</FieldArray>
```

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldArrayPath` <Property {...properties.TFieldArrayPath} />

#### Properties

- `of` <Property {...properties.of} />
- `path` <Property {...properties.path} />
- `children` <Property {...properties.children} />

##### Explanation

The `FieldArray` component is a headless component that doesn't render any UI itself. Instead, it provides a render prop function via the `children` prop that receives a <Link href="../FieldArrayStore/">`FieldArrayStore`</Link> containing all the reactive state and methods needed to manage an array of form fields.

The component automatically handles array field registration, validation, and state management through the `of` prop that references the form store.

#### Related

##### Hooks

<ApiList
  items={[
    { text: 'useForm', href: '../useForm/' },
    { text: 'useFieldArray', href: '../useFieldArray/' },
  ]}
/>

##### Components

<ApiList
  items={[
    { text: 'Field', href: '../Field/' },
    { text: 'Form', href: '../Form/' },
  ]}
/>

##### Methods

<ApiList
  items={[
    { text: 'insert', href: '/methods/api/insert/' },
    { text: 'move', href: '/methods/api/move/' },
    { text: 'remove', href: '/methods/api/remove/' },
    { text: 'replace', href: '/methods/api/replace/' },
    { text: 'swap', href: '/methods/api/swap/' },
  ]}
/>

## Methods

### focus

Focuses the first input element of a field. This is useful for programmatically setting focus to a specific field, such as after validation errors or user interactions.

```ts
focus<TSchema, TFieldPath>(form, config);
```

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldPath` <Property {...properties.TFieldPath} />

#### Parameters

- `form` <Property {...properties.form} />
- `config` <Property {...properties.config} />

##### Explanation

The `form` parameter is the form store containing the field to focus. The `config` parameter specifies which field to focus using the `path` property, and can optionally include additional focus options.

#### Related

##### Primitives

<ApiList
  items={[
    { text: 'createForm', href: '/solid/api/createForm/' },
  ]}
/>

##### Methods

<ApiList
  items={[
    { text: 'validate', href: '../validate/' },
    { text: 'setErrors', href: '../setErrors/' },
  ]}
/>

### getAllErrors

Retrieves all error messages from all fields in the form by walking through the entire field store tree. This is useful for displaying a summary of all validation errors across the form.

```ts
const errors = getAllErrors(form);
```

#### Parameters

- `form` <Property {...properties.form} />

##### Explanation

The `form` parameter is the form store to retrieve errors from. The function walks through the entire field store tree to collect all validation error messages from every field.

#### Returns

- `result` <Property {...properties.result} />

#### Related

##### Primitives

<ApiList
  items={[
    { text: 'createForm', href: '/solid/api/createForm/' },
  ]}
/>

##### Methods

<ApiList
  items={[
    { text: 'getErrors', href: '../getErrors/' },
    { text: 'validate', href: '../validate/' },
    { text: 'setErrors', href: '../setErrors/' },
  ]}
/>

### getErrors

Retrieves error messages from the form. When called without a config, returns form-level errors. When called with a path, returns errors for that specific field.

```ts
const errors = getErrors<TSchema>(form);
const errors = getErrors<TSchema, TFieldPath>(form, config);
```

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldPath` <Property {...properties.TFieldPath} />

#### Parameters

- `form` <Property {...properties.form} />
- `config` <Property {...properties.config} />

##### Explanation

The `form` parameter is the form store to retrieve errors from. The optional `config` parameter specifies which errors to retrieve - either form-level errors (when omitted) or field-specific errors (when a `path` is provided).

#### Returns

- `result` <Property {...properties.result} />

#### Related

##### Primitives

<ApiList items={[{ text: 'createForm', href: '/solid/api/createForm/' }]} />

##### Methods

<ApiList
  items={[
    { text: 'getAllErrors', href: '../getAllErrors/' },
    { text: 'setErrors', href: '../setErrors/' },
    { text: 'validate', href: '../validate/' },
  ]}
/>

### getInput

Retrieves the current input value of a specific field or the entire form. Returns a partial object as not all fields may have been set.

```ts
const input = getInput<TSchema>(form);
const input = getInput<TSchema, TFieldPath>(form, config);
```

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldPath` <Property {...properties.TFieldPath} />

#### Parameters

- `form` <Property {...properties.form} />
- `config` <Property {...properties.config} />

##### Explanation

The `form` parameter is the form store to retrieve input from. The optional `config` parameter specifies which field to get input from - if omitted, returns input from the entire form.

#### Returns

- `result` <Property {...properties.result} />

#### Related

##### Primitives

<ApiList items={[{ text: 'createForm', href: '/solid/api/createForm/' }]} />

##### Methods

<ApiList
  items={[
    { text: 'setInput', href: '../setInput/' },
    { text: 'reset', href: '../reset/' },
  ]}
/>

### handleSubmit

Creates a submit event handler for the form that prevents default browser submission, validates the form input, and calls the provided handler if validation succeeds. This is designed to be used with the form's onsubmit event.

```ts
const result = handleSubmit<TSchema>(form, handler);
```

#### Generics

- `TSchema` <Property {...properties.TSchema} />

#### Parameters

- `form` <Property {...properties.form} />
- `handler` <Property {...properties.handler} />

##### Explanation

The `form` parameter is the form store to handle submission for. The `handler` parameter is the submit handler function that gets called with the validated form output if validation succeeds.

#### Returns

- `result` <Property {...properties.result} />

#### Related

##### Primitives

<ApiList
  items={[
    { text: 'createForm', href: '/solid/api/createForm/' },
  ]}
/>

##### Methods

<ApiList
  items={[
    { text: 'validate', href: '../validate/' },
    { text: 'focus', href: '../focus/' },
    { text: 'submit', href: '../submit/' },
  ]}
/>

### insert

Inserts a new item into a field array at the specified index. All items at or after the insertion point are shifted up by one index.

```ts
insert<TSchema, TFieldArrayPath>(form, config);
```

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldArrayPath` <Property {...properties.TFieldArrayPath} />

#### Parameters

- `form` <Property {...properties.form} />
- `config` <Property {...properties.config} />

##### Explanation

The `form` parameter is the form store containing the field array. The `config` parameter specifies the path to the field array, the index where to insert the new item, and optional initial input values for the new item.

#### Related

##### Primitives

<ApiList
  items={[
    { text: 'createForm', href: '/solid/api/createForm/' },
    {
      text: 'useFieldArray',
      href: '/solid/api/useFieldArray/',
    },
  ]}
/>

##### Methods

<ApiList
  items={[
    { text: 'move', href: '../move/' },
    { text: 'remove', href: '../remove/' },
    { text: 'replace', href: '../replace/' },
    { text: 'swap', href: '../swap/' },
  ]}
/>

### move

Moves an item within a field array from one index to another. All items between the old and new positions are shifted accordingly.

```ts
move<TSchema, TFieldArrayPath>(form, config);
```

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldArrayPath` <Property {...properties.TFieldArrayPath} />

#### Parameters

- `form` <Property {...properties.form} />
- `config` <Property {...properties.config} />

##### Explanation

The `form` parameter is the form store containing the field array. The `config` parameter specifies the path to the field array and the indices to move the item from and to.

#### Related

##### Primitives

<ApiList
  items={[
    { text: 'createForm', href: '/solid/api/createForm/' },
    {
      text: 'useFieldArray',
      href: '/solid/api/useFieldArray/',
    },
  ]}
/>

##### Methods

<ApiList
  items={[
    { text: 'insert', href: '../insert/' },
    { text: 'remove', href: '../remove/' },
    { text: 'replace', href: '../replace/' },
    { text: 'swap', href: '../swap/' },
  ]}
/>

### remove

Removes an item from a field array at the specified index. All items after the removed index are shifted down by one.

```ts
remove<TSchema, TFieldArrayPath>(form, config);
```

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldArrayPath` <Property {...properties.TFieldArrayPath} />

#### Parameters

- `form` <Property {...properties.form} />
- `config` <Property {...properties.config} />

##### Explanation

The `form` parameter is the form store containing the field array. The `config` parameter specifies the path to the field array and the index of the item to remove.

#### Related

##### Primitives

<ApiList
  items={[
    { text: 'createForm', href: '/solid/api/createForm/' },
    {
      text: 'useFieldArray',
      href: '/solid/api/useFieldArray/',
    },
  ]}
/>

##### Methods

<ApiList
  items={[
    { text: 'insert', href: '../insert/' },
    { text: 'move', href: '../move/' },
    { text: 'replace', href: '../replace/' },
    { text: 'swap', href: '../swap/' },
  ]}
/>

### replace

Replaces an item in a field array at the specified index with a new item.

```ts
replace<TSchema, TFieldArrayPath>(form, config);
```

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldArrayPath` <Property {...properties.TFieldArrayPath} />

#### Parameters

- `form` <Property {...properties.form} />
- `config` <Property {...properties.config} />

##### Explanation

The `form` parameter is the form store containing the field array. The `config` parameter specifies the path to the field array, the index of the item to replace, and the new item values.

#### Related

##### Primitives

<ApiList
  items={[
    { text: 'createForm', href: '/solid/api/createForm/' },
    {
      text: 'useFieldArray',
      href: '/solid/api/useFieldArray/',
    },
  ]}
/>

##### Methods

<ApiList
  items={[
    { text: 'insert', href: '../insert/' },
    { text: 'move', href: '../move/' },
    { text: 'remove', href: '../remove/' },
    { text: 'swap', href: '../swap/' },
  ]}
/>

### reset

Resets the form or a specific field to its initial state. Optionally keeps certain states like input values, touched state, or errors.

```ts
reset(form);
reset<TSchema, TFieldPath>(form, config);
```

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldPath` <Property {...properties.TFieldPath} />

#### Parameters

- `form` <Property {...properties.form} />
- `config` <Property {...properties.config} />

##### Explanation

The `form` parameter is the form store to reset. The optional `config` parameter specifies which field to reset (or the entire form if omitted) and which states to preserve during the reset.

#### Related

##### Primitives

<ApiList items={[{ text: 'createForm', href: '/solid/api/createForm/' }]} />

##### Methods

<ApiList
  items={[
    { text: 'setInput', href: '../setInput/' },
    { text: 'getInput', href: '../getInput/' },
    { text: 'setErrors', href: '../setErrors/' },
    { text: 'validate', href: '../validate/' },
  ]}
/>

### setErrors

Sets or clears error messages on the form or a specific field. This is useful for setting custom validation errors that don't come from schema validation.

```ts
setErrors<TSchema, TFieldPath>(form, config);
```

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldPath` <Property {...properties.TFieldPath} />

#### Parameters

- `form` <Property {...properties.form} />
- `config` <Property {...properties.config} />

##### Explanation

The `form` parameter is the form store to set errors on. The `config` parameter specifies the path and error messages to set, or can be set to null to clear existing errors.

#### Related

##### Primitives

<ApiList items={[{ text: 'createForm', href: '/solid/api/createForm/' }]} />

##### Methods

<ApiList
  items={[
    { text: 'getErrors', href: '../getErrors/' },
    { text: 'getAllErrors', href: '../getAllErrors/' },
    { text: 'validate', href: '../validate/' },
  ]}
/>

### setInput

Sets input values for the form or a specific field programmatically.

```ts
setInput<TSchema>(form, config);
setInput<TSchema, TFieldPath>(form, config);
```

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldPath` <Property {...properties.TFieldPath} />

#### Parameters

- `form` <Property {...properties.form} />
- `config` <Property {...properties.config} />

##### Explanation

The `form` parameter is the form store to set input on. The `config` parameter specifies the path to the field and the new input values to set.

#### Related

##### Primitives

<ApiList items={[{ text: 'createForm', href: '/solid/api/createForm/' }]} />

##### Methods

<ApiList
  items={[
    { text: 'getInput', href: '../getInput/' },
    { text: 'reset', href: '../reset/' },
  ]}
/>

### submit

Programmatically requests form submission by calling the native `requestSubmit()` method on the underlying form element.

```ts
submit(form);
```

#### Parameters

- `form` <Property {...properties.form} />

##### Explanation

The `form` parameter is the form store to submit. The function triggers form submission by calling the native `requestSubmit()` method on the underlying form element.

#### Related

##### Primitives

<ApiList
  items={[
    { text: 'createForm', href: '/solid/api/createForm/' },
  ]}
/>

##### Methods

<ApiList
  items={[
    { text: 'handleSubmit', href: '../handleSubmit/' },
    { text: 'validate', href: '../validate/' },
    { text: 'focus', href: '../focus/' },
  ]}
/>

### swap

Swaps two items in a field array at the specified indices.

```ts
swap<TSchema, TFieldArrayPath>(form, config);
```

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldArrayPath` <Property {...properties.TFieldArrayPath} />

#### Parameters

- `form` <Property {...properties.form} />
- `config` <Property {...properties.config} />

##### Explanation

The `form` parameter is the form store containing the field array. The `config` parameter specifies the path to the field array and the two indices of the items to swap.

#### Related

##### Primitives

<ApiList
  items={[
    { text: 'createForm', href: '/solid/api/createForm/' },
    {
      text: 'useFieldArray',
      href: '/solid/api/useFieldArray/',
    },
  ]}
/>

##### Methods

<ApiList
  items={[
    { text: 'insert', href: '../insert/' },
    { text: 'move', href: '../move/' },
    { text: 'remove', href: '../remove/' },
    { text: 'replace', href: '../replace/' },
  ]}
/>

### validate

Validates the entire form input against its schema. Returns a safe parse result indicating success or failure with detailed issues. Optionally focuses the first field with validation errors.

```ts
const result = validate<TSchema>(form, config?);
```

#### Generics

- `TSchema` <Property {...properties.TSchema} />

#### Parameters

- `form` <Property {...properties.form} />
- `config` <Property {...properties.config} />

##### Explanation

The `form` parameter is the form store to validate. The optional `config` parameter allows specifying whether to automatically focus the first field with validation errors after validation.

#### Returns

- `result` <Property {...properties.result} />

#### Related

##### Primitives

<ApiList
  items={[
    { text: 'createForm', href: '/solid/api/createForm/' },
  ]}
/>

##### Methods

<ApiList
  items={[
    { text: 'focus', href: '../focus/' },
    { text: 'handleSubmit', href: '../handleSubmit/' },
    { text: 'setErrors', href: '../setErrors/' },
    { text: 'getErrors', href: '../getErrors/' },
    { text: 'getAllErrors', href: '../getAllErrors/' },
  ]}
/>

## Types

### DeepPartial

A utility type that recursively makes all properties and nested properties optional.

> This type is too complex to display. Please refer to the [source code](https://github.com/fabian-hiller/formisch/blob/main/packages/core/src/types/utils.ts).

#### Related

##### Primitives

<ApiList items={[{ text: 'createForm', href: '/solid/api/createForm/' }]} />

### FieldArrayStore

Reactive field array store interface with properties for managing array fields.

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldArrayPath` <Property {...properties.TFieldArrayPath} />

#### Definition

- `FieldArrayStore`
  - `path` <Property {...properties.path} />
  - `items` <Property {...properties.items} />
  - `errors` <Property {...properties.errors} />
  - `isTouched` <Property {...properties.isTouched} />
  - `isDirty` <Property {...properties.isDirty} />
  - `isValid` <Property {...properties.isValid} />

### FieldElement

A union type representing form field elements that can be registered with a field store.

#### Definition

- `FieldElement` <Property {...properties.FieldElement} />

#### Related

##### Methods

<ApiList items={[{ text: 'focus', href: '/methods/api/focus/' }]} />

### FieldElementProps

Props to spread onto a field element for integration with Preact form handling.

#### Definition

- `FieldElementProps`
  - `name` <Property {...properties.name} />
  - `autofocus` <Property {...properties.autofocus} />
  - `ref` <Property {...properties.ref} />
  - `onFocus` <Property {...properties.onFocus} />
  - `onInput` <Property {...properties.onInput} />
  - `onChange` <Property {...properties.onChange} />
  - `onBlur` <Property {...properties.onBlur} />

### FieldStore

Reactive field store interface with properties and element props for field management.

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldPath` <Property {...properties.TFieldPath} />

#### Definition

- `FieldStore`
  - `path` <Property {...properties.path} />
  - `input` <Property {...properties.input} />
  - `errors` <Property {...properties.errors} />
  - `isTouched` <Property {...properties.isTouched} />
  - `isDirty` <Property {...properties.isDirty} />
  - `isValid` <Property {...properties.isValid} />
  - `props` <Property {...properties.props} />

### FocusFieldConfig

Configuration interface for focusing a field. Used by the `focus` method to specify which field to focus and any additional focus options.

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldPath` <Property {...properties.TFieldPath} />

#### Definition

- `FocusFieldConfig`
  - `path` <Property {...properties.path} />

#### Related

##### Methods

<ApiList items={[{ text: 'focus', href: '../focus/' }]} />

### FormConfig

Form config interface that defines the configuration options for creating a form store with <Link href="../useForm/">`useForm`</Link>.

#### Generics

- `TSchema` <Property {...properties.TSchema} />

#### Definition

- `FormConfig`
  - `schema` <Property {...properties.schema} />
  - `initialInput` <Property {...properties.initialInput} />
  - `validate` <Property {...properties.validate} />
  - `revalidate` <Property {...properties.revalidate} />

##### Explanation

The `FormConfig` object is passed to <Link href="../useForm/">`useForm`</Link> with a required `schema` property and optional properties for `initialInput`, `validate`, and `revalidate` to control form behavior and validation timing.

### FormStore

Form store interface that provides reactive access to the state of a form created with <Link href="../useForm/">`useForm`</Link>.

#### Generics

- `TSchema` <Property {...properties.TSchema} />

#### Definition

- `FormStore`
  - `isSubmitting` <Property {...properties.isSubmitting} />
  - `isSubmitted` <Property {...properties.isSubmitted} />
  - `isValidating` <Property {...properties.isValidating} />
  - `isTouched` <Property {...properties.isTouched} />
  - `isDirty` <Property {...properties.isDirty} />
  - `isValid` <Property {...properties.isValid} />
  - `errors` <Property {...properties.errors} />

##### Explanation

The `errors` property only contains validation errors at the root level of the form. These are errors from the root object schema validation itself, not errors from nested fields. To retrieve all validation errors from all fields across the entire form, use the <Link href="/methods/api/getAllErrors/">`getAllErrors`</Link> method instead.

### GetFieldErrorsConfig

Configuration interface for retrieving field-specific errors. Used by the `getErrors` method when a specific field path is provided.

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldPath` <Property {...properties.TFieldPath} />

#### Definition

- `GetFieldErrorsConfig`
  - `path` <Property {...properties.path} />

#### Related

##### Methods

<ApiList items={[{ text: 'getErrors', href: '../getErrors/' }]} />

### GetFieldInputConfig

Configuration interface for retrieving field-specific input. Used by the `getInput` method when a specific field path is provided.

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldPath` <Property {...properties.TFieldPath} />

#### Definition

- `GetFieldInputConfig`
  - `path` <Property {...properties.path} />

#### Related

##### Methods

<ApiList items={[{ text: 'getInput', href: '../getInput/' }]} />

### GetFormErrorsConfig

Configuration interface for retrieving form-level errors. Used by the `getErrors` method when no specific field path is provided.

#### Definition

- `GetFormErrorsConfig`
  - `path` <Property {...properties.path} />

#### Related

##### Methods

<ApiList items={[{ text: 'getErrors', href: '../getErrors/' }]} />

### GetFormInputConfig

Configuration interface for retrieving form-level input. Used by the `getInput` method when no specific field path is provided.

#### Definition

- `GetFormInputConfig`
  - `path` <Property {...properties.path} />

#### Related

##### Methods

<ApiList items={[{ text: 'getInput', href: '../getInput/' }]} />

### InsertConfig

Configuration interface for inserting items into array fields. Used by the `insert` method.

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldArrayPath` <Property {...properties.TFieldArrayPath} />

#### Definition

- `InsertConfig`
  - `path` <Property {...properties.path} />
  - `at` <Property {...properties.at} />
  - `initialInput` <Property {...properties.initialInput} />

#### Related

##### Methods

<ApiList items={[{ text: 'insert', href: '../insert/' }]} />

### PartialValues

Utility type that recursively makes all value properties optional, including nested objects and arrays.

#### Generics

- `TValue` <Property {...properties.TValue} />

#### Definition

- `PartialValues` <Property {...properties.PartialValues} />

#### Related

##### Methods

<ApiList items={[{ text: 'getInput', href: '/methods/api/getInput/' }]} />

### Path

Type definition for readonly arrays of path keys used to access nested properties.

#### Definition

- `Path` <Property {...properties.Path} />

### PathKey

Type definition for keys used in paths to access nested properties in objects and arrays.

#### Definition

- `PathKey` <Property {...properties.PathKey} />

### MoveConfig

Configuration interface for moving items within array fields. Used by the `move` method.

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldArrayPath` <Property {...properties.TFieldArrayPath} />

#### Definition

- `MoveConfig`
  - `path` <Property {...properties.path} />
  - `from` <Property {...properties.from} />
  - `to` <Property {...properties.to} />

#### Related

##### Methods

<ApiList items={[{ text: 'move', href: '../move/' }]} />

### RemoveConfig

Configuration interface for removing items from array fields. Used by the `remove` method.

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldArrayPath` <Property {...properties.TFieldArrayPath} />

#### Definition

- `RemoveConfig`
  - `path` <Property {...properties.path} />
  - `at` <Property {...properties.at} />

#### Related

##### Methods

<ApiList items={[{ text: 'remove', href: '../remove/' }]} />

### ReplaceConfig

Configuration interface for replacing items in array fields. Used by the `replace` method.

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldArrayPath` <Property {...properties.TFieldArrayPath} />

#### Definition

- `ReplaceConfig`
  - `path` <Property {...properties.path} />
  - `at` <Property {...properties.at} />
  - `initialInput` <Property {...properties.initialInput} />

#### Related

##### Methods

<ApiList items={[{ text: 'replace', href: '../replace/' }]} />

### RequiredPath

A type that represents a required path into an object structure with at least one key.

> This type is too complex to display. Please refer to the [source code](https://github.com/fabian-hiller/formisch/blob/main/packages/core/src/types/path.ts).

#### Related

##### Methods

<ApiList
  items={[
    { text: 'focus', href: '/methods/api/focus/' },
    { text: 'getErrors', href: '/methods/api/getErrors/' },
    { text: 'getInput', href: '/methods/api/getInput/' },
    { text: 'replace', href: '/methods/api/replace/' },
    { text: 'setInput', href: '/methods/api/setInput/' },
    { text: 'swap', href: '/methods/api/swap/' },
  ]}
/>

### ResetFieldConfig

Configuration interface for resetting field-specific input and errors. Used by the `reset` method when a specific field path is provided.

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldPath` <Property {...properties.TFieldPath} />

#### Definition

- `ResetFieldConfig`
  - `path` <Property {...properties.path} />
  - `initialInput` <Property {...properties.initialInput} />
  - `keepErrors` <Property {...properties.keepErrors} />
  - `keepInput` <Property {...properties.keepInput} />
  - `keepTouched` <Property {...properties.keepTouched} />

#### Related

##### Methods

<ApiList items={[{ text: 'reset', href: '../reset/' }]} />

### ResetFormConfig

Configuration interface for resetting form input and errors. Used by the `reset` method when no specific field path is provided.

#### Generics

- `TSchema` <Property {...properties.TSchema} />

#### Definition

- `ResetFormConfig`
  - `initialInput` <Property {...properties.initialInput} />
  - `keepErrors` <Property {...properties.keepErrors} />
  - `keepInput` <Property {...properties.keepInput} />
  - `keepSubmitted` <Property {...properties.keepSubmitted} />
  - `keepTouched` <Property {...properties.keepTouched} />

#### Related

##### Methods

<ApiList items={[{ text: 'reset', href: '../reset/' }]} />

### Schema

Schema type definition that represents any Valibot schema that can be used with Formisch.

#### Definition

- `Schema` <Property {...properties.Schema} />

#### Related

##### Primitives

<ApiList items={[{ text: 'createForm', href: '/solid/api/createForm/' }]} />

##### Methods

<ApiList items={[{ text: 'validate', href: '/methods/api/validate/' }]} />

### SetFieldErrorsConfig

Configuration interface for setting field-specific errors. Used by the `setErrors` method when a specific field path is provided.

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldPath` <Property {...properties.TFieldPath} />

#### Definition

- `SetFieldErrorsConfig`
  - `path` <Property {...properties.path} />
  - `errors` <Property {...properties.errors} />

#### Related

##### Methods

<ApiList items={[{ text: 'setErrors', href: '../setErrors/' }]} />

### SetFieldInputConfig

Configuration interface for setting field-specific input. Used by the `setInput` method when a specific field path is provided.

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldPath` <Property {...properties.TFieldPath} />

#### Definition

- `SetFieldInputConfig`
  - `path` <Property {...properties.path} />
  - `input` <Property {...properties.input} />

#### Related

##### Methods

<ApiList items={[{ text: 'setInput', href: '../setInput/' }]} />

### SetFormErrorsConfig

Configuration interface for setting form-level errors. Used by the `setErrors` method when no specific field path is provided.

#### Definition

- `SetFormErrorsConfig`
  - `path` <Property {...properties.path} />
  - `errors` <Property {...properties.errors} />

#### Related

##### Methods

<ApiList items={[{ text: 'setErrors', href: '../setErrors/' }]} />

### SetFormInputConfig

Configuration interface for setting form-level input. Used by the `setInput` method when no specific field path is provided.

#### Generics

- `TSchema` <Property {...properties.TSchema} />

#### Definition

- `SetFormInputConfig`
  - `path` <Property {...properties.path} />
  - `input` <Property {...properties.input} />

#### Related

##### Methods

<ApiList items={[{ text: 'setInput', href: '../setInput/' }]} />

### SubmitEvent

Extended submit event interface for form submission. Extends the native `Event` interface with additional form-specific properties.

#### Extends

- `Event`

#### Definition

- `SubmitEvent`
  - `submitter` <Property {...properties.submitter} />

#### Related

##### Methods

<ApiList items={[{ text: 'submit', href: '../submit/' }]} />

##### Types

<ApiList
  items={[{ text: 'SubmitHandler', href: '/core/api/SubmitHandler/' }]}
/>

### SubmitHandler

Function type for handling form submission. Used by the `handleSubmit` method.

#### Generics

- `TSchema` <Property {...properties.TSchema} />

#### Parameters

- `output` <Property {...properties.output} />
- `event` <Property {...properties.event} />

#### Related

##### Methods

<ApiList
  items={[{ text: 'handleSubmit', href: '/methods/api/handleSubmit/' }]}
/>

##### Types

<ApiList items={[{ text: 'SubmitEvent', href: '/methods/api/SubmitEvent/' }]} />

### SwapConfig

Configuration interface for swapping items in array fields. Used by the `swap` method.

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldArrayPath` <Property {...properties.TFieldArrayPath} />

#### Definition

- `SwapConfig`
  - `path` <Property {...properties.path} />
  - `at` <Property {...properties.at} />
  - `and` <Property {...properties.and} />

#### Related

##### Methods

<ApiList items={[{ text: 'swap', href: '../swap/' }]} />

### UseFieldArrayConfig

Configuration object for creating a field array store with <Link href="../useFieldArray/">`useFieldArray`</Link>.

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldArrayPath` <Property {...properties.TFieldArrayPath} />

#### Definition

- `UseFieldArrayConfig`
  - `path` <Property {...properties.path} />

### UseFieldConfig

Configuration object for creating a field store with <Link href="../useField/">`useField`</Link>.

#### Generics

- `TSchema` <Property {...properties.TSchema} />
- `TFieldPath` <Property {...properties.TFieldPath} />

#### Definition

- `UseFieldConfig`
  - `path` <Property {...properties.path} />

### ValidArrayPath

Conditional type that returns the path if valid for array operations, otherwise the first possible valid array path based on the given value.

#### Generics

- `TValue` <Property {...properties.TValue} />
- `TPath` <Property {...properties.TPath} />

#### Definition

- `ValidArrayPath` <Property {...properties.ValidArrayPath} />

### ValidateFormConfig

Configuration interface for form validation. Used by the `validate` method to specify validation behavior.

#### Definition

- `ValidateFormConfig`
  - `shouldFocus` <Property {...properties.shouldFocus} />

#### Related

##### Methods

<ApiList items={[{ text: 'validate', href: '../validate/' }]} />

### ValidationMode

Validation mode type that defines when and how form validation is triggered.

#### Definition

- `ValidationMode` <Property {...properties.ValidationMode} />

#### Related

##### Primitives

<ApiList items={[{ text: 'createForm', href: '/solid/api/createForm/' }]} />

##### Methods

<ApiList items={[{ text: 'validate', href: '/methods/api/validate/' }]} />