Поле флажка
С легкостью собирайте соглашения и множественный выбор. От простых флажков «да/нет» до списков с множественным выбором, включающих «Выбрать все», элементы управления «минус/макс» и продуманные макеты — поле «Флажок» обрабатывает как отдельные соглашения, так и вопросы с несколькими вариантами ответа, обеспечивая мощную проверку данных и удобные для пользователя параметры.
Два режима для каждой потребности в флажках
Идеально для:
Мощные функции для любого сценария использования
Два режима флажков
Режим одного флажка:
Один флажок для вопросов типа «да/нет», соглашений или согласия. Идеально подходит для принятия условий, подписки на новостную рассылку и форм согласия.
Случаи использования:
- «Я согласен с условиями».
- «Подпишите меня на рассылку»
- «Да, я хочу получать обновления».
- «Подтверждаю точность данной информации».
Требования:
- Текст для пользовательской метки флажка
- Состояние по умолчанию: отмечено/не отмечено
- Вводимое пользователем значение (да, 1, истинно и т. д.)
- Обязательный параметр проверки
Режим нескольких флажков:
Множество вариантов, позволяющих пользователям выбрать несколько из них. Идеально подходит для вопросов типа «Выберите все подходящие варианты», сбора информации о предпочтениях и опросов с несколькими вариантами ответа.
Случаи использования:
- «Какие функции вас интересуют?» (несколько вариантов ответа)
- «Выберите предпочтительные способы связи»
- «Выберите все необходимые вам услуги»
- «Какие темы вас интересуют?» (отметьте несколько вариантов)
Требования:
- Неограниченное количество вариантов флажков
- Три варианта оформления
- Опция «Выбрать все»
- Минимальные/максимальные пределы выбора
- «Другое» с текстовым полем ввода
- Вариант «Ни один из вышеперечисленных» является эксклюзивным.
🎨 Три варианта компоновки (многорежимный режим)
Вертикальная (наложенная) компоновка:
Флажки располагаются по одному на строку, вертикально друг над другом. Наиболее удобный для чтения макет для длинных описаний вариантов.
Лучшие для:
- Длинный текст варианта
- 3-10 варианта
- Формы, ориентированные на мобильные устройства
- Максимальная читаемость
Горизонтальная (расположение рядом) компоновка:
Флажки располагаются в ряд, рядом друг с другом. Компактный макет для коротких заголовков.
Лучшие для:
- 2-5 коротких вариантов
- Компактные формы
- Макеты рабочего стола
- Эффективность использования пространства
Сетка (несколько столбцов):
Флажки расположены в двухколоночной сетке. Сбалансированная компоновка, экономящая место и сохраняющая читаемость.
Лучшие для:
- 4-12 варианта
- Метки средней длины
- Сбалансированный дизайн
- Профессиональная внешность
Реакционное поведение:
Все макеты автоматически адаптируются к экранам мобильных устройств, располагаясь друг над другом при необходимости для улучшения взаимодействия с сенсорным экраном.
✨ Опция «Выбрать все»
Выбор в один клик:
Добавьте в верхней части списка специальный флажок «Выбрать все». Пользователи смогут одним щелчком отметить/снять отметку со всех пунктов.
Разумное поведение:
- Одновременно проверяет все стандартные параметры.
- При повторном нажатии все флажки снимаются.
- Автоматически снимает отметку, если какой-либо параметр не выбран.
- Отображает неопределенное состояние при выборе некоторых (но не всех) опций.
- Исключает вариант «Ничего из вышеперечисленного» из списка «Выбрать все».
Идеально для:
- Длинные списки с флажками (5+ вариантов)
- Формы, в которых пользователи часто выбирают всё подряд.
- Вопросы с пометкой «Отметьте все подходящие варианты»
- Выбор разрешений и функций
Пользовательский опыт:
Экономит время при работе с длинными списками. Пользователи могут выбрать все элементы, а затем снять отметки с конкретных исключений.
✏️ Вариант «Другое» с текстовым полем ввода
Пользовательский сбор ответов:
Добавьте флажок «Другое», который при выборе отображает текстовое поле. Пользователи могут указать свой собственный ответ, если предустановленные варианты не подходят.
Как это работает:
- Флажок «Другое» находится внизу списка.
- Если этот флажок установлен, появляется поле ввода текста.
- Пользователи вводят собственный ответ
- Отображаются как выбранные флажки, так и текст.
Случаи использования:
- «Предпочтительный способ связи: …Другое (укажите, пожалуйста)»
- «Интересы: …Другие темы»
- «Как вы узнали о нас: …Другой источник»
- Любой список, который не может
Бенефиты:
Фиксирует неожиданные ответы, обеспечивает гибкость, предотвращает выбор «насильственным путем» и повышает качество данных.
❌ Вариант «Ни один из вышеперечисленных»
Эксклюзивный невыбор:
Добавьте опцию «Ничего из вышеперечисленного», которая при нажатии автоматически снимает отметку со всех остальных пунктов.
Умная эксклюзивность:
- Если выбран пункт «Нет», все остальные параметры автоматически снимаются.
- Если выбран любой другой параметр, флажок «Нет» автоматически снимается.
- Предоставляет понятный способ указать, что ни один из вариантов не подходит.
- Предотвращает противоречивые выборы
Случаи использования:
- Дополнительные вопросы о предпочтениях
- «Выберите все аллергии: …Ни одной из вышеперечисленных»
- Проверяющие квалификацию
- Выбор интересов
Зачем это включать:
Предотвращает отказ от заполнения формы, демонстрирует тщательность, предоставляет явный вариант ответа «нет» и повышает точность данных.
📊 Элементы управления выбором минимального/максимального значения
Количество выбранных элементов управления:
Установите минимальное и максимальное количество флажков, которые должны/могут быть выбраны.
Минимальный набор вариантов:
Необходимо потребовать от пользователей выбрать как минимум X вариантов. Форма не будет отправлена, пока это требование не будет выполнено.
Примеры:
- «Выберите как минимум 2 интереса» (минимум: 2)
- Выберите минимум 3 варианта (минимум: 3)
- «Выберите хотя бы 1 вариант» (минимум: 1)
Максимальное количество вариантов выбора:
Ограничьте выбор пользователями не более чем X вариантов. Флажки отключаются после достижения лимита.
Примеры:
- «Выберите 3 наиболее важных для вас функции» (максимум: 3)
- Выберите до 5 услуг (максимум: 5)
- Выберите не более 2 вариантов (максимум: 2)
Очистить обратную связь:
Пользователи видят сообщения об ошибке, например: «Пожалуйста, выберите как минимум 2 варианта» или «Допускается максимум 3 варианта выбора».
🔧 Простое управление опционами
Полный контроль над выбором:
- Добавить параметры — введите текст и нажмите Enter или щелкните «Добавить параметр». Создавайте списки с флажками за считанные секунды.
- Редактировать параметры — Обновляйте отображаемый текст (то, что видят пользователи) и значения (то, что вводится) независимо друг от друга.
- По умолчанию отмечено — предварительно выберите определенные флажки, установив флажок рядом с каждым вариантом.
- Параметры изменения порядка — используйте стрелки вверх/вниз, чтобы расположить флажки в нужном порядке.
- Удаление параметров – Удаляет ненужные параметры одним щелчком мыши.
Внешний вид против ценности:
- Метка: Что видят пользователи (например, «Уведомления по электронной почте»)
- Значение: Что хранится (например, «email_updates»)
Массивное строительство:
Быстро добавляйте несколько вариантов, вводя текст и нажимая Enter, затем снова вводя текст и нажимая Enter — быстрое создание списков с флажками.
☑️ Функции с одним флажком
Параметры настройки:
Текст подписи флажка:
Текст, отображаемый рядом с флажком. Сделайте его ясным и конкретным (например, «Я согласен получать маркетинговые письма»).
Состояние по умолчанию:
Установите флажок при загрузке формы. Используйте с осторожностью – пользователи должны осознанно устанавливать флажки в полях соглашения.
Пользовательское значение:
Укажите, какое значение будет отправлено при установке флажка (обычно «да», «1» или «истина»). Значение по умолчанию — «да».
Необходимая проверка:
Сделайте флажок обязательным. Пользователи должны поставить галочку, чтобы отправить форму. Идеально подходит для обязательных соглашений.
🔀 Условная логика
Динамическая видимость флажков:
Показывать или скрывать поля с флажками в зависимости от других значений формы. Отображать параметры только при необходимости.
Расширенные правила логики:
Логика И – все условия должны быть выполнены.
Логика ИЛИ – любое условие может инициировать действие.
8 операторов: Равно, Не равно, Больше, Меньше, Содержит, Пусто и больше.
Случаи использования:
Флажки «Настройки доставки» отображаются только в том случае, если установлен флажок «Требуется доставка».
Отображать «Темы новостной рассылки», если установлен флажок подписки.
Отображать раздел «Дополнительные услуги», если тип услуги равен «Премиум».
Скрыть раздел «Варианты скидок», если общая сумма заказа меньше 50 долларов.
🎯 Улучшенный пользовательский опыт
Встроенные интеллектуальные функции:
- Визуальные индикаторы – четкие флажки с правильным интервалом.
- Навигация с помощью клавиатуры – удобное переключение между опциями с помощью клавиши Tab.
- Удобный сенсорный интерфейс – большие области касания для мобильных устройств
- Выбор по умолчанию – предварительная проверка определенных параметров
- Пользовательские CSS-классы — применение стилей к группам флажков
- Поддержка специальных возможностей – метки ARIA, совместимость с программами чтения с экрана.
- Оптимизировано для мобильных устройств – идеальные размеры флажков для сенсорного управления.
- Четкие подписи – читаемый текст с правильным выравниванием.
- Обязательная проверка – очистка сообщений об ошибках.
- Текст справки — Добавление описаний для сложных групп флажков
Простая настройка в 3 шага.
Подготовьте поле "Флажок" за считанные минуты.
Добавить поле "Флажок"
Перетащите поле «Флажок» из раздела «Основные поля» в форму.
Выберите режим
Для вопросов с ответами «да/нет» выберите «Один флажок», а для вопросов с несколькими вариантами ответа — «Несколько флажков».
Настроить параметры
Для одного флажка: задайте метку и значение флажка. Для нескольких флажков: добавьте параметры, выберите макет, при необходимости включите параметры «Выбрать все» или «Другие», а также задайте минимальное/максимальное количество выбранных элементов.
🎉 Вот и всё! Ваше поле с флажком готово и теперь поддерживает интеллектуальную проверку данных.
Реальные приложения
Соглашения и согласие
* Принятие условий и положений
* Соглашения о политике конфиденциальности
* Согласие на получение электронных писем
* Подписка на новостную рассылку
Опросы и отзывы
* Вопросы с выбором подходящих вариантов
* Выбор нескольких интересов
* Сбор предпочтений по функциям
* Выбор тем и интересов
Электронная коммерция
* Выбор характеристик продукта
* Дополнительные услуги
* Варианты доставки
* Настройки уведомлений
Регистрационные формы
* Предпочтения в общении
* Категории интересов
* Настройки разрешений
* Выбор доступа к функциям
Области применения
* Специалисты по проверке квалификации
* Выбор навыков
* Области интересов
* Варианты доступности
Настройки и предпочтения
* Настройки учетной записи
* Параметры конфиденциальности
* Настройки уведомлений
* Переключатели функций
Полные параметры поля
Базовая конфигурация
- Метка поля – Вопрос или заголовок, отображаемый над флажками.
- Описание/Текст справки – Дополнительные указания для пользователей
- Обязательное поле – Сделайте флажки обязательными
- Заполнитель – Не применяется к флажкам
Режим флажков
Выберите тип режима:
- Один флажок – вопрос «Да/Нет», согласие или выбор (один флажок)
- Несколько флажков – Варианты выбора из нескольких пунктов (несколько флажков)
Варианты с одним флажком
- Текст рядом с флажком – надпись, отображаемая рядом с флажком (например, «Я согласен с условиями»).
- Начало отмечено – флажок устанавливается автоматически при загрузке формы
- Значение при установке флажка – значение данных сохраняется при установке флажка (по умолчанию: «да»).
Варианты с несколькими флажками
Стиль макета:
- Расположение в ряд (по одному на строку) – вертикальное расположение.
- Расположение рядом (в ряд) – горизонтальное расположение
- Сетка (несколько столбцов) – двухколоночная сетка.
Варианты флажков:
Составьте список вариантов:
- Отображаемый текст – то, что видят пользователи (например, «Электронная почта»).
- Ценность – что именно было отправлено (например, «электронная почта»).
- По умолчанию выбрано — предварительно выберите определенные параметры
- Изменить порядок — переместить параметры вверх/вниз
- Удалить – удалить параметры
Специальные опции:
- Добавить опцию «Выбрать все» — добавляет флажок вверху, позволяющий выбрать/снять выбор со всех пунктов.
- Добавить опцию «Другое» с текстовым полем — добавляет опцию «Другое» с текстовым полем для пользовательских ответов.
- Добавить опцию «Ни один из вышеперечисленных вариантов» — добавляет эксклюзивный вариант, который при выборе снимает отметку со всех остальных.
Ограничения выбора:
- Минимальное количество необходимых выборов – наименьшее количество флажков, которые необходимо выбрать (например, 2).
- Максимально допустимое количество выборов – максимальное количество флажков, которые можно выбрать (например, 5).
Условная логика
- Включить условную логику — показывать/скрывать в зависимости от условий.
- Тип логики
- Все условия должны быть соблюдены (И)
- Любое условие может быть выполнено (ИЛИ)
- Условия Правила
- Показать/Скрыть – Действие, которое необходимо выполнить
- Поле – Какое поле нужно отметить
- Операторы: Равно, Не равно, Содержит, Больше, Меньше, Пусто, Не пусто
- Ценность – Сравнительная ценность
- Множество условий – добавляйте неограниченное количество правил
Дополнительные параметры
- Скрытое поле — сделать поле невидимым (не рекомендуется для флажков).
- Пользовательские CSS-классы — применение пользовательских стилей.
- Атрибуты доступности – метки ARIA для программ чтения с экрана.
Почему стоит выбрать наше поле для ввода флажка?
✅ Два режима – Один флажок или несколько флажков в одном типе поля
✅ Гибкие макеты – Вертикальное, горизонтальное или сетчатое расположение
✅ Выбрать все – Выбор одним щелчком мыши для удобства
✅ Другой вариант – Текстовое поле для ввода пользовательских ответов
✅ Вариант «Нет» – Исключительный выбор, не предполагающий выбора
✅ Мин/макс пределы – Контроль количества выбора
✅ Простое управление – Добавляйте, редактируйте, меняйте порядок и удаляйте параметры без усилий.
✅ Удобный – Четкие надписи, правильное расстояние между элементами, удобный для сенсорного управления
✅ Полностью интегрированный – Бесперебойно работает со всеми функциями формы.
Часто задаваемые вопросы (FAQ)
В: В чем разница между режимами с одним и несколькими флажками?
В одиночном режиме отображается один флажок для выбора «да/нет». В многопользовательском режиме отображается несколько флажков, где пользователи могут выбрать более одного варианта.
В: Могут ли пользователи выбрать все флажки одновременно?
Да. Включите параметр «Выбрать все», чтобы добавить флажок, который позволяет одним щелчком отметить или снять отметку со всех пунктов.
В: Как работают минимальные/максимальные значения при выборе?
Минимальное количество вариантов гарантирует, что пользователи выберут как минимум определенное число опций. Максимальное количество вариантов ограничивает число флажков, которые они могут выбрать.
В: Что делает опция «Другое»?
Добавляется дополнительный флажок с надписью «Другое». При выборе этого флажка появляется текстовое поле, куда пользователи могут ввести свой собственный ответ.
В: Как работает вариант «Ни один из вышеперечисленных»?
Это эксклюзивный выбор. Если он выбран, все остальные флажки снимаются. Если выбран какой-либо другой вариант, флажок «Нет» автоматически снимается.
В: Могу ли я предварительно выбрать определенные флажки?
Да. В одиночном режиме включите параметр «Начать отмечено». В многопользовательском режиме отметьте галочкой каждый параметр, который вы хотите выбрать по умолчанию.
В: Нужно ли мне предварительно отметить галочками поля соглашения?
Нет. Что касается политик, условий и согласия, пользователи должны сами поставить галочку в соответствующем поле.
В: Могу ли я изменить порядок флажков?
Да. Используйте стрелки вверх и вниз рядом с каждым вариантом, чтобы изменить их порядок по своему усмотрению.
В: В чём разница между отображаемым текстом и значением?
Отображаемый текст — это то, что видят пользователи. Значение — это то, что сохраняется в вашей базе данных для обеспечения чистоты и согласованности данных.
В: Можно ли использовать условную логику с флажками?
Да. Можно активировать другие поля на основе выбранных значений, используя операторы «Равно», «Пусто» или «Не пусто».
В: Как создать обязательный флажок?
Включите параметр «Обязательное поле». В однопользовательском режиме этот флажок должен быть установлен. В многопользовательском режиме пользователи должны выбрать хотя бы один вариант или выполнить минимальные требования.
В: Могут ли пользователи изменить свой выбор после подтверждения?
Да. Пользователи могут свободно отмечать или снимать отметки с любых опций перед отправкой формы. Функцию «Выбрать все» также можно включить или выключить в любой момент.
