Components

Fieldset

Use the fieldset component to group related form inputs.

See the GOV.UK Design System documentation on fieldsets for more information on when to use this component.

What is your address?

Address line 1

Address line 2 (optional)

Town

Postcode

<gv-fieldset 
  legend="What is your address?" 
  :legend-is-page-heading="true" 
  legend-class="govuk-fieldset__legend--l"
>
  <gv-input label="Address line 1" autocomplete="address-line1"/>
  <gv-input label="Address line 2 (optional)" autocomplete="address-line2"/>
  <gv-input label="Town" autocomplete="address-level2" class="govuk-!-width-two-thirds"/>
  <gv-input label="Postcode" autocomplete="postal-code" class="govuk-input--width-10"/>
</gv-fieldset>

If you’re using the components for radios, checkboxes or date input, the fieldset will already be included.

Props

Name	Type	Description
describedBy	string	One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
role	string	Optional ARIA role attribute to add to the fieldset container.
legend	string	Text to use within the legend. If content is provided in the `legend` slot, this prop will be ignored.
legendClass	string\|array\|object	Classes to add to the legend. You can bind a string, an array or an object, as with normal Vue class bindings.
legendIsPageHeading	boolean	Whether the legend also acts as the heading for the page.

Slots

Name	Description
legend	The content of the legend. If content is provided in this slot, the `legend` prop will be ignored.
default	The content of the fieldset.