---
title: "Инпуты и формы во Flow Builder"
description: "Добавляйте интерактивные элементы форм: текстовые поля и чекбоксы."
---

Используйте инпуты для сбора данных от пользователей — например, имени, адреса электронной почты или даты рождения. Сохраняйте ответы и обращайтесь к ним в других частях флоу, например, чтобы обращаться к пользователю по имени на следующем экране.
### Добавление поля ввода \{#add-an-input\}

1. Нажмите **+** в верхнем левом углу.
2. Выберите **Input**.
3. Выберите тип поля ввода:
   - **Text:** Любой короткий текст.
   - **Email:** Адреса электронной почты, с опциональной проверкой формата.
   - **Password:** Защищённый ввод текста, с настраиваемыми требованиями.
   - **Number:** Числовые значения, с настраиваемым форматом.
   - **Phone number:** Номера телефонов.
   - **Date:** Открывает выбор даты.
   - **Time:** Открывает выбор времени.
   - **Date and time:** Открывает комбинированный выбор.
### Настройте поле ввода \{#configure-an-input\}

:::link
Подробнее о визуальных настройках — макете, стиле и видимости — см. в разделе [Стилизация элементов](builder-styling).
:::

Для всех типов полей ввода можно настроить следующее на вкладке **Design**:
- **Type:** Изменить тип поля ввода (Text, Email, Password, Number, Phone number, Date, Time или Date and time).
- **Element ID:** Идентификатор для обращения к значению поля в других частях флоу. См. [Использование значений полей ввода](#use-input-values) ниже.
- **Placeholder:** Подсказка, отображаемая внутри пустого поля.
- **State:** Определить внешний вид поля в разных состояниях. Переключайтесь между **Default**, **Active**, **Invalid** и **Disabled** и настраивайте отображение для каждого.
- **Typography:** Стиль текста для значения, отображаемого в поле.
- **Leading and trailing icons:** Добавить иконки внутри поля ввода.

Некоторые настройки специфичны для определённых типов полей ввода:
| Настройка                       | Типы полей                         |
|---------------------------------|------------------------------------|
| Кнопка очистки                  | Text, Email                        |
| Проверка формата email          | Email                              |
| Иконка показа пароля            | Password                           |
| Настройка требований к паролю   | Password                           |
| Формат числа                    | Number                             |
| Формат даты/времени             | Date, Time, Date and time          |
| Минимальная и максимальная дата | Date, Date and time                |

### Использование введённых значений

Каждое поле ввода автоматически становится переменной — никакой дополнительной настройки и действия **On Submit** не требуется. Значение доступно через **Element ID** поля, который задаётся в **Input Settings**.

Чтобы использовать введённое значение в другом месте флоу (например, для персонализации текста, заполнения другого поля или условной навигации), вставьте переменную и выберите:

**Element > Screen > `<elementId>.value`**
:::link
Ознакомьтесь с соответствующими гайдами, чтобы понять, как использовать сохранённые значения:
- [Условная навигация](onboarding-navigation-branching)
- [Переменные](onboarding-variables)
:::