@financial-times/o-forms/demos/src/data/toggle.json

This component provides responsive styling for form fields and inputs. It provides validation and error handling for forms, as well.

{
  "variants": [
    {
      "optional": true,
      "field": {
        "type": "toggle",
        "aria": {
          "label": "toggle-group-title",
          "info": "toggle-group-info"
        }
      },
      "title": {
        "main": "Default toggle inputs",
        "prompt": "Optional prompt text"
      },
      "inputs": [
        {
          "type": "checkbox",
          "name": "default",
          "value": "Stacked 1",
          "checked": true,
					"id": "default-1"
        },
        {
          "type": "checkbox",
          "name": "default",
          "value": "Stacked 2",
					"id": "default-2"
        }
      ]
    },
    {
      "field": {
        "type": "toggle",
        "aria": {
          "label": "toggle-group-with-description-title",
          "info": "toggle-group-with-description-info"
        }
      },
      "title": {
        "main": "Toggle inputs with description",
        "prompt": "Optional prompt text"
      },
      "inputs": [
        {
          "type": "checkbox",
          "name": "default",
          "value": "Lorem ipsum dolor sit amet",
          "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad earum magnam vel possimus harum suscipit.",
          "checked": true,
          "aria": {
            "label": "toggle-group-option-1-label",
            "info": "toggle-group-option-1-description"
          },
					"id": "description-1"
        },
        {
          "type": "checkbox",
          "name": "default",
          "value": "Lorem ipsum dolor",
          "description": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam numquam aspernatur error voluptas dolorem ab.",
          "checked": false,
          "aria": {
            "label": "toggle-group-option-2-label",
            "info": "toggle-group-option-2-description"
          },
					"id": "description-2"
        }
      ]
    },
    {
      "field": {
        "type": "toggle",
        "aria": {
          "label": "inlined-toggle-group-title"
        },
        "modifiers": [ "inline" ]
      },
      "title": {
        "main": "Inline toggle inputs"
      },
      "inputs": [
        {
          "type": "checkbox",
          "name": "optional",
          "value": "Optional 1",
          "checked": true,
					"id": "inline-1"
        },
        {
          "type": "checkbox",
          "name": "optional",
          "value": "Optional 2",
					"id": "inline-2"
        }
      ]
    },
    {
      "field": {
        "type": "toggle",
        "aria": {
          "label": "disabed-toggle-group-title"
        }
      },
      "title": {
        "main": "Disabled toggle inputs"
      },
      "inputs": [
        {
          "type": "checkbox",
          "name": "disabled",
          "value": "Disabled 1",
          "checked": true,
          "disabled": true,
					"id": "disabled-1"
        },
        {
          "type": "checkbox",
          "name": "disabled",
          "value": "Disabled 2",
          "disabled": true,
					"id": "disabled-2"
        }
      ]
    },
    {
      "field": {
        "type": "toggle",
        "aria": {
          "label": "error-toggle-group-title"
        },
        "error": "Something has gone wrong.",
        "modifiers": [ "invalid" ]
      },
      "title": {
        "main": "Error toggle inputs"
      },
      "inputs": [
        {
          "type": "checkbox",
          "name": "error",
          "value": "Error 1",
          "checked": true,
					"id": "error-1"
        },
        {
          "type": "checkbox",
          "name": "error",
          "value": "Error 2",
					"id": "error-2"
        }
      ]
    },
    {
      "inline-field": true,
      "field": {
        "type": "toggle",
        "aria": {
          "label": "inline-field-toggle-group-title1"
        }
      },
      "title": {
        "main": "Inline field with toggle"
      },
      "inputs": [
        {
          "type": "checkbox",
          "name": "inline-field",
          "value": "Inlined 1",
          "checked": true,
					"id": "inline-field-1"
        },
        {
          "type": "checkbox",
          "name": "inline-field",
          "value": "Inlined 2",
					"id": "inline-field-2"
        }
      ]
    },
    {
      "inline-field": true,
      "field": {
        "type": "toggle",
        "aria": {
          "label": "inline-field-toggle-group-title2"
        },
        "modifiers": [ "inline" ]
      },
      "title": {
        "main": "Inline field with inline toggle"
      },
      "inputs": [
        {
          "type": "checkbox",
          "name": "inline-all",
          "value": "Inlined 1",
          "checked": true,
					"id": "inline-all-1"
        },
        {
          "type": "checkbox",
          "name": "inline-all",
          "value": "Inlined 2",
					"id": "inline-all-2"
        }
      ]
    },
    {
      "inverse": true,
      "optional": true,
      "field": {
        "type": "toggle",
        "aria": {
          "label": "inverse-toggle-group-title"
        }
      },
      "title": {
        "main": "Inverse checkboxes",
        "prompt": "Inverse prompt text"
      },
      "inputs": [
        {
          "type": "checkbox",
          "name": "inverse",
          "value": "Inverse 1",
          "checked": true,
					"id": "inverse-1"
        },
        {
          "type": "checkbox",
          "name": "inverse",
          "value": "Inverse 2",
					"id": "inverse-2"
        }
      ]
    }
  ]
}