---
title: "Custom component"
date: "2023-10-05T02:09:55+00:00"
summary: "Create custom components with ease using our flexible schema. Define properties, add form fields, and customize your content structure. Perfect for developers building dynamic, data-driven interfaces with support for various input types."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/custom-component"
id: "c0dd594f-40b7-4ec8-9a90-f1450cde23b1"
---

Schema:

    {
      "type": "object",
      "properties": {
        "type": {
          "type": "string",
          "pattern": "^custom_component$"
        },
        "id": {"type" : "string"},
        "data": {
          "type": "object",
          "properties": {
            "uid": {"type" : "string"},
            "title": {"type" : "string"},
            "field_data": {"type":"array"}
          }
        }
      },
      "required": ["id", "type", "data"]
    }

Example output of a custom component with no form field values:

    {
    "type": "custom_component",
    "id": "dc123a34-e70a-4d21-88b0-3364b026ecf4",
    "data": {
    "uid": "react",
    "title": "React calculator"
    }
    }

Example output of a custom component with 3 form fields with Input, Text Area and Color Picker:

    {
      "type": "custom_component",
      "id": "c05371b6-b20b-485f-a36d-f1c14eda9091",
      "data": {
        "uid": "js_component",
        "title": "Js custom component",
        "field_data": [
          {
            "type": "form-field",
            "id": "e85dcfcf-3e83-47fc-a697-e17f562eb090",
            "machine_name": "heading",
            "data": {
              "uid": "form-input",
              "title": "Input",
              "value": "Test input"
            }
          },
          {
            "type": "form-field",
            "id": "0e0f0ccb-edd3-43e2-81ec-7061ae230d9d",
            "machine_name": "content",
            "data": {
              "uid": "form-textarea",
              "title": "Plain text area",
              "value": "Some plain text"
            }
          },
          {
            "type": "form-field",
            "id": "e0d9c75b-2f64-4ba1-883d-10cc8f3406e3",
            "machine_name": "font-color",
            "data": {
              "uid": "form-colorpicker",
              "title": "Color picker",
              "value": {
                "hex": "#d14141",
                "rgba": "rgba(209, 65, 65, 1)"
              }
            }
          }
        ]
      }
    }