Field types

Level 1 use: a standalone <baht-form>. Type into the form — every keystroke emits baht-change; the values on the right are the emitted data.

Rendered form

Emitted data

{}

Source fields JSON

{
  "form_id": "demo-fields",
  "form_name": "Showcase",
  "fields": [
    {
      "order": 0,
      "type": "label",
      "key": "intro",
      "text": "Every control, one JSON.",
      "variant": "heading"
    },
    {
      "order": 1,
      "type": "text",
      "key": "name",
      "label": "Text",
      "placeholder": "Your name",
      "width": "1/2",
      "required": true,
      "value": ""
    },
    {
      "order": 2,
      "type": "email",
      "key": "email",
      "label": "Email",
      "placeholder": "a@b.co",
      "width": "1/2",
      "value": ""
    },
    {
      "order": 3,
      "type": "number",
      "key": "age",
      "label": "Number",
      "width": "1/4",
      "min": 0,
      "max": 120,
      "value": null
    },
    {
      "order": 4,
      "type": "date",
      "key": "dob",
      "label": "Date",
      "width": "1/4",
      "value": null
    },
    {
      "order": 5,
      "type": "dropdown",
      "key": "province",
      "label": "Dropdown",
      "width": "1/2",
      "placeholder": "Pick one…",
      "options": [
        {
          "key": "bkk",
          "label": "Bangkok"
        },
        {
          "key": "cnx",
          "label": "Chiang Mai"
        },
        {
          "key": "hkt",
          "label": "Phuket"
        }
      ],
      "value": null
    },
    {
      "order": 6,
      "type": "radio",
      "key": "plan",
      "label": "Radio",
      "width": "1/2",
      "options": [
        {
          "key": "free",
          "label": "Free"
        },
        {
          "key": "pro",
          "label": "Pro"
        }
      ],
      "value": "free"
    },
    {
      "order": 7,
      "type": "multiselect",
      "key": "interests",
      "label": "Multiselect",
      "width": "1/2",
      "options": [
        {
          "key": "forms",
          "label": "Forms"
        },
        {
          "key": "flows",
          "label": "Workflows"
        },
        {
          "key": "rules",
          "label": "Rules"
        }
      ],
      "value": []
    },
    {
      "order": 8,
      "type": "textarea",
      "key": "bio",
      "label": "Textarea",
      "rows": 3,
      "width": "1/2",
      "max_length": 200,
      "value": ""
    },
    {
      "order": 9,
      "type": "checkbox",
      "key": "accept",
      "label": "Checkbox: accept terms",
      "width": "1/2",
      "required": true,
      "value": false
    },
    {
      "order": 10,
      "type": "toggle",
      "key": "newsletter",
      "label": "Toggle: newsletter",
      "width": "1/2",
      "value": false
    },
    {
      "order": 11,
      "type": "file",
      "key": "doc",
      "label": "File (capture only)",
      "accept": ".pdf,.png",
      "width": "full",
      "value": null
    }
  ]
}