Figma: https://www.figma.com/file/7kl4eBgLcnK6OYgM01XVig/Patterns?node-id=22%3A0

Паттерн form — это визуальное представление веб-формы, которая принимает и отправляет данные пользователя.

{
  block: 'form',
  content: [
    {
      elem: 'section',
      content: [
        {
          elem: 'item',
          content: [ ... ]
        },
        ...
      ]
    },
    ...
  ]
}

Живые примеры и дизайн

Модификаторы блока

Элементы блока

Элемент section

Обёртка для логической группы элементов item. Форма может не иметь section.

Модификаторы

Элемент item

Основные дочерние элементы паттерна — элементы item.

Модификаторы элемента

Элементы label и control

Используются в паре, когда лейбл и контрол должны стоять в одну строку. В этом случае у их родительского form должен быть модификатор structure.

{
  block: 'form',
  mods: { structure: 'horozontal' },
  content: [
    {
      elem: 'section',
      content: [
        {
          elem: 'item',
          content: [ 
            {
              elem: 'label',
              content: [ ... ]
            }
            {
              elem: 'control',
              content: [ ... ]
            }
          ]
        },
        ...
      ]
    },
    ...
  ]
}