@eisgs/textarea

Базовый Textarea

Ссылка на компонент ref пробрасывается в html textarea. onChange и value позволяют управлять содержимым. label и placeholder позволяют указать дополнительную информацию для пользователя

  import { Button } from "@eisgs/button";

  const [value, setValue] = React.useState('');
  const textareaRef = React.useRef();

  const handleFocus = () => textareaRef.current.focus();
  
  <div style={{ width: "300px" }}>
    <Textarea
      ref={textareaRef}
      label="Поле ввода"
      placeholder="Укажите значение"
      value={value}
      onChange={setValue}
    />
    <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '10px' }} >
      <Button onClick={ handleFocus }>Фокус</Button>
    </div>
  </div>

Валидация

error - строка с текстом ошибки, при передаче в компонент строки со значением выводит его

  <div style={{ marginBottom: "20px" }}>
    <Textarea
      value="Значение 1"
      error="Текст ошибки"
    />
  </div>

disabled

disabled блокирует изменение поля

  <Textarea
    label="Поле ввода"
    placeholder="Укажите значение"
    value="Значение 1"
    disabled
  />

Подсказка

hint позволяет указать подсказку для поля

<Textarea label="Поле с подсказкой" hint="Подсказка" />

MaxLength

Параметр maxLength позволяет ограничивать количество вводимых символов

const [value, setValue] = React.useState('');

<Textarea
  maxLength={10}
  label="Поле ввода"
  placeholder="Укажите значение"
  value={value}
  onChange={setValue}
/>