Passing children in Field components

[GeorgeHulpoi]

Hello!

It would be great if we could pass ReactNodes into different parts of a Field. For example, for Text Field Component, instead of:

   return (
    <div
      className={classes}
      style={{
        ...style,
        width,
      }}
    >
      <Error
        showError={showError}
        message={errorMessage}
      />
      <Label
        htmlFor={`field-${path.replace(/\./gi, '__')}`}
        label={label}
        required={required}
      />
      <input
        ref={inputRef}
        id={`field-${path.replace(/\./gi, '__')}`}
        value={value || ''}
        onChange={onChange}
        onKeyDown={onKeyDown}
        disabled={readOnly}
        placeholder={getTranslation(placeholder, i18n)}
        type="text"
        name={path}
      />
      <FieldDescription
        className={`field-description-${path.replace(/\./gi, '__')}`}
        value={value}
        description={description}
      />
    </div>
  );

It would be great to have a few props like:

   return (
    <div
      className={classes}
      style={{
        ...style,
        width,
      }}
    >
      <Error
        showError={showError}
        message={errorMessage}
      />
      {afterError}
      <Label
        htmlFor={`field-${path.replace(/\./gi, '__')}`}
        label={label}
        required={required}
      />
      {afterLabel}
      <input
        ref={inputRef}
        id={`field-${path.replace(/\./gi, '__')}`}
        value={value || ''}
        onChange={onChange}
        onKeyDown={onKeyDown}
        disabled={readOnly}
        placeholder={getTranslation(placeholder, i18n)}
        type="text"
        name={path}
      />
      {afterInput}
      <FieldDescription
        className={`field-description-${path.replace(/\./gi, '__')}`}
        value={value}
        description={description}
      />
    </div>
  );

Also, it would be a good idea to wrap the input into a div with a class (eg: 'input-wrapper') and have there a prop for children as well. Setting that div with position: relative can help us attach different components to the input. A good example would be a checkbox like in: