@eisgs/textarea
v1.3.3
Published
Ссылка на компонент `ref` пробрасывается в html textarea. `onChange` и `value` позволяют управлять содержимым. `label` и `placeholder` позволяют указать дополнительную информацию для пользователя
Downloads
55
Readme
Базовый 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}
/>