> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stac.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Form

> Documentation for Form

export const PLAYGROUND_BASE_URL = "https://playground.stac.dev/";

export const formPreviewJson = {
  "type": "form",
  "autovalidateMode": "always",
  "child": {
    "type": "column",
    "children": [{
      "type": "textFormField",
      "id": "username",
      "decoration": {
        "labelText": "Username"
      }
    }, {
      "type": "textFormField",
      "id": "password",
      "decoration": {
        "labelText": "Password"
      }
    }, {
      "type": "filledButton",
      "child": {
        "type": "text",
        "data": "Submit"
      },
      "onPressed": {
        "actionType": "validateForm",
        "isValid": {
          "actionType": "networkRequest",
          "url": "https://dummyjson.com/auth/login",
          "method": "post",
          "contentType": "application/json",
          "body": {
            "username": {
              "actionType": "getFormValue",
              "id": "username"
            },
            "password": {
              "actionType": "getFormValue",
              "id": "password"
            }
          }
        }
      }
    }]
  }
};
export const formPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

The Stac Form allows you to build a Flutter form widget using JSON.
To know more about the form widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Form-class.html).

## Properties

| Property         | Type                   | Description                            |
| ---------------- | ---------------------- | -------------------------------------- |
| autovalidateMode | `StacAutovalidateMode` | The mode to control auto validation.   |
| child            | `StacWidget`           | The widget to display inside the form. |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacForm(
      autovalidateMode: StacAutovalidateMode.always,
      child: StacColumn(
        children: [
          StacTextFormField(
            id: 'username',
            decoration: StacInputDecoration(labelText: 'Username'),
          ),
          StacTextFormField(
            id: 'password',
            decoration: StacInputDecoration(labelText: 'Password'),
          ),
          StacFilledButton(
            child: StacText(data: 'Submit'),
            onPressed: StacFormValidateAction(
              isValid: StacNetworkRequestAction(
                url: 'https://dummyjson.com/auth/login',
                method: Method.post,
                contentType: 'application/json',
                body: {
                  'username': StacGetFormValueAction(id: 'username'),
                  'password': StacGetFormValueAction(id: 'password'),
                },
              ),
            ),
          ),
        ],
      ),
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "form",
      "autovalidateMode": "always",
      "child": {
        "type": "column",
        "children": [
          {
            "type": "textFormField",
            "id": "username",
            "decoration": {
              "labelText": "Username"
            }
          },
          {
            "type": "textFormField",
            "id": "password",
            "decoration": {
              "labelText": "Password"
            }
          },
          {
            "type": "filledButton",
            "child": {
              "type": "text",
              "data": "Submit"
            },
            "onPressed": {
              "actionType": "validateForm",
              "isValid": {
                "actionType": "networkRequest",
                "url": "https://dummyjson.com/auth/login",
                "method": "post",
                "contentType": "application/json",
                "body": {
                  "username": {
                    "actionType": "getFormValue",
                    "id": "username"
                  },
                  "password": {
                    "actionType": "getFormValue",
                    "id": "password"
                  }
                }
              }
            }
          }
        ]
      }
    }
    ```
  </Tab>

  <Tab title="Preview">
    <Frame>
      <iframe
        id="stac"
        src={formPreviewSrc}
        title="Stac Playground"
        className="w-full rounded-xl border-0"
        style={{ height: "640px" }}
        loading="lazy"
        onLoad={(event) => {
      const iframe = event.currentTarget;
      const targetOrigin = PLAYGROUND_BASE_URL;
      const message = {
        type: "stac-preview-json",
        payload: formPreviewJson
      };

      let attempts = 0;
      const maxAttempts = 12;
      const interval = setInterval(() => {
        iframe.contentWindow?.postMessage(message, targetOrigin);
        attempts += 1;

        if (attempts >= maxAttempts) {
          clearInterval(interval);
        }
      }, 250);
    }}
      />
    </Frame>
  </Tab>
</Tabs>