Text Field

The TextField is a wrapper around the native input HTML element. Therefore, the component accepts the parameters accepted by HTMLInputElement, and a further innerRef parameter to pass a React ref to the inner input:

type Props = React.InputHTMLAttributes<unknown> & {
  innerRef?: LegacyRef<HTMLInputElement>;
};

Usage

<div className={'flex flex-col space-y-4'}>
  <TextField>
    <TextField.Label>
      Email Address

      <TextField.Input placeholder={'your@email.com'} />
    </TextField.Input>
  </TextField>

  <TextField>
    <TextField.Label>
      Password

      <TextField.Input
        type={'password'}
        placeholder={'**************'}
      />

      <TextField.Hint>Yo! Make it strong :)</TextField.Hint>
    </TextField.Label>
  </TextField>

  <TextField>
    <TextField.Label>
      Description
      <div className={'TextFieldInputContainer'}>
        <textarea
          className={'TextFieldInput h-20'}
          placeholder={'Write a description'}
        />
      </div>

      <TextField.Hint>
        <p className={'flex space-x-1 text-xs'}>
          <span>Write a description up to 160 characters</span>
        </p>
      </TextField.Hint>
    </TextField.Label>
  </TextField>
</div>