Components

Form group

Internal

A group of form fields.

Birthday

Enter your date of birth

Content

HTML
React

<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>
Rendering...

<FormGroup
  hint="Enter your date of birth"
  id="dob"
  label="Birthday"
>
  <p>Content</p>
</FormGroup>
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
error	ReactNode	-
errorId	string	-
fieldId	string	-
hint	ReactNode	-
hintId	string	-
label	ReactNode	-	REQUIRED.
standalone	boolean	-

Stories

Standard

A standard Form group.

Birthday

Enter your date of birth

Content

HTML
React

<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>
Rendering...

<FormGroup
  hint="Enter your date of birth"
  id="dob"
  label="Birthday"
>
  <p>Content</p>
</FormGroup>
Rendering...

Label

A Form group with just a label instead of a fieldset and legend.

Name

Enter your name

Content

HTML
React

<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>
Rendering...

<FormGroup
  fieldId="name-input"
  hint="Enter your name"
  id="name"
  label="Name"
>
  <p>Content</p>
</FormGroup>
Rendering...

Error

A Form group with a validation error.

Birthday

Enter your date of birth

Error: Enter a date in the past

Content

HTML
React

<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>
Rendering...

<FormGroup
  error="Enter a date in the past"
  hint="Enter your date of birth"
  id="dob"
  label="Birthday"
>
  <p>Content</p>
</FormGroup>
Rendering...