Label
Internal
A label for a form field.
<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>
<form action="#" method="get">
<Label htmlFor="my-field">My label</Label>
<input id="my-field" name="my-field" type="text" />
</form>
Props
|
| string | - | 'id' attribute to place on the base HTML element |
| string | - | Block name override in BEM style classes applied to all elements |
| Modifiers | [] | BEM style modifiers to apply to the base HTML element |
| string | - | Extra classes to apply to the base HTML element |
Stories
Standard
A standard Label.
<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>
<form action="#" method="get">
<Label htmlFor="my-field2">My label</Label>
<input id="my-field2" name="my-field" type="text" />
</form>
In-line
<form action="#" method="get">
<label class="govuk-label" aria-hidden="false">
My label
<input type="text" name="my-field" />
</label>
</form>
<form action="#" method="get">
<Label>
My label
<input type="text" name="my-field" />
</Label>
</form>