Form Fieldset A fieldset is for grouping one or many form inputs. Important Notes: All inputs must be wrapped with a fieldset using form-fieldset.twig. Multiple fieldsets can be used if it is necessary to group certain form inputs. Each fieldset must have a legend. Use legendTitle to set the legend text; use legendSize to set the legend text size. To visually hide a legend, use legendAttributes to add the class u-bolt-visuallyhidden. This will still allow screen readers to access the legend. Set helper text for a fieldset via the descriptionText prop. Set error messages for a fieldset via the errors prop. Demo

Account Info

Personal Info

This is an error message for this specific fieldset.
Helper text for this specific fieldset.
Twig
{% set form_children %}
  {% set fieldset_children %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Email input type',
        displayType: 'floating',
        attributes: {
          for: 'email',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter email',
          type: 'email',
          id: 'email',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}

    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Password input type',
        displayType: 'floating',
        attributes: {
          for: 'password',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter password',
          type: 'password',
          id: 'password',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}
  {% endset %}

  {% include '@bolt-components-form/form-fieldset.twig' with {
    legendTitle: 'Account Info',
    children: fieldset_children,
  } only %}

  {% set fieldset_children %}
    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Text input type',
        displayType: 'floating',
        attributes: {
          for: 'text',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter text',
          type: 'text',
          id: 'text',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}

    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'URL input type',
        displayType: 'floating',
        attributes: {
          for: 'url',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter URL',
          type: 'url',
          id: 'url',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}

    {% set label %}
      {% include '@bolt-components-form/form-label.twig' with {
        title: 'Telephone input type',
        displayType: 'floating',
        attributes: {
          for: 'tel',
        },
      } only %}
    {% endset %}
    {% set input %}
      {% include '@bolt-components-form/form-input.twig' with {
        attributes: {
          placeholder: 'Enter telephone number',
          type: 'tel',
          id: 'tel',
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-form/form-element.twig' with {
      label: label,
      children: input,
    } only %}
  {% endset %}

  {% set icon_info_circle %}
    {% include '@bolt-elements-icon/icon.twig' with {
      name: 'info-circle',
    } only %}
  {% endset %}

  {% set icon_warning %}
    {% include '@bolt-elements-icon/icon.twig' with {
      name: 'warning',
    } only %}
  {% endset %}

  {% include '@bolt-components-form/form-fieldset.twig' with {
    legendTitle: 'Personal Info',
    children: fieldset_children,
    descriptionText: icon_info_circle ~ '<small>Helper text for this specific fieldset.</small>',
    errors: icon_warning ~ ' This is an error message for this specific fieldset.'
  } only %}
{% endset %}

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