---
title: "Состояния элементов"
description: "Задавайте стили элементов для каждого состояния и используйте условие для отключения элемента во время выполнения."
---

Интерактивные элементы флоу меняют внешний вид в зависимости от действий пользователя: выбранный вариант квиза становится **Selected**, сфокусированный ввод — **Active**. Некоторые состояния управляются условиями — например, кнопку можно **отключить** (disable). Настройте стиль каждого состояния отдельно, чтобы давать пользователям визуальную обратную связь без изменений в коде приложения.
<div style={{
  maxWidth: '560px',
  margin: '0 auto 2rem',
  position: 'relative',
  aspectRatio: '16/9',
  width: '100%'
}}>
  <iframe
    style={{
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%'
    }}
    src="https://www.youtube.com/embed/gdsNfHpKAqQ?si=VY5mqZgH1j0RB6fE"
    title="YouTube video player"
    frameBorder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerPolicy="strict-origin-when-cross-origin"
    allowFullScreen
  />
</div>
## Доступные состояния по типу элемента \{#available-states-by-element-kind\}

| Тип элемента | Встроенные состояния | Добавляемые состояния |
|---|---|---|
| [Выбираемые элементы](#selectable-element-states) | **Default**, **Selected** | **Disabled** |
| [Поля ввода](#input-states) | **Default**, **Active**, **Invalid** | **Disabled** |
| [Любой элемент с tap-взаимодействием](#condition-driven-disabled-state) — кнопки, изображения, иконки, стеки и т. д. | **Default** | **Disabled** |
| [Шаги индикатора прогресса](#step-states-for-progress-indicators) | **Completed**, **Current**, **Upcoming** | — |
**Добавляемые** состояния не отображаются по умолчанию — откройте **States settings** Settings чтобы их добавить. Они [**управляются условиями**](#condition-driven-disabled-state): вы сами определяете, когда они активируются.
## Как стилизовать состояние \{#how-to-style-a-state\}

1. Выберите элемент. В секции **States** правой панели отображаются поддерживаемые состояния элемента.
2. В секции **States** активируйте нужное состояние. При необходимости добавьте [состояние Disabled на основе условий](#condition-driven-disabled-state).
3. Измените любое свойство — заливку, рамку, типографику, текст и т. д. Изменение применяется только к этому состоянию.
Вложенные элементы становятся зависимыми от состояния родителя. Любое изменение дочернего элемента — цветов, расположения, текста — применяется только в активном состоянии родителя.

4. Во время выполнения Builder применяет соответствующий стиль.

:::tip
Состояние может менять *содержимое* текстового элемента, а не только его внешний вид. Builder воспринимает текстовый контент как свойство — такое же, как заливка или ширина рамки.
:::
## Состояния выбираемого элемента \{#selectable-element-states\}

Выбираемые элементы — варианты квиза, продукты, вкладки, переключатели триала и любой [кастомный выбираемый элемент](flow-selectable-elements#make-an-element-selectable) — имеют два состояния из коробки:

- **Default**: Стандартный вид элемента в состоянии покоя.
- **Selected**: Применяется, когда пользователь нажимает на элемент. Builder возвращается к Default, когда пользователь снимает выбор с элемента.
В группе с одним выбором выбор одного элемента снимает выбор с остальных. Группы с несколькими вариантами позволяют выбрать несколько элементов одновременно. Переключатели независимы — выбор одного не влияет на соседние. См. [типы групп](flow-selectable-elements#group-types).

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

- **Default**: Стандартный вид поля в покое.
- **Active**: Применяется, пока поле в фокусе.
- **Invalid**: Применяется, когда содержимое поля не проходит валидацию. Например, если в поле email нет символа `@`. См. [Валидация полей ввода](builder-inputs-and-forms#input-validation).
- **Disabled**: Поле неактивно и недоступно для взаимодействия. Это состояние добавляется вручную; см. [Состояние Disabled на основе условий](#condition-driven-disabled-state).

Каждое состояние настраивается так же, как у выбираемого элемента: активируйте нужное состояние и измените свойства.
## Состояние Disabled на основе условий \{#condition-driven-disabled-state\}

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

Disabled доступно для:
- **Inputs**: Любое [поле ввода](builder-inputs-and-forms) — текст, email, пароль, число, телефон, дата и/или время.
- **Selectable elements**: Варианты квиза, продукты, вкладки, переключатели пробного периода и любой [пользовательский выбираемый элемент](flow-selectable-elements#make-an-element-selectable).
- **Любой элемент с действием по нажатию**: Например, кнопка, изображение или иконка, которые запускают навигационное действие.
### Добавьте состояние Disabled \{#add-the-disabled-state\}

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

SDK оценивает условие во время выполнения и автоматически применяет состояние Disabled — изменения в коде приложения не требуются.
## Состояния шагов для индикаторов прогресса \{#step-states-for-progress-indicators\}

:::link
Основная статья: [Индикаторы прогресса](builder-loaders-and-progress-bars#step-states)
:::

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

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