FormGroup и организация полей

Основы FormGroup

FormGroup — это контейнер для организации связанных элементов формы, таких как текстовые поля, переключатели, радио-кнопки и флажки. Он обеспечивает единый визуальный и функциональный контекст для группы элементов, включая метку (label), описание (helper text) и обработку ошибок. В Carbon Components Svelte использование FormGroup помогает структурировать форму, делая её более понятной и доступной.

Форма может содержать несколько FormGroup, каждый из которых логически объединяет элементы по смыслу. Например, группа контактной информации может включать поля «Имя», «Фамилия» и «Email».

Атрибуты FormGroup

  • legend: текст, отображаемый в качестве заголовка группы. Обычно используется для группировки радио-кнопок или чекбоксов.
  • class: возможность добавлять кастомные классы для стилизации.
  • disabled: если установлен, все элементы внутри группы становятся неактивными.
  • invalid и invalidText: позволяют визуально указать на ошибку в группе или дать текст ошибки.

Организация полей внутри FormGroup

  1. Вертикальное расположение – стандартное поведение. Поля располагаются одно под другим, с равными отступами.
  2. Горизонтальное расположение – возможно с использованием вспомогательных CSS-классов. Например, для компактного размещения двух полей в одной строке можно использовать bx--row и bx--col:
  1. Вложенные группы – FormGroup можно вкладывать друг в друга для создания сложных структур, например, адрес с отдельными секциями «Улица», «Город», «Регион» и «Индекс».

Использование с радиокнопками и чекбоксами

FormGroup особенно полезен для радиокнопок и чекбоксов, так как позволяет задать общий заголовок и контролировать состояние группы. Все элементы внутри группы получают связку с legend для правильной семантики.

Обработка ошибок и валидация

Для организации полей важно учитывать валидацию. Carbon Components Svelte предоставляет встроенную поддержку для отображения ошибок на уровне FormGroup или отдельных компонентов. Основные подходы:

  • Ошибки на уровне группы — используется, когда группа должна быть заполнена полностью (например, хотя бы один чекбокс выбран).
  • Ошибки на уровне поля — для индивидуальной проверки каждого элемента (например, формат email).

Доступность и семантика

FormGroup обеспечивает корректную семантику, используя

и . Это критически важно для доступности: экранные считыватели правильно определяют, что элементы принадлежат одной логической группе. Для повышения доступности следует:

  • Использовать описательные легенды.
  • Добавлять helper text через helperText или aria-describedby.
  • В случае ошибок использовать invalidText, связанный с полем через ARIA.

Компоновка сложных форм

Для сложных форм рекомендуется:

  • Разделять форму на логические блоки с помощью FormGroup.
  • Использовать вложенные группы для уточнения структуры.
  • Применять CSS-сетки (bx--row, bx--col) для горизонтального выравнивания.
  • Поддерживать единый стиль ошибок и подсказок.

Эти подходы позволяют создавать формы, которые одновременно красивы, функциональны и удобны для пользователя.

Оглавление