Fieldset

Use a Fieldset component to group related fields together.

from django import forms

from crispy_forms_gds.helper import FormHelper
from crispy_forms_gds.layout import Field, Fieldset, Fluid, Layout, Size


    class FieldsetForm(forms.Form):

        street1 = forms.CharField(label="Building and street")
        street2 = forms.CharField(label="")
        city = forms.CharField(label="Town or city")
        county = forms.CharField(label="County")
        postcode = forms.CharField(label="Post code")

        def __init__(self, *args, **kwargs):
            super(FieldsetForm, self).__init__(*args, **kwargs)
            self.helper = FormHelper()
            self.helper.layout = Layout(
                Fieldset(
                    Field.text("street1", field_width=Fluid.THREE_QUARTERS),
                    Field.text("street2", field_width=Fluid.THREE_QUARTERS),
                    Field.text("city", field_width=Fluid.ONE_HALF),
                    Field.text("county", field_width=Fluid.ONE_HALF),
                    Field.text("postcode", field_width=Fluid.ONE_QUARTER),
                    legend="What is your address?",
                    legend_size=Size.LARGE,
                    legend_tag="h1",
                )
            )

You can see this form live in the Demo site.

Notice that the label on the street2 field was set to an empty string. If you simply don’t set the label or set it to None Django will display the name of field.

The positional arguments are the list of fields, other layout object or composed layouts that make up the group. The Field.text() class method is used as it simplifies setting the CSS class that defines the width of a field, for example govuk-!-width-three-quarters. The Design System components are configured using a mix of CSS classes, added attributes and template variables so the class methods on Field and other layout classes make a life a lot easier.

The keyword arguments, legend, legend_size and legend_tag are used to define the legend for the fieldset. The legend attribute is obvious enough. You will need to set the legend_size otherwise the legend will be the same size as body text, which is a bit unimposing. The Size class defines a set of string constants, SMALL, MEDIUM, LARGE and EXTRA_LARGE to make things a little more readable but you can just use the corresponding values: 's', 'm', 'l' or 'xl' directly if you prefer. The legend_tag argument is used to promote the fieldset’s <legend> element to become the page title. Typically a Fieldset would be displayed as a single element on a multi-page form. Adding an <h1> element to the page would just add irritating duplication, particularly for users of screen readers, so wrapping the legend in a heading tag avoids this. You can wrap other tags as well. If you have two fieldsets on a page then it makes sense to add a page title and wrap the fieldsets in an <h2> tag.