> ## Documentation Index
> Fetch the complete documentation index at: https://prismeai-legacy.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Form Block

> Display an interactive form with validation.

[Demo](https://demo.pages.prisme.ai/en/Form)

## JSON Schema

Form block uses JSON Schema to build your very own form. You will find more informations about [Schema Form here](/products/ai-builder/workspaces#json-schema-form).

## Minimal usage

```yaml theme={null}
# Page/Block
- slug: Form
  schema:
    type: object
    properties:
      foo:
        type: string
```

Displays a form with a single input which will do nothing without setting at least `onSubmit` or `onChange`:

```yaml theme={null}
# Page/Block
- slug: Form
  schema:
    type: object
    properties:
      foo:
        type: string
  onSubmit: save form
```

This will emit a `save form` event with all form values as payload. You also can set a custom payload:

```yaml theme={null}
# Page/Block
- slug: Form
  schema:
    type: object
    properties:
      foo:
        type: string
  onSubmit:
    event: save form
    payload:
      id: 1234
```

Static payload will me merged with form values.

This event will be fired when form will be submitted, so when user type Enter or
click on Submit button. But you can do the same on each user keypress with `onChange`.
Be warned it can consume many resources, so don't use this option everywhere:

```yaml theme={null}
# Page/Block
- slug: Form
  schema:
    type: object
    properties:
      foo:
        type: string
  onChange:
    event: save form
    payload:
      id: 1234
```

There is a third event which fire when a field is blur. It's `onBlur`:

```yaml theme={null}
# Page/Block
- slug: Form
  schema:
    type: object
    properties:
      foo:
        type: string
  onBlur:
    event: save form
    payload:
      id: 1234
```

And finally, you can set initial values to your form with the `values` attribute.
The content should be fetch from an update event indead:

```yaml theme={null}
# Page/Block
- slug: Form
  values:
    foo: bar
  schema:
    type: object
    properties:
      foo:
        type: string
  onSubmit: save form
```

## Advanced usage

Here's a list of advanced parameters you can set on your form:

`submitLabel` changes the default submit label by a localized string of your choice:

```yaml theme={null}
# Page/Block
- slug: Form
  submitLabel:
    fr: Enregistrer les modifications
    en: Save changes
```

`hideSubmit` will hide the submit button. Form can be submitted with Enter key or on change and on blur.

```yaml theme={null}
# Page/Block
- slug: Form
  hideSubmit: true
```

`disableSubmit` disable the submit button and disable the form to be submitted.
In case an interaction with another part of the page needs to block the form.

```yaml theme={null}
# Page/Block
- slug: Form
  disableSubmit: '{{disableSubmit}}' # where disableSubmit is set as a boolean
```

`autoFocus` automatically focus the first field of the form when it appears on screen.

```yaml theme={null}
# Page/Block
- slug: Form
  autoFocus: true
```

`buttons` describe an array of custom buttons. They take each an event name and
their payload will be merged with form values.

```yaml theme={null}
# Page/Block
- slug: Form
  buttons:
    - type: event
      value: save form
      payload:
        email: true
      text: Save and send email
    - type: event
      value: save form
      text: Save
```

`loading` display a loading spinner in the submit button. Useless while the form
has been submitted but the process takes time on backend side:

```yaml theme={null}
# Page/Block
- slug: Form
  onSubmit: submit form
  updateOn: update form
  loading: '{{formIsLoading}}'
```

```yaml theme={null}
# Automation
- emit:
    event: update form
    payload:
      formIsLoading: true
- do something during some terribly long seconds:
    foo: '{{payload.foo}}
- emit:
    event: update form
    payload:
      formIsLoading: false
```

`resetOn` is an event name to reset the form from backend. Just emit the event
set and all values will reset.

```yaml theme={null}
# Page/Block
- slug: Form
  onSubmit: submit form
  resetOn: reset form
```

```yaml theme={null}
# Automation
- emit:
    event: reset form
```

`disableStretchContent` makes objects fields groups static. By default they are collaspables.

```yaml theme={null}
# Page/Block
- slug: Form
  disableStretchContent: true
```

`collapsed` makes all objects fields groups opened by default.

```yaml theme={null}
# Page/Block
- slug: Form
  collapsed: true
```