DEV Community

Rafael de Bastiani
Rafael de Bastiani

Posted on

[types and tricks] Customizando um input label required do formik

Como inserir um asterisco no label de um custom input do formik

Opa, beleza? Bora ver como fazer um custom input massa com direito a um asterisco de required.

InputFormik
Label

Vamos ver alguns códigos:

const Label = ({ children, labelMsg, labelTop = true, name, formik }: IProps) =>
  labelTop ? (
    <ContentStyled isRequired={formik && isRequiredField(formik, name)}>
      <label htmlFor={name}>
        {labelMsg}
        {children}
      </label>
    </ContentStyled>
  ) : (
    <ContentStyled isRequired={formik && isRequiredField(formik, name)}>
      <LabelStyled label={labelMsg}>{children}</LabelStyled>
    </ContentStyled>
  );

labelTop define se o label vai ficar no topo ou do lado do input.
Agora vamos para a mágica, o isRequired e o isRequiredField:

export const ContentStyled = styled.div`${(props: IProps) => props.isRequired &&`label::before {
display: inline-block;
margin-right: 4px;
color: #f5222d;
font-size: 14px;
font-family: SimSun, sans-serif;
line-height: 1;
content: '\*';
}`}`;

Como visto no código a cima, temos um styled-component com a props isRequired e ali temos então o css que insere
o asterisco do lado do label.

const isRequiredField = ({ validationSchema }: any, name: string) => {
  try {
    const isRequired = validationSchema.fields[name]
      ? !!validationSchema.fields[name].tests.find(
          (test: any) => test.OPTIONS.name === 'required'
        ).OPTIONS.name
      : false;
    return isRequired;
  } catch (event) {
    return false;
  }
};

Então temos a função que identifica se o field é required ou não por meio do validationSchema do formik.

Nesse InputFormik ainda temos uma validação de senha conforme a imagem:

strongerlevel

Top comments (0)