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

website/sdds-serv-docs/docs/components/TextField.mdx
156 строк5 KB
Alexander Lobyntsev
docs(textfield): rework doc examples [PLASMA-6734]
06 мар 2026, 11:33
06 мар 2026, 11:33403210f
---
id: TextField
title: TextField
---

import { PropsTable, Description } from '@site/src/components';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

import CleaningLogicExample from '../_examples/_textfield/_cleaning-logic.mdx'
import UncontrolledExample from '../_examples/_textfield/_uncontrolled.mdx'
import ControlledExample from '../_examples/_textfield/_controlled.mdx'
import AppearanceExample from '../_examples/_textfield/_appearance.mdx'
import ViewExample from '../_examples/_textfield/_view.mdx'
import SizeExample from '../_examples/_textfield/_size.mdx'

# TextField
<Description name="TextField" />

### Быстрый старт

<Tabs>
    <TabItem value="default" label="Uncontrolled" default>
        <UncontrolledExample />
    </TabItem>
    <TabItem value="controlled" label="Controlled">
        <ControlledExample />
    </TabItem>
</Tabs>

### Управление внешним видом

Внешний вид компонента зависит от свойств `appearance`, `view`, `size`:

<Tabs>
    <TabItem value="appearance" label="Appearance" default>
        :::tip
         Для `appearance="clear"`есть возможность отобразить разделитель с помощью `hasDivider`
        :::

        <AppearanceExample/>
    </TabItem>
    <TabItem value="view" label="View">
        <ViewExample />
    </TabItem>
    <TabItem value="size" label="Size">
        <SizeExample />
    </TabItem>
</Tabs>

### Подсказки
Для вывода подсказки снизу от поля, используйте свойство `leftHelper`,
для подсказки в виде Tooltip - `hintText`, для подсказки сверху справа - `titleCaption`:

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

export function App() {
    return (
        <div>
            <TextField
                placeholder="Введите значение"
                leftHelper="Подсказка снизу"
                titleCaption="Подсказка сверху"
                hintText="Подсказка в виде Tooltip"
                hintView="default"
                hintSize="m"
            />
        </div>
    );
}
```

### Обязательность поля

:::tip
Наличие индикатора регулируется свойством `hasRequiredIndicator`.
:::

Обязательность поля задаётся с помощью свойства `required`.
Если поле является обязательным, то у компонента появляется специальный индикатор.
Изменить расположение индикатора можно с помощью свойства `requiredPlacement`, которое принимает значения `left` и `right`.

```tsx live
import React from 'react';
import { TextField } from '@salutejs/sdds-serv';
import { IconBellFill, IconDone } from '@salutejs/plasma-icons';

export function App() {
    return (
        <div>
            <TextField
                hasRequiredIndicator
                required
                requiredPlacement="right"
                label="Лейбл"
                leftHelper="Подсказка к полю"
                placeholder="Введите значение"
                contentLeft={<IconBellFill size="s" color="inherit" />}
                contentRight={<IconDone size="s" color="inherit" />}
            />
        </div>
    );
}
```

### Расширенные примеры

<Tabs>
    <TabItem value="cleaning logic" label="Cleaning logic">
        <CleaningLogicExample />
    </TabItem>
</Tabs>

### Таблица свойств
<PropsTable name="TextField" exclude={['css']} />

### Режим ввода (DEPRECATED)
С помощью свойства `enumerationType` можно вводить элементы как теги. Свойство `chipType` изменяет внешний вид чипа.
С помощью `chipView` можно задать общий вид Chip. Валидация Chip происходит с помощью функции chipValidator.
По нажатию Enter, после ввода нужного текста, он преобразуется в Chip.

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

export function App() {
    const validateChip = (value) => (value === 'Значение 1' ? { view: 'negative' } : {});

    return (
        <div>
            <TextField
                placeholder="Введите значение"
                defaultValue="Значение"
                size="l"
                enumerationType="chip"
                helperText="Подсказка снизу"
                chips={["Значение 1", "Значение 2"]}
                chipView="positive"
                chipValidator={validateChip}
            />

            <TextField
                placeholder="Введите значение"
                defaultValue="Значение"
                size="l"
                enumerationType="chip"
                helperText="Подсказка снизу"
                chips={["Значение 1"]}
                chipType="text"
            />
        </div>
    );
}
```