---
title: "Select"
date: "2023-11-30T00:05:07+00:00"
summary: "Discover how to implement and customize select form fields in your web applications. Learn about JSON schemas, field properties, and practical examples for efficient form creation and data handling."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/select"
id: "425bfa33-f7df-4a7a-87b8-02bb00b7a203"
---

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

Examples:

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

![a489ebca-Screenshot%202023-12-04%20at%2000.43.29.png](https://acquia.widen.net/content/61b2a216-0854-47fc-8c81-a93ca8aaeca6/web/a489ebca-Screenshot%202023-12-04%20at%2000.43.29.png)

And used on Node layout canvas like so

![36c6ccb8-Screenshot%202023-12-06%20at%2000.46.54.png](https://acquia.widen.net/content/c11b3995-38b3-4ecd-a9a9-dcb8f734869b/web/36c6ccb8-Screenshot%202023-12-06%20at%2000.46.54.png)

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

    {
      "type": "form-field",
      "id": "6ec8c805-296c-44d0-a8ba-91cbd36dfc67",
      "machine_name": "select",
      "data": {
        "uid": "form-select",
        "title": "Select",
        "value": "two"
      }
    }