JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input type="text" id="name" name="name" required="required" value="" />
    <input id="confirm" type="checkbox" name="confirm" value="1" required="required" />
    <label for="confirm"><span>+</span>Confirm</label>
    <input type="submit" name="submit" value="Submit" />
</form>

CSS

input[type="checkbox"] {
	    display: none;
	}
	form input[type="checkbox"] + label span {
	    display: inline-block;
	    width: 16px;
	    height: 16px;
	    margin: 1px 10px 5px 0;
	    vertical-align: middle;
	    cursor: pointer;
	    border: 1px solid grey;
	    color: #fff;
	    font-size: 15px;
	    padding: 2px 2px;
	}
	input[type="checkbox"]:checked + label span {
	    color: #000;
	}

JavaScript

document.addEventListener('invalid', (function () {
    return function (e) {
        e.preventDefault();
        document.getElementById("name").focus();
    };
})(), true);