H
H
hamster1410952021-10-23 09:28:51
HTML
hamster141095, 2021-10-23 09:28:51

Can you describe correctly the FormInput structure according to BEM?

What is wrong with this input? They write that it’s not for the bam ...

<div class="form-input">
  <label for="username" class="label form-input__label">User name</label>
  <div class="form-input__inner">
    <input class="input input_notification_error" id="username" placeholder="" type="email" />
    <svg
     SVG
    </svg>
  </div>
  <label for="username" class="label form-input__label label_notification_error"
    >Something goes wrong</label
  >
</div>


React Component
const FormInput: React.FC<IFormInput> = ({ id, type, placeholder = '', labelText, errorText }) => {
  return (
    <Wrapper className="form-input">
      <Label htmlFor={id} labelText={labelText} className="form-input__label" />

      <Wrapper className="form-input__inner">
        <Input type={type} isError={!!errorText} placeholder={placeholder} id={id} />
        {errorText && <Icon color={ColorType.error} name={IconName.inputError} />}
      </Wrapper>

      {errorText && (
        <Label htmlFor={id} isError errorText={errorText} className="form-input__label" />
      )}
    </Wrapper>
  );
};


Styles
@import '../../../styles/variables';

.form-input {
  max-width: 354px;

  &__label {
    margin-bottom: 4px;

    &.label_notification_error {
      margin: 4px 0px 0px 20px;
    }
  }

  &__inner {
    position: relative;

    & svg {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translate(0, -50%);
    }
  }
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question