Mostly a copy of the demo from this repo that I set up to have a common place to style all the input elements used throughout the site.

Whitespace on either end of input will be removed

Radiobutton1
Radiobutton2*
Required field. This warning will show even if the input hasn't been touched.

Form Status
{
  "globalError": 7,
  "isChanged": true,
  "isSubmitted": false,
  "isTouched": false,
  "isValid": false,
  "submissions": 0
}
Form Inputs
{
  "firstName": {
    "__v": 1,
    "name": "firstName",
    "error": 7,
    "isTouched": false,
    "value": "krillin",
    "startValue": "krillin",
    "isChanged": false,
    "isDisabled": false
  },
  "lastName": {
    "__v": 1,
    "name": "lastName",
    "error": 0,
    "isTouched": false,
    "value": "???",
    "startValue": "???",
    "isChanged": false,
    "isDisabled": false
  },
  "password": {
    "__v": 1,
    "name": "password",
    "error": 0,
    "isTouched": false,
    "value": "secret",
    "startValue": "secret",
    "isChanged": false,
    "isDisabled": false
  },
  "number": {
    "__v": 1,
    "name": "number",
    "error": 0,
    "isTouched": false,
    "value": 2,
    "startValue": 2,
    "isChanged": false,
    "isDisabled": false
  },
  "email": {
    "__v": 1,
    "name": "email",
    "error": 0,
    "isTouched": false,
    "value": "[email protected]",
    "startValue": "[email protected]",
    "isChanged": false,
    "isDisabled": false
  },
  "colorName": {
    "__v": 1,
    "name": "colorName",
    "error": 0,
    "isTouched": false,
    "value": "#FF00FF",
    "startValue": "#FF00FF",
    "isChanged": false,
    "isDisabled": false
  },
  "checkboxArray": {
    "0": {
      "__v": 1,
      "name": "checkboxArray0",
      "error": 0,
      "isTouched": false,
      "value": false,
      "startValue": false,
      "isChanged": false,
      "isDisabled": false
    },
    "1": {
      "__v": 1,
      "name": "checkboxArray1",
      "error": 0,
      "isTouched": false,
      "value": false,
      "startValue": false,
      "isChanged": false,
      "isDisabled": false
    },
    "2": {
      "__v": 1,
      "name": "checkboxArray2",
      "error": 0,
      "isTouched": false,
      "value": true,
      "startValue": true,
      "isChanged": false,
      "isDisabled": false
    }
  },
  "select1": {
    "__v": 1,
    "name": "select1",
    "error": 5,
    "isTouched": false,
    "isChanged": false,
    "isDisabled": false
  },
  "select2": {
    "__v": 1,
    "name": "select2",
    "error": 0,
    "isTouched": false,
    "value": {
      "value": "5",
      "id": "3"
    },
    "isChanged": true,
    "isDisabled": false
  },
  "textarea": {
    "__v": 1,
    "name": "textarea",
    "error": 0,
    "isTouched": false,
    "value": "",
    "startValue": "",
    "isChanged": false,
    "isDisabled": false
  },
  "checkbox1": {
    "__v": 1,
    "name": "checkbox1",
    "error": 0,
    "isTouched": false,
    "value": true,
    "startValue": true,
    "isChanged": false,
    "isDisabled": false
  },
  "checkbox2": {
    "__v": 1,
    "name": "checkbox2",
    "error": 5,
    "isTouched": false,
    "value": false,
    "startValue": false,
    "isChanged": false,
    "isDisabled": false
  },
  "radiobutton1": {
    "__v": 1,
    "name": "radiobutton1",
    "error": 0,
    "isTouched": false,
    "value": "6",
    "isChanged": true,
    "isDisabled": false
  },
  "radiobutton2": {
    "__v": 1,
    "name": "radiobutton2",
    "error": 5,
    "isTouched": false,
    "isChanged": false,
    "isDisabled": false
  },
  "range": {
    "__v": 1,
    "name": "range",
    "error": 0,
    "isTouched": false,
    "value": 10,
    "startValue": 10,
    "isChanged": false,
    "isDisabled": false
  },
  "status": {
    "globalError": 7,
    "isChanged": true,
    "isSubmitted": false,
    "isTouched": false,
    "isValid": false,
    "submissions": 0
  },
  "inputs": {
    "0": {
      "__v": 1,
      "name": "firstName",
      "error": 7,
      "isTouched": false,
      "value": "krillin",
      "startValue": "krillin",
      "isChanged": false,
      "isDisabled": false
    },
    "1": {
      "__v": 1,
      "name": "lastName",
      "error": 0,
      "isTouched": false,
      "value": "???",
      "startValue": "???",
      "isChanged": false,
      "isDisabled": false
    },
    "2": {
      "__v": 1,
      "name": "password",
      "error": 0,
      "isTouched": false,
      "value": "secret",
      "startValue": "secret",
      "isChanged": false,
      "isDisabled": false
    },
    "3": {
      "__v": 1,
      "name": "number",
      "error": 0,
      "isTouched": false,
      "value": 2,
      "startValue": 2,
      "isChanged": false,
      "isDisabled": false
    },
    "4": {
      "__v": 1,
      "name": "email",
      "error": 0,
      "isTouched": false,
      "value": "[email protected]",
      "startValue": "[email protected]",
      "isChanged": false,
      "isDisabled": false
    },
    "5": {
      "__v": 1,
      "name": "colorName",
      "error": 0,
      "isTouched": false,
      "value": "#FF00FF",
      "startValue": "#FF00FF",
      "isChanged": false,
      "isDisabled": false
    },
    "6": {
      "__v": 1,
      "name": "checkboxArray0",
      "error": 0,
      "isTouched": false,
      "value": false,
      "startValue": false,
      "isChanged": false,
      "isDisabled": false
    },
    "7": {
      "__v": 1,
      "name": "checkboxArray1",
      "error": 0,
      "isTouched": false,
      "value": false,
      "startValue": false,
      "isChanged": false,
      "isDisabled": false
    },
    "8": {
      "__v": 1,
      "name": "checkboxArray2",
      "error": 0,
      "isTouched": false,
      "value": true,
      "startValue": true,
      "isChanged": false,
      "isDisabled": false
    },
    "9": {
      "__v": 1,
      "name": "select1",
      "error": 5,
      "isTouched": false,
      "isChanged": false,
      "isDisabled": false
    },
    "10": {
      "__v": 1,
      "name": "select2",
      "error": 0,
      "isTouched": false,
      "value": {
        "value": "5",
        "id": "3"
      },
      "isChanged": true,
      "isDisabled": false
    },
    "11": {
      "__v": 1,
      "name": "textarea",
      "error": 0,
      "isTouched": false,
      "value": "",
      "startValue": "",
      "isChanged": false,
      "isDisabled": false
    },
    "12": {
      "__v": 1,
      "name": "checkbox1",
      "error": 0,
      "isTouched": false,
      "value": true,
      "startValue": true,
      "isChanged": false,
      "isDisabled": false
    },
    "13": {
      "__v": 1,
      "name": "checkbox2",
      "error": 5,
      "isTouched": false,
      "value": false,
      "startValue": false,
      "isChanged": false,
      "isDisabled": false
    },
    "14": {
      "__v": 1,
      "name": "radiobutton1",
      "error": 0,
      "isTouched": false,
      "value": "6",
      "isChanged": true,
      "isDisabled": false
    },
    "15": {
      "__v": 1,
      "name": "radiobutton2",
      "error": 5,
      "isTouched": false,
      "isChanged": false,
      "isDisabled": false
    },
    "16": {
      "__v": 1,
      "name": "range",
      "error": 0,
      "isTouched": false,
      "value": 10,
      "startValue": 10,
      "isChanged": false,
      "isDisabled": false
    }
  }
}