---
title: "Input"
date: "2023-10-05T01:16:47+00:00"
summary: "Discover how to structure and output form field data in JSON:API format for Drupal components. Learn the schema, see examples, and understand the JSON output for seamless integration and development."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/input"
id: "86f3aa19-ad20-4ef5-acee-fc5116deb8d9"
---

Schema:

    {
      "type": "object",
      "properties": {
        "type": {"type": "string", "pattern": "^form-field$"},
        "id": {"type": "string", "pattern": "^[0-9a-f]{8}-([0-9a-f]{4}-){3}[0-9a-f]{12}$"},
        "machine_name": {"type": "string"},
        "data": {
          "type": "object",
          "properties": {
            "uid": {"type": "string","pattern": "^form-input$"},
            "title": {"type": "string"},
            "value": {"type": "string"}
          }
        }
      },
      "required": ["id", "type", "data"]
    }
    

Example output:

Given "Input" form element on a component set up like so

![bc355004-Screenshot%202023-12-04%20at%2001.02.55.png](https://acquia.widen.net/content/62975045-a9f4-4948-8574-93faebe8d259/web/bc355004-Screenshot%202023-12-04%20at%2001.02.55.png)

And used on Node layout canvas like so

![ea47bb7b-Screenshot%202023-12-06%20at%2000.40.21.png](https://acquia.widen.net/content/68a39ec7-4bed-4bdd-a7a5-1504249a2218/web/ea47bb7b-Screenshot%202023-12-06%20at%2000.40.21.png)

JSON:API output for this form field will be this:

    {
      "type": "form-field",
      "id": "4aeff0f2-25e1-415c-b3bb-39cef56e32a0",
      "machine_name": "input",
      "data": {
        "uid": "form-input",
        "title": "Input",
        "value": "Input text value"
      }
    }