Form field validation handler prop

It would be useful for form fields to have an (optional) validator prop. This prop expects a Validator function to determine if the field is valid or not. This Validator function will be passed the value of the field onChange and return an array of strings representing the validation errors.

An example might look like this:

<TextInput
  id={'user-name'}
  name={'user-name'}
  label={'Name'}
  value={username}
  onChange={(e}: ChangeEvent<HTMLInputElement>) => { /* Do something with the value */ }
  validator={(value: string) => {
    return value.includes(/elmo/) ? ['Elmo may not use this app'] : []
  }}
/>

Returning an array of multiple strings would cause them all to be displayed one after the other

<TextInput
  id={'user-name'}
  name={'user-name'}
  label={'Name'}
  value={username}
  onChange={(e}: ChangeEvent<HTMLInputElement>) => { /* Do something with the value */ }
  validator={(value: string) => {
    return ['Elmo', 'Kermit'].includes(value) ? ['Elmo may not use this app', 'Kermit may not use this app'] : []
  }}
/>

This would outsource (for want of a better term) the management of isValid/isNotValid type state to the form inputs themselves.

Start by locating the TextInput and other form-field component entry points, then inspect how isValid/isNotValid state is currently managed. The issue provides no file or test names. Done means an optional validator accepts the field value, returns validation-error strings, and displays multiple returned errors in the field.