Answer the question
In order to leave comments, you need to log in
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>
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>
);
};
@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 questionAsk a Question
731 491 924 answers to any question