Use Case: Multiple Columns Use the grid to create multi-column form layouts. Demo View full page demo
Twig
{% set form_children %}
  {% set category_input %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Category',
        displayType: 'floating',
        attributes: {
          for: 'category',
        },
      } only %}
    {% endset %}
    {% set select %}
      {% include '@bolt-components-form/form-select.twig' with {
        options: [
          {
            type: 'option',
            value: '',
            label: '- Select a category -',
          },
          {
            type: 'option',
            value: 'option-a',
            label: 'Option A'
          },
          {
            type: 'option',
            value: 'option-b',
            label: 'Option B'
          }
        ],
        attributes: {
          id: 'category',
          required: true,
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: select,
    } only %}
  {% endset %}
  {% set first_name_input %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'First name',
        displayType: 'floating',
        attributes: {
          for: 'first-name',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter first name',
          type: 'text',
          id: 'first-name',
          required: true,
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}
  {% endset %}
  {% set last_name_input %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Last name',
        displayType: 'floating',
        attributes: {
          for: 'last-name',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter last name',
          type: 'text',
          id: 'last-name',
          required: true,
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}
  {% endset %}
  {% set work_email_input %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Work email',
        displayType: 'floating',
        attributes: {
          for: 'work-email',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter work email',
          type: 'email',
          id: 'work-email',
          required: true,
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}
  {% endset %}
  {% set phone_number_input %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Phone number',
        displayType: 'floating',
        attributes: {
          for: 'phone-number',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter phone number',
          type: 'tel',
          id: 'phone-number',
          required: true,
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}
  {% endset %}
  {% set country_input %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Country',
        displayType: 'floating',
        attributes: {
          for: 'country',
        },
      } only %}
    {% endset %}
    {% set select %}
      {% include '@bolt-components-form/form-select.twig' with {
        options: [
          {
            type: 'option',
            value: '',
            label: '- Select a country -',
          },
          {
            type: 'option',
            value: 'option-a',
            label: 'Option A'
          },
          {
            type: 'option',
            value: 'option-b',
            label: 'Option B'
          }
        ],
        attributes: {
          id: 'country',
          required: true,
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: select,
    } only %}
  {% endset %}
  {% set message_input %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Message',
        displayType: 'floating',
        attributes: {
          for: 'message',
        },
      } only %}
    {% endset %}
    {% set textarea %}
      {% include '@bolt-components-form/form-textarea.twig' with {
        attributes: {
          placeholder: 'Enter a message',
          rows: 5,
          required: true,
          id: 'message',
        }
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: textarea,
    } only %}
  {% endset %}
  {% set agreement_input %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
        displayType: 'inline-checkbox',
        attributes: {
          for: 'agreement',
          name: 'agreement',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          type: 'checkbox',
          id: 'agreement',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}
  {% endset %}
  {% set submit_button %}
    {% include '@bolt-elements-button/button.twig' with {
      content: 'Send',
      display: 'block',
      attributes: {
        type: 'submit'
      },
    } only %}
  {% endset %}


  {% include '@bolt-components-grid/grid.twig' with {
    items: [
      {
        column_start: '1',
        column_span: '12',
        content: category_input,
      },
      {
        column_start: '1',
        column_span: '12 6@small',
        content: first_name_input,
      },
      {
        column_start: '1 7@small',
        column_span: '12 6@small',
        content: last_name_input,
      },
      {
        column_start: '1',
        column_span: '12 6@small',
        content: work_email_input,
      },
      {
        column_start: '1 7@small',
        column_span: '12 6@small',
        content: phone_number_input,
      },
      {
        column_start: '1',
        column_span: '12',
        content: country_input,
      },
      {
        column_start: '1',
        column_span: '12',
        content: message_input,
      },
      {
        column_start: '1',
        column_span: '12',
        content: agreement_input,
      },
      {
        column_start: '1',
        column_span: '12',
        content: submit_button,
      },
    ]
  } only %}
{% endset %}

{% include '@bolt-components-form/form.twig' with {
  children: form_children,
} only %}
HTML
Not available in plain HTML. Please use Twig.