JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<script src='https://abashed-crime.surge.sh/bueno.min.js'></script>
</head>
</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 { alphaNumeric, atLeast, check, checkPerKey, deDE, describePaths, either, email, enUS, length, moreThan, not, number, object, optional, string, svSE } = bueno

const username = 
  string(length(atLeast(8)), alphaNumeric)

const age = 
  number(atLeast(18), not(moreThan(130)))

const user = object({
  id: either(email, username),
  age: optional(age)
})

const input = {
  id: 'philip@example.com', 
  age: 17 
}

console.log(check(input, user, enUS))
// 'Age must be at least 18 or left out'

console.log(check(input, user, describePaths(svSE, [['age', 'Ålder']])))
// 'Ålder måste vara som minst 18'

console.log(checkPerKey(input, user, deDE))
// { age: 'Muss mindestens 18 sein' }