Label.jsx

import React from "react";
import { string, bool, node } from "prop-types";
import styled from "styled-components";
import { ErrorMessage } from "formik";

import I18n from "../I18n";

const Optional = styled.i`
  font-size: small;
`;

const LabelWrapper = styled.div`
  display: flex;
  justify-content: space-between;
`;

const ErrorWrapper = styled.div`
  &:after {
    content: "X";
    color: transparent;
  }
`;

const FieldError = styled.span`
  color: #f55;

  &:before {
    content: "*";
  }
`;

function FieldLabel({ optional, label, name, children, ...props }) {
  return (
    <label {...props}>
      <LabelWrapper>
        <span>{label}</span>
        {optional && (
          <Optional>
            (<I18n id="optional" />)
          </Optional>
        )}
      </LabelWrapper>
      {children}
      <ErrorWrapper>
        <ErrorMessage name={name} component={FieldError} />
      </ErrorWrapper>
    </label>
  );
}

FieldLabel.propTypes = {
  optional: bool,
  name: string,
  label: node,
  children: node
};

FieldLabel.defaultLabel = {
  optional: false,
  name: "",
  label: undefined,
  children: undefined
};

export default styled(FieldLabel)`
  color: #444444;
  display: flex;
  flex-direction: column;
`;