---
title: "Toggle"
date: "2023-10-05T01:37:57+00:00"
summary: "Discover the power of Toggle, a versatile form element for your Drupal components. Learn how to implement and customize this boolean field, enhancing user interaction and data collection on your website."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/toggle"
id: "cff7860f-1549-48de-a277-fca3e7d74e14"
---

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-checkbox-toggle$"},
            "title": {"type": "string"},
            "value": {"type": "boolean"}
          }
        }
      },
      "required": ["id", "type", "data"]
    }
    

Example output:

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

![83651f6d-Screenshot%202023-12-04%20at%2001.07.50.png](https://acquia.widen.net/content/5583d7c9-5dd5-4c9d-b572-407d74389bc2/web/83651f6d-Screenshot%202023-12-04%20at%2001.07.50.png)

And used on Node layout canvas like so

![0f5a2b81-Screenshot%202023-12-06%20at%2000.48.08.png](https://acquia.widen.net/content/2eef4ad5-2ae1-4e1d-9bcd-460a26e56661/web/0f5a2b81-Screenshot%202023-12-06%20at%2000.48.08.png)

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

    {
      "type": "form-field",
      "id": "ad025039-96c5-4cce-a27b-48778043471c",
      "machine_name": "toggle",
      "data": {
        "uid": "form-checkbox-toggle",
        "title": "Toggle",
        "value": true
      }
    }