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

website/plasma-ui-docs/docs/components/TextField.mdx
113 строк3 KB
Fanil Zubairov
feat(plasma-ui-docs, plasma-web-docs): Added Storybook links on doc pages
02 фев 2022, 14:57
02 фев 2022, 14:577266d10
---
id: textfield
title: TextField
---

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

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

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

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

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

### Размер поля
Размер поля задается с помощью свойства `size`. Возможные значения свойства: `"l"` и `"m"`:

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

export function App() {
    return (
        <div>
            <TextField
                placeholder="Размер"
                size="l"
                defaultValue="L56"
            />
            <TextField
                placeholder="Размер"
                size="m"
                defaultValue="M48"
            />
        </div>
    );
}
```

### Статус поля
Статус поля задается с помощью свойства `status`. Возможные значения свойства: `success`, `warning` и `error`:

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

export function App() {
    return (
        <div>
            <TextField
                placeholder="Статус"
                status="success"
                defaultValue="Успех"
            />
            <TextField
                placeholder="Статус"
                status="warning"
                defaultValue="Предупрждение"
            />
            <TextField
                placeholder="Статус"
                status="error"
                defaultValue="Ошибка"
            />
        </div>
    );
}
```

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

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

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