Состояния элементов

Интерактивные элементы флоу меняют внешний вид в зависимости от действий пользователя: выбранный вариант квиза становится Selected, сфокусированный ввод — Active. Некоторые состояния управляются условиями — например, кнопку можно отключить (disable). Настройте стиль каждого состояния отдельно, чтобы давать пользователям визуальную обратную связь без изменений в коде приложения.

Доступные состояния по типу элемента

Тип элемента	Встроенные состояния	Добавляемые состояния
Выбираемые элементы	Default, Selected	Disabled
Поля ввода	Default, Active, Invalid	Disabled
Любой элемент с взаимодействием по нажатию — кнопки, изображения, иконки, контейнеры и т. д.	Default	Disabled
Шаги индикатора прогресса	Completed, Current, Upcoming	—
Добавляемые состояния не отображаются по умолчанию — откройте States settings чтобы их добавить. Они управляются условиями: вы сами определяете, когда они активируются.

Как стилизовать состояние

Раздел States в правой панели выбранного элемента

Выберите элемент. Раздел States в правой панели отображает список состояний, которые поддерживает этот элемент.
В разделе States активируйте нужное состояние. При необходимости добавьте состояние Disabled на основе условий.
Измените любое свойство — заливку, рамку, типографику и т. д. Изменение применится только к этому состоянию. Вложенные элементы становятся состоятельными вместе с родительским. Любое изменение дочернего элемента применяется только в рамках активного состояния родителя.
Builder применяет подходящий стиль во время выполнения.

Состояния выбираемого элемента

Selectable element with Selected state activated and a style override applied

Выбираемые элементы — варианты квиза, продукты, вкладки, переключатели триала и любой кастомный выбираемый элемент — имеют два состояния из коробки:

Default: Стандартный вид элемента в состоянии покоя.
Selected: Применяется, когда пользователь нажимает на элемент. Builder возвращается к Default, когда пользователь снимает выбор с элемента. В группе с одним выбором выбор одного элемента снимает выбор с остальных. Группы с несколькими вариантами позволяют выбрать несколько элементов одновременно. Переключатели независимы — выбор одного не влияет на соседние. См. типы групп.

Нужно одинаково стилизовать одно состояние для нескольких элементов (например, варианты квиза)? Сначала настройте стиль одного элемента, затем продублируйте его. Стилизация состояния не переносится между соседними элементами — дублирование является текущим обходным решением.

Состояния поля ввода

Default: Стандартный вид поля в покое.
Active: Применяется, пока поле в фокусе.
Invalid: Применяется, когда содержимое поля не проходит валидацию. Например, если в поле email нет символа @. См. Валидация полей ввода.
Disabled: Поле неактивно и недоступно для взаимодействия. Это состояние добавляется вручную; см. Состояние Disabled на основе условий.

Каждое состояние настраивается так же, как у выбираемого элемента: активируйте нужное состояние и измените свойства.

Состояние Disabled на основе условий

Состояние Disabled запрещает пользователю взаимодействовать с элементом. В отличие от Default, Selected, Active или Invalid, состояние Disabled не активируется само по себе — для него нужно задать условие-триггер вручную.

Disabled доступно для:

Inputs: Любое поле ввода — текст, email, пароль, число, телефон, дата и/или время.
Selectable elements: Варианты квиза, продукты, вкладки, переключатели пробного периода и любой пользовательский выбираемый элемент.
Любой элемент с действием по нажатию: Например, кнопка, изображение или иконка, которые запускают навигационное действие.

Добавьте состояние Disabled

Панель настройки состояний с видимой опцией Add Disabled state

Чтобы добавить и настроить состояние Disabled:

Выберите нужный элемент.
В разделе States нажмите Settings .
Выберите Add Disabled state. Состояние Disabled появится в разделе States.
Рядом с новым состоянием Disabled нажмите Edit conditional state .
Добавьте условие. Если нужно заблокировать кнопку submit до тех пор, пока введённые данные не пройдут валидацию, сравните переменную isValid элемента ввода со значением false.
Оформите состояние Disabled визуально, чтобы обозначить ограничение (например, уменьшите прозрачность).

SDK оценивает условие во время выполнения и автоматически применяет состояние Disabled — изменения в коде приложения не требуются.

Состояния шагов для индикаторов прогресса

Основная статья: Индикаторы прогресса

Индикаторы прогресса показывают пользователю, насколько далеко он продвинулся в флоу онбординга. Каждый шаг имеет три состояния:

Completed: Шаги, которые пользователь уже прошёл.
Current: Текущий шаг пользователя.
Upcoming: Шаги, до которых пользователь ещё не дошёл.