Input

Поле для свободного ввода любых текстовых и числовых данных.

Использование

HTML

<ds-input
  id="input"
  placeholder="placeholder"
  token="map"
  icon="search"
  rounded
  clear
  error
  message="Я сообщение об ошибке!"
></ds-input>

<script>
  // Демонстрация получения ввода на элементе
  const input = document.getElementById('input');
  if (input) {
    input.addEventListener('input', (e) => {
      console.log('Ввод:', e.target?.getAttribute('value'));
    });
  }

  // Демонстрация использования ключа для установки фокуса
  setTimeout(() => {
    const input = document.getElementById('input');
    if (input) input.setAttribute('focus', '1');
  }, 1000);
</script>

React

import { useCallback } from 'react';
import { Input } from '@rir/ds-library';

function Component() { 
  const onInput = useCallback((e: Event) => {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    console.log('Ввод: ', e.target?.getAttribute('value'));
  }, []);

  return (
    <>
      <Input
        placeholder="placeholder"
        token="map"
        icon="search"
        rounded
        clear
        error
        message="Я сообщение об ошибке!"
        onInput={onInput}
      ></Input>
    </>
  );
}

export default Component;

API

Props

Name	Type	Description	Default
token	String: ['default', 'map']	Основной "тип" оформления поля ввода, два возможных значения	'default'
size	String: ['eluno', 'lanassa']	Токен размера поля ввода	'eluno'
value	String	Актуальный ввод	''
placeholder	String	Подсказка поля ввода	''
message	String	Текст сообщения об ошибке	''
icon	String	Иия иконки (без '_16' в конце)	''
focus	String	Ключ для получения полем ввода фокуса	''
clear	Boolean	Показывается ли "крестик" для быстрого удаления ввода?	false
rounded	Boolean	Скругленное поле ввода?	false
error	Boolean	Показывается ошибка?	false
_error	undefined, String: ['true', 'false']	Дублирующий литеральный атбрибут	undefined
disabled	Boolean	Неактивная, "выключенная" кнопка?	false
_disabled	undefined, String: ['true', 'false']	Дублирующий литеральный атбрибут	undefined

Events

Name	Description
input	Событие на ввод
focus	Событие на получение фокуса
blur	Событие на потерю фокуса
clear	Событие на быстрое очищение ввода

Примеры проектов

React

Angular

Vue