JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<script src='https://abashed-crime.surge.sh/bueno.min.js'></script>
<script>
  console.log('bueno', bueno)
</script>
</head>
  <body>
    <form id="myForm">
      <div>     
        <input type="radio" checked value="en" id="en" name="lang" onChange="update()">
        <label for="en">English</label>
        <input type="radio" value="se" id="se" name="lang" onChange="update()">
        <label for="se">Swedish</label>
      </div>
      <div>
        <label for="num">A number:</label>
        <input type="number" value="0" id="num" onInput="update()">
        <div style="color: red">
          <span id="numError"></span>
        </div>
      </div>
      
      <div>
        <label for="str">A string:</label>
        <input id="str" onInput="update()">
        <div style="color: red">
          <span id="strError"></span>
        </div>
      </div>
    </form>
  </body>

</html>

CSS

body {
  font-family: sans-serif;
}
form > div {
  padding: 1em;
}

div > div {
  padding-top: 0.5em;
}

label {
    min-width: 5em;
    display: inline-block;
}

JavaScript

const { atLeast, checkPerKey, either, enUS, svSE, even, object, string, length, toNumber } = bueno;

const mySchema = object({
  num: toNumber(either(even, atLeast(100))),
  str: string(length(atLeast(5))),
});

window.update = function () {
  const form = 
  	document.forms.myForm;
console.log('???', form.lang)
	const locale =
    { en: enUS, se: svSE }[form.lang.value]
	
	const input = {
    num: form.num.value,
    str: form.str.value
  };

  const result = 
		checkPerKey(input, mySchema, locale);

  document.querySelector('#numError').innerHTML = 
    result.num || '';

  document.querySelector('#strError').innerHTML = 
    result.str || '';
};