Components

Label

Internal

A label for a form field.

HTML
React

<form action="#" method="get">
  <label
    for="my-field"
    class="govuk-label"
    aria-hidden="false"
  >
    My label
  </label>
  <input type="text" id="my-field" name="my-field" />
</form>
Rendering...

<form action="#" method="get">
  <Label htmlFor="my-field">My label</Label>
  <input id="my-field" name="my-field" type="text" />
</form>
Rendering...

Props

Name	Type	Default	Description
id	string	-	'id' attribute to place on the base HTML element
classBlock	string	-	Block name override in BEM style classes applied to all elements
classModifiers	Modifiers	-	BEM style modifiers to apply to the base HTML element
className	string	-	Extra classes to apply to the base HTML element
heading	ElementType	-	Component to wrap the label in, making it a heading

Stories

Standard

A standard Label.

HTML
React

<form action="#" method="get">
  <label
    for="my-field2"
    class="govuk-label"
    aria-hidden="false"
  >
    My label
  </label>
  <input type="text" id="my-field2" name="my-field" />
</form>
Rendering...

<form action="#" method="get">
  <Label htmlFor="my-field2">My label</Label>
  <input id="my-field2" name="my-field" type="text" />
</form>
Rendering...

<form action="#" method="get">
  <label class="govuk-label" aria-hidden="false">
    My label
    <input type="text" name="my-field" />
  </label>
</form>
Rendering...

<form action="#" method="get">
  <Label>
    My label
    <input name="my-field" type="text" />
  </Label>
</form>
Rendering...

Heading

Where the question is a heading, give heading the component to wrap the label in. The heading goes around the label rather than inside it, which would not be valid HTML.

The label is sized to match the level, following the hierarchy GOV.UK uses on a page that is not long form content: large for an <h1>, medium for an <h2>, small below that. Say so with classModifiers to size it otherwise, and do say so if you pass a component we cannot read a level from.

HTML
React

<form action="#" method="get">
  <h1 class="govuk-label-wrapper">
    <label
      for="my-field2"
      class="govuk-label govuk-label--l"
      aria-hidden="false"
    >
      My label
    </label>
  </h1>
  <input type="text" id="my-field2" name="my-field" />
</form>
Rendering...

<form action="#" method="get">
  <Label heading="h1" htmlFor="my-field2">
    My label
  </Label>
  <input id="my-field2" name="my-field" type="text" />
</form>
Rendering...