A showcase of more complicated field types like addable/removable arrays inputs and complex inputs with detailed object state. Input statuses like isTouched or error are aggregated for array inputs.

Validation: 3rd checkbox cannot be selected if more than 259 complex inputs
Validation: All checkboxes must be selected
Cannot select third checkbox when more than 259 complex inputs are created.
All checkboxes must be selected
            {
  "__v": 0,
  "name": "checkboxArray",
  "isArrayInput": true,
  "error": 5,
  "isTouched": false,
  "isChanged": false,
  "isDisabled": false,
  "value": {
    "0": {
      "__v": 1,
      "name": "checkboxArray0",
      "error": 5,
      "isTouched": false,
      "isChanged": false,
      "isDisabled": false,
      "value": false,
      "startValue": false,
      "startDisabled": false
    },
    "1": {
      "__v": 1,
      "name": "checkboxArray1",
      "error": 5,
      "isTouched": false,
      "isChanged": false,
      "isDisabled": false,
      "value": false,
      "startValue": false,
      "startDisabled": false
    },
    "2": {
      "__v": 1,
      "name": "checkboxArray2",
      "error": 0,
      "isTouched": false,
      "isChanged": false,
      "isDisabled": false,
      "value": true,
      "startValue": true,
      "startDisabled": false
    }
  },
  "startValue": {
    "0": false,
    "1": false,
    "2": true
  },
  "startDisabled": false
}
Validation: The text input can't be the same as the color
Validation: If the checkbox is enabled, then the <Select> can't be 6
Filter:
10 / 10
Green
blue
orange
orange
blue
Green
blue
blue
blue
blue
            {
  "__v": 0,
  "name": "complexInputArray",
  "isArrayInput": true,
  "error": 0,
  "isTouched": false,
  "isChanged": false,
  "isDisabled": false,
  "value": {
    "0": {
      "__v": 1,
      "name": "complexInputArray0",
      "error": 0,
      "isTouched": false,
      "isChanged": false,
      "isDisabled": false,
      "value": {
        "a": true,
        "b": "1",
        "c": "",
        "type": "Green"
      },
      "startValue": {
        "a": true,
        "b": "1",
        "c": "",
        "type": "Green"
      },
      "startDisabled": false
    },
    "1": {
      "__v": 1,
      "name": "complexInputArray1",
      "error": 0,
      "isTouched": false,
      "isChanged": false,
      "isDisabled": false,
      "value": {
        "a": true,
        "b": "1",
        "c": "",
        "type": "blue"
      },
      "startValue": {
        "a": true,
        "b": "1",
        "c": "",
        "type": "blue"
      },
      "startDisabled": false
    },
    "2": {
      "__v": 1,
      "name": "complexInputArray2",
      "error": 0,
      "isTouched": false,
      "isChanged": false,
      "isDisabled": false,
      "value": {
        "a": true,
        "b": "1",
        "c": "",
        "type": "orange"
      },
      "startValue": {
        "a": true,
        "b": "1",
        "c": "",
        "type": "orange"
      },
      "startDisabled": false
    },
    "3": {
      "__v": 1,
      "name": "complexInputArray3",
      "error": 0,
      "isTouched": false,
      "isChanged": false,
      "isDisabled": false,
      "value": {
        "a": false,
        "b": "1",
        "c": "",
        "type": "orange"
      },
      "startValue": {
        "a": false,
        "b": "1",
        "c": "",
        "type": "orange"
      },
      "startDisabled": false
    },
    "4": {
      "__v": 1,
      "name": "complexInputArray4",
      "error": 0,
      "isTouched": false,
      "isChanged": false,
      "isDisabled": false,
      "value": {
        "a": false,
        "b": "2",
        "c": "",
        "type": "blue"
      },
      "startValue": {
        "a": false,
        "b": "2",
        "c": "",
        "type": "blue"
      },
      "startDisabled": false
    },
    "5": {
      "__v": 1,
      "name": "complexInputArray5",
      "error": 0,
      "isTouched": false,
      "isChanged": false,
      "isDisabled": false,
      "value": {
        "a": true,
        "b": "2",
        "c": "",
        "type": "Green"
      },
      "startValue": {
        "a": true,
        "b": "2",
        "c": "",
        "type": "Green"
      },
      "startDisabled": false
    },
    "6": {
      "__v": 1,
      "name": "complexInputArray6",
      "error": 0,
      "isTouched": false,
      "isChanged": false,
      "isDisabled": false,
      "value": {
        "a": true,
        "b": "1",
        "c": "",
        "type": "blue"
      },
      "startValue": {
        "a": true,
        "b": "1",
        "c": "",
        "type": "blue"
      },
      "startDisabled": false
    },
    "7": {
      "__v": 1,
      "name": "complexInputArray7",
      "error": 0,
      "isTouched": false,
      "isChanged": false,
      "isDisabled": false,
      "value": {
        "a": true,
        "b": "1",
        "c": "",
        "type": "blue"
      },
      "startValue": {
        "a": true,
        "b": "1",
        "c": "",
        "type": "blue"
      },
      "startDisabled": false
    },
    "8": {
      "__v": 1,
      "name": "complexInputArray8",
      "error": 0,
      "isTouched": false,
      "isChanged": false,
      "isDisabled": false,
      "value": {
        "a": true,
        "b": "1",
        "c": "",
        "type": "blue"
      },
      "startValue": {
        "a": true,
        "b": "1",
        "c": "",
        "type": "blue"
      },
      "startDisabled": false
    },
    "9": {
      "__v": 1,
      "name": "complexInputArray9",
      "error": 0,
      "isTouched": false,
      "isChanged": false,
      "isDisabled": false,
      "value": {
        "a": true,
        "b": "1",
        "c": "",
        "type": "blue"
      },
      "startValue": {
        "a": true,
        "b": "1",
        "c": "",
        "type": "blue"
      },
      "startDisabled": false
    }
  },
  "startValue": {
    "0": {
      "a": true,
      "b": "1",
      "c": "",
      "type": "Green"
    },
    "1": {
      "a": true,
      "b": "1",
      "c": "",
      "type": "blue"
    },
    "2": {
      "a": true,
      "b": "1",
      "c": "",
      "type": "orange"
    },
    "3": {
      "a": false,
      "b": "1",
      "c": "",
      "type": "orange"
    },
    "4": {
      "a": false,
      "b": "2",
      "c": "",
      "type": "blue"
    },
    "5": {
      "a": true,
      "b": "2",
      "c": "",
      "type": "Green"
    },
    "6": {
      "a": true,
      "b": "1",
      "c": "",
      "type": "blue"
    },
    "7": {
      "a": true,
      "b": "1",
      "c": "",
      "type": "blue"
    },
    "8": {
      "a": true,
      "b": "1",
      "c": "",
      "type": "blue"
    },
    "9": {
      "a": true,
      "b": "1",
      "c": "",
      "type": "blue"
    }
  },
  "startDisabled": false
}
Cannot submit until form errors are corrected.

Form Status
            {
  "globalError": 5,
  "isChanged": false,
  "isSubmitted": false,
  "isTouched": false,
  "isValid": false,
  "submissions": 0
}