---
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:** Добавьте иконки внутри поля ввода.

Некоторые настройки доступны только для определённых типов полей ввода:
| Настройка                        | Типы полей ввода              |
|----------------------------------|-------------------------------|
| Clear button                     | Text, Email                   |
| Validate email format            | Email                         |
| Show password icon               | Password                      |
| Edit password requirements       | Password                      |
| Number format                    | Number                        |
| Date/time format                 | Date, Time, Date and time     |
| Min and max date                 | Date, Date and time           |

## Использование значений полей ввода \{#use-input-values\}

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

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

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

Поведение валидации зависит от типа поля. Каждое поле предоставляет переменную Boolean только для чтения, `<elementId>.isValid`, которая отражает, соответствует ли введённое значение правилам валидации этого поля. Используйте её в условных действиях или условной видимости — например, чтобы скрывать кнопку «Далее», пока формат email не будет корректным.

:::note
- Переменная `isValid` доступна только для чтения — задать её значение нельзя.
- Пустое поле всегда считается валидным.
- Для текстовых полей правила валидации отсутствуют. `textInput.isValid` всегда возвращает `True`.
:::
| Тип ввода | Поведение валидации |
|---|---|
| Text | Встроенных правил валидации нет. |
| Email | Опционально. Включите **Validate email format** в панели **Design**, чтобы проверять введённое значение на соответствие формату электронной почты. |
| Phone number | Встроенная проверка формата номера телефона. Не настраивается в Builder — правило применяется во время выполнения. |
| Password | Настраивается. См. раздел [Требования к паролю](#password-requirements) ниже. |
| Number | На основе формата. Введённое значение должно соответствовать выбранному числовому формату. См. раздел [Числовой формат](#number-format) ниже. |
| Date, Time, Date and time | Встроенная. Пикер принимает только корректные значения даты или времени. |
[Визуальное состояние](builder-styling#input-states) **Invalid** активируется, когда пользователь отправляет форму — например, нажимая Enter или Done на клавиатуре. До этого момента поле ввода отображается в состоянии **Active** или **Default**.
### Требования к паролю \{#password-requirements\}

Поля для ввода пароля поддерживают настраиваемые правила валидации. Нажмите **Edit password requirements** на панели **Design**, чтобы открыть редактор правил. Активные правила отображаются в виде живого списка под полем ввода — каждый пункт отмечается галочкой, как только соответствующее условие выполнено.

Доступные правила:
- **Min length** — минимальное количество символов. По умолчанию: 8.
- **Max length** — максимальное количество символов. По умолчанию: 32.
- **Uppercase letter** — хотя бы одна заглавная буква A–Z.
- **Lowercase letter** — хотя бы одна строчная буква a–z.
- **Number** — хотя бы одна цифра.
- **Special character** — хотя бы один неалфавитно-цифровой символ (например, `!@#$%`).

Пароль считается действительным только при соблюдении всех включённых правил.
### Формат числа \{#number-format\}

Выпадающий список **Format** в настройках поля **Number** определяет, как интерпретируется введённое значение:

- **Integer** — только целые числа (например, `4`).
- **Decimal (Point)** — десятичные дроби с точкой в качестве разделителя (например, `4.89`).
- **Decimal (Comma)** — десятичные дроби с запятой в качестве разделителя (например, `4,89`).

Значения, не соответствующие выбранному формату, считаются недопустимыми.
## Запуск действий по событиям ввода \{#trigger-actions-on-input-events\}

:::link
Основная статья: [Действия](onboarding-actions)
:::

Вы можете запускать действия в ответ на действия пользователя через панель **Interactions**:

- **On changed** — срабатывает, когда пользователь изменяет значение поля ввода. Доступно для всех типов полей.
- **On submit** — срабатывает, когда пользователь отправляет текстовый ввод, нажав Enter или Done на клавиатуре. Для выборщиков даты и времени этот триггер недоступен.