Textarea

Поле ввода для длинного текста.

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

HTML

<ds-textarea
  id="textarea"
  placeholder="placeholder"
  rows="5"
  error
  message="Я сообщение об ошибке!"
></ds-textarea>

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

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

React

import { useCallback } from 'react';
import { Textarea } 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 (
    <>
      <Textarea
        rows={5}
        placeholder="placeholder"
        error
        message="Я сообщение об ошибке!"
        onInput={onInput}
      ></Textarea>
    </>
  );
}

export default Component;

API

Props

Name	Type	Description	Default
rows	Number	Количество строк в поле ввода	3
value	String	Актуальный ввод	''
placeholder	String	Подсказка поля ввода	''
message	String	Текст сообщения об ошибке	''
focus	String	Ключ для получения полем ввода фокуса	''
error	Boolean	Показывается ошибка?	false
_error	undefined, String: ['true', 'false']	Дублирующий литеральный атбрибут	undefined
disabled	Boolean	Неактивная, "выключенная" кнопка?	false
_disabled	undefined, String: ['true', 'false']	Дублирующий литеральный атбрибут	undefined

Events

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

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

React

Angular

Vue