Fieldset

Standard

Extra large legend

Use an extra large legend when the fieldset is the main focus of the page.

What is your address?

Show code

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
    What is your address?
  </legend>
</fieldset>

---
import { Fieldset, FieldsetLegend } from "@i-dot-ai-npm/component-library-astro";
---

<Fieldset>
  <FieldsetLegend size="xl">What is your address?</FieldsetLegend>
</Fieldset>

import { Fieldset, FieldsetLegend } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <Fieldset>
      <FieldsetLegend size="xl">What is your address?</FieldsetLegend>
    </Fieldset>
  );
}

<script>
  import { Fieldset, FieldsetLegend } from "@i-dot-ai-npm/component-library-svelte";
</script>

<Fieldset>
  <FieldsetLegend size="xl">What is your address?</FieldsetLegend>
</Fieldset>

import { Fieldset, FieldsetLegend } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <Fieldset>
      <FieldsetLegend size="xl">What is your address?</FieldsetLegend>
    </Fieldset>
  );
}

Large legend

Use a large legend for a fieldset that is an important part of the page.

What is your address?

Show code

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
    What is your address?
  </legend>
</fieldset>

---
import { Fieldset, FieldsetLegend } from "@i-dot-ai-npm/component-library-astro";
---

<Fieldset>
  <FieldsetLegend size="large">What is your address?</FieldsetLegend>
</Fieldset>

import { Fieldset, FieldsetLegend } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <Fieldset>
      <FieldsetLegend size="large">What is your address?</FieldsetLegend>
    </Fieldset>
  );
}

<script>
  import { Fieldset, FieldsetLegend } from "@i-dot-ai-npm/component-library-svelte";
</script>

<Fieldset>
  <FieldsetLegend size="large">What is your address?</FieldsetLegend>
</Fieldset>

import { Fieldset, FieldsetLegend } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <Fieldset>
      <FieldsetLegend size="large">What is your address?</FieldsetLegend>
    </Fieldset>
  );
}

Medium legend

Use a medium legend for a fieldset within a section of the page.

What is your address?

Show code

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
    What is your address?
  </legend>
</fieldset>

---
import { Fieldset, FieldsetLegend } from "@i-dot-ai-npm/component-library-astro";
---

<Fieldset>
  <FieldsetLegend size="medium">What is your address?</FieldsetLegend>
</Fieldset>

import { Fieldset, FieldsetLegend } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <Fieldset>
      <FieldsetLegend size="medium">What is your address?</FieldsetLegend>
    </Fieldset>
  );
}

<script>
  import { Fieldset, FieldsetLegend } from "@i-dot-ai-npm/component-library-svelte";
</script>

<Fieldset>
  <FieldsetLegend size="medium">What is your address?</FieldsetLegend>
</Fieldset>

import { Fieldset, FieldsetLegend } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <Fieldset>
      <FieldsetLegend size="medium">What is your address?</FieldsetLegend>
    </Fieldset>
  );
}

Small legend

Use a small legend for a fieldset that is not the main focus of the page.

What is your address?

Show code

<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
    What is your address?
  </legend>
</fieldset>

---
import { Fieldset, FieldsetLegend } from "@i-dot-ai-npm/component-library-astro";
---

<Fieldset>
  <FieldsetLegend size="small">What is your address?</FieldsetLegend>
</Fieldset>

import { Fieldset, FieldsetLegend } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <Fieldset>
      <FieldsetLegend size="small">What is your address?</FieldsetLegend>
    </Fieldset>
  );
}

<script>
  import { Fieldset, FieldsetLegend } from "@i-dot-ai-npm/component-library-svelte";
</script>

<Fieldset>
  <FieldsetLegend size="small">What is your address?</FieldsetLegend>
</Fieldset>

import { Fieldset, FieldsetLegend } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <Fieldset>
      <FieldsetLegend size="small">What is your address?</FieldsetLegend>
    </Fieldset>
  );
}

When to use this component

Use the fieldset component when you need to show a relationship between multiple form inputs. For example, you may need to group a set of text inputs into a single fieldset when asking for an address in your service.

If you’re using the examples or macros for a Radios component, Checkboxes component or Date input component, the fieldset will already be included.