Upper case only textfield and validation

Hi, I would like to do two things.

  1. create a text field that transforms all input into upper case letters while typing
  2. validate the content of the text field against some condition while typing

I have tried to add onInput={(e) => console.log("changing case")} which works with the input form fields but did not have luck with that. Any ideas on how I could accomplish this? Sorry if this is obvious, I am new to React.

Here is a code that might helps, I didn’t test it but you see the idea.
Here we have the validate and also transform text to upper case.

  label="User Name"
  validate={(value) =>
    value && value.length < 4 ? 'TOO_SHORT' : undefined
  {({ fieldProps, error }) => (
        onChange={(e) => {
          const upperCaseValue = e.target.value.toUpperCase();
      {error === 'TOO_SHORT' && (
            Username needs to be more than 4 chars

Thanks @nhac.tat.nguyen I will try that. Just one question. Where did you import the Field component from? is this from the atlaskit?

All of them come from Atlaskit:

import TextField from '@atlaskit/textfield';
import TextArea from '@atlaskit/textarea';
import Form, { Field } from '@atlaskit/form';

Unfortunately, that did not work. What I came up with that does work though is the following:

        validate={(value) => validateNameOrKey(Project.validKey, value)}
        transform={(e:any)=>return e.target.value.toUpperCase()}
        {({ fieldProps, error }) => (
            <Textfield {...fieldProps} value={fieldProps.value} ></Textfield>