Internal
A group of form fields.
| Name | Type | Default | Description |
|---|
A standard Form group.
A Form group with just a label instead of a fieldset and legend.
A Form group with a validation error.
<div id="dob" class="govuk-form-group">
<fieldset
aria-describedby="dob-hint"
class="govuk-fieldset"
>
<legend class="govuk-fieldset__legend">
Birthday
</legend>
<div
id="dob-hint"
class="govuk-hint"
aria-hidden="false"
>
Enter your date of birth
</div>
<p>Content</p>
</fieldset>
</div>
<FormGroup
hint="Enter your date of birth"
id="dob"
label="Birthday"
>
<p>Content</p>
</FormGroup>
<div id="dob" class="govuk-form-group">
<fieldset
aria-describedby="dob-hint"
class="govuk-fieldset"
>
<legend class="govuk-fieldset__legend">
Birthday
</legend>
<div
id="dob-hint"
class="govuk-hint"
aria-hidden="false"
>
Enter your date of birth
</div>
<p>Content</p>
</fieldset>
</div>
<FormGroup
hint="Enter your date of birth"
id="dob"
label="Birthday"
>
<p>Content</p>
</FormGroup>
<div id="name" class="govuk-form-group">
<label
for="name-input"
class="govuk-label"
aria-hidden="false"
>
Name
</label>
<div
id="name-hint"
class="govuk-hint"
aria-hidden="false"
>
Enter your name
</div>
<p>Content</p>
</div>
<FormGroup
fieldId="name-input"
hint="Enter your name"
id="name"
label="Name"
>
<p>Content</p>
</FormGroup>
<div
id="dob"
class="govuk-form-group govuk-form-group--error"
>
<fieldset
aria-describedby="dob-hint dob-error"
class="govuk-fieldset"
>
<legend class="govuk-fieldset__legend">
Birthday
</legend>
<div
id="dob-hint"
class="govuk-hint"
aria-hidden="false"
>
Enter your date of birth
</div>
<p
id="dob-error"
class="govuk-error-message"
aria-hidden="false"
>
<span class="govuk-visually-hidden">
Error:
</span>
Enter a date in the past
</p>
<p>Content</p>
</fieldset>
</div>
<FormGroup
error="Enter a date in the past"
hint="Enter your date of birth"
id="dob"
label="Birthday"
>
<p>Content</p>
</FormGroup>