Input

Поле для ввода с плейсхолдером

Для нормального состояния:

<div class="ml-input">
	<input type="text" class="ml-input__input" placeholder="Placeholder">
</div>

Для состояния некорректного ввода:

<div class="ml-input ml-input--error">
	<input type="text" class="ml-input__input" placeholder="Placeholder">
	<div class="ml-input__clear" data-input-clear></div>
</div>

Input Label

Поле для ввода с названием

Для нормального состояния:

<div class="ml-input">
	<label class="ml-input__label">Label</label>
	<input type="text" class="ml-input__input" placeholder="Placeholder">
</div>

Для состояния некорректного ввода:

<div class="ml-input ml-input--error">
	<label class="ml-input__label">Label</label>
	<input type="text" class="ml-input__input" placeholder="Placeholder">
	<div class="ml-input__clear" data-input-clear></div>
</div>

Input Label Message

Поле для ввода с названием и проверкой на корректность ввода

Для нормального состояния:

<div class="ml-input ml-input--ok">
	<label class="ml-input__label">Label</label>
	<input type="text" class="ml-input__input" placeholder="Placeholder">
</div>

Для состояния некорректного ввода:

<div class="ml-input ml-input--error">
	<label class="ml-input__label">Label</label>
	<input type="text" class="ml-input__input" placeholder="Placeholder">
	<div class="ml-input__clear" data-input-clear></div>
	<span class="ml-input__message">Error message</span>
</div>

Big input

Поле с названием для ввода большого объема данных

<div class="ml-input">
	<label class="ml-input__label">Label</label>
	<textarea placeholder="Placeholder" class="ml-input__input"></textarea>
</div> 

Расширенные настройки

класс модификатор ml-input--error включает состояние ошибки

класс модификатор ml-input--ok включает состояние успеха

npm репозиторий - [https://www.npmjs.com/package/@megalabs/ml-input] (https://www.npmjs.com/package/@megalabs/ml-input)

Для установки пакета

• nnpm i @megalabs/ml-input
• затем в папке @megalabs/ml-input запускаем npm install
• npm start