---
metadata:
  - name: generator
    content: Diplodoc Platform v5.70.0
alternate:
  - https://divkit.tech/docs/en/concepts/switch.md
  - https://divkit.tech/docs/ru/concepts/switch.md
  - href: https://divkit.tech/docs/ru/concepts/switch.md
    type: text/markdown
    title: Markdown version
  - href: https://divkit.tech/docs/ru/llms.txt?revision=r22102947
    rel: describedby
---
> **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/ru/llms.txt?revision=r22102947

# Переключатель

Элемент [switch](https://divkit.tech/docs/ru/concepts/divs/2/div-switch.md) — это переключатель с двумя состояниями: включен и выключен. Состояние хранится в [переменной](https://divkit.tech/docs/ru/concepts/variables.md) типа `boolean`, поэтому его можно использовать в выражениях и менять с помощью действий. Внешний вид переключателя определяет платформа, а в верстке настраивается только цвет включенного состояния.

## Свойства элемента switch {#params}

- `is_on_variable` — **string**, обязательный параметр. Имя переменной типа `boolean`, в которой хранится состояние переключателя. Выражения в этом параметре не поддерживаются.
- `is_enabled` — **bool**, значение по умолчанию: `true`. Определяет, может ли пользователь переключать элемент. Со значением `false` переключатель не реагирует на нажатия и выглядит неактивным.
- `on_color` — **color**. Цвет переключателя во включенном состоянии в формате `#RGB`, `#ARGB`, `#RRGGBB` или `#AARRGGBB`. Если параметр не задан, используется цвет по умолчанию, который [зависит от платформы](#platforms).

Параметры `is_enabled` и `on_color` поддерживают [выражения](https://divkit.tech/docs/ru/concepts/expressions.md). Остальные свойства — размеры, отступы, видимость и другие — у переключателя общие с другими элементами. Подробное описание свойств элемента `switch` приведено в [справочнике](https://divkit.tech/docs/ru/concepts/divs/2/div-switch.md) элементов.

## Связь с переменной {#variable}

Объявите переменную типа `boolean` и укажите ее имя в параметре `is_on_variable`. Переключатель и переменная связаны в обе стороны:

- Когда пользователь нажимает на переключатель, в переменную записывается новое значение: `true` для включенного состояния и `false` для выключенного.
- Когда значение переменной меняется, например после действия [`set_variable`](https://divkit.tech/docs/ru/concepts/variables.md#modify), переключатель принимает соответствующее положение. Это происходит, даже если переключатель отключен параметром `is_enabled`.

У элемента `switch` нет действий по нажатию (`actions`). Чтобы реагировать на переключение, используйте [триггеры](https://divkit.tech/docs/ru/concepts/triggers.md) на переменной из `is_on_variable` или подставляйте эту переменную в [выражения](https://divkit.tech/docs/ru/concepts/expressions.md) в свойствах других элементов.

В примере два переключателя управляют переменными `notifications_enabled` и `sound_enabled`. Второй переключатель доступен, только пока включен первый, а триггер выключает звук, когда пользователь отключает уведомления.

{% cut "Пример кода" %}

```json translate=no
{
  "card": {
    "log_id": "switch_sample",
    "variables": [
      {
        "name": "notifications_enabled",
        "type": "boolean",
        "value": true
      },
      {
        "name": "sound_enabled",
        "type": "boolean",
        "value": false
      }
    ],
    "variable_triggers": [
      {
        "condition": "@{!notifications_enabled}",
        "mode": "on_condition",
        "actions": [
          {
            "log_id": "turn_sound_off",
            "url": "div-action://set_variable?name=sound_enabled&value=false"
          }
        ]
      }
    ],
    "states": [
      {
        "state_id": 0,
        "div": {
          "type": "container",
          "orientation": "vertical",
          "paddings": {
            "left": 16,
            "top": 12,
            "right": 16,
            "bottom": 12
          },
          "items": [
            {
              "type": "container",
              "orientation": "horizontal",
              "content_alignment_vertical": "center",
              "items": [
                {
                  "type": "text",
                  "text": "Notifications",
                  "font_size": 16
                },
                {
                  "type": "switch",
                  "id": "notifications_switch",
                  "is_on_variable": "notifications_enabled",
                  "on_color": "#0077FF",
                  "width": {
                    "type": "wrap_content"
                  },
                  "accessibility": {
                    "description": "Notifications"
                  }
                }
              ]
            },
            {
              "type": "container",
              "orientation": "horizontal",
              "content_alignment_vertical": "center",
              "margins": {
                "top": 12
              },
              "items": [
                {
                  "type": "text",
                  "text": "Sound",
                  "font_size": 16
                },
                {
                  "type": "switch",
                  "id": "sound_switch",
                  "is_on_variable": "sound_enabled",
                  "is_enabled": "@{notifications_enabled}",
                  "on_color": "#0077FF",
                  "width": {
                    "type": "wrap_content"
                  },
                  "accessibility": {
                    "description": "Sound"
                  }
                }
              ]
            }
          ]
        }
      }
    ]
  }
}
```

{% endcut %}

## Размер и расположение {#layout}

Переключатель не растягивается: он сохраняет размер, принятый на платформе. Параметры `width` и `height` задают размер области элемента, а сам переключатель располагается в ее центре.

Ширина элемента по умолчанию — `match_parent`. Чтобы поставить переключатель в одну строку с текстом, как в примере выше, задайте ему ширину `wrap_content`.

## Особенности платформ {#platforms}

Цвет по умолчанию, который используется, если параметр `on_color` не задан:

- iOS — стандартный системный цвет;
- Android — цвет из атрибута темы `colorControlActivated`;
- Web — `#129386`.

Применение параметра `on_color`:

- iOS — в этот цвет окрашивается трек включенного переключателя;
- Android и Web — в этот цвет окрашивается бегунок, а трек получает тот же цвет с дополнительной прозрачностью.

Ограничения на платформе Web:

- Переключатель не отрисовывается, если он вложен в элемент, у которого заданы действия `actions`, или если для него либо для родительского элемента указан режим доступности `exclude`. В обработчик `onError` при этом передается ошибка.
- Если для переключателя не задано описание `accessibility.description`, в обработчик `onError` передается предупреждение. Описание используется как подпись переключателя для средств доступности.

<!-- source: ru/_includes/index/troubleshooting.md -->
## Узнать больше {#troubleshooting}

Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: [https://t.me/divkit_community_ru](https://t.me/divkit_community_ru).



[Репозиторий DivKit](https://github.com/divkit/divkit)




<!-- endsource: ru/_includes/index/troubleshooting.md -->