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

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 type="text" name="my-field" />
  </Label>
</form>
Rendering...