website/plasma-ui-docs/docs/components/TextArea.mdx - dev - sdds/plasma

website/plasma-ui-docs/docs/components/TextArea.mdx

56 строк2 KB

Ivan Kudryavtsev

fix(plasma-core): new height/width types in TextArea

13 июл 2023, 17:03

13 июл 2023, 17:039c62c14

---
id: textarea
title: TextArea
---

import { PropsTable, Description, StorybookLink } from '@site/src/components';

# TextArea
<Description name="TextArea" />
<PropsTable name="TextArea" exclude={['$isFocused']} />
<StorybookLink name="TextArea" />

## Использование
Компонент `TextArea` может содержать иконку (или кнопку) справа.
Для этого используйте свойство и `contentRight`:

```tsx live
import React from 'react';
import { TextArea } from '@salutejs/plasma-ui';
import { IconDownload } from '@salutejs/plasma-icons';

export function App() {
    return (
        <div>
            <TextArea
                placeholder="Положение иконки"
                defaultValue="Справа"
                contentRight={<IconDownload />}
            />
        </div>
    );
}
```

Также можно регулировать высоту и ширину, используя свойства `height` и `width`, 
указав значения в `rem` или соответствующие свойствам css значения.

### Подсказка
Для вывода подсказки снизу от поля используйте свойство `helperText`.

```tsx live
import React from 'react';
import { TextArea } from '@salutejs/plasma-ui';

export function App() {
    return (
        <div>
            <TextArea
                placeholder="Введите значение"
                defaultValue="Значение"
                helperText="Подсказка снизу"
            />
        </div>
    );
}
```