The LB Redbridge design system.

- Reusability
- User centred design
- An overview
- An introduction
- A starter template
- Accordion
- Back link
- Breadcrumbs
- Button
- Character count
- Checkboxes
- Confirmation
- Date input
- Details
- Declarations
- Error message and summary
- File upload
- Footer
- Header
- Hyperlink
- Inset text
- Layouts
- Mapping
- Phase banner
- Phone numbers
- Print button
- Radio buttons
- Select
- Spacing
- Table ( responsive )
- Text input
- Textarea
- Typography
- Warning text
- Well
- Case examples

Error message and summary

Error message to explain what went wrong and how to fix it.
Error summary to summarise any errors a user has made.
Error message: GDS guidelines on using this component (opens in a new window)
Error summary: GDS guidelines on using this component (opens in a new window)

There is a problem

Enter your full name [Error summary]

Your details

Full name

Error: Enter your full name [Error message]

HTML Code ↕

                    
                      <div class="govuk-error-summary" data-module="govuk-error-summary">
  <div role="alert">
    <h2 class="govuk-error-summary__title">
      There is a problem 
    </h2>
    <div class="govuk-error-summary__body">
      <ul class="govuk-list govuk-error-summary__list">
        <li>
          <a href="#full-name-input">Enter your full name [Error summary]</a>
        </li>
      </ul>
    </div>
  </div>
</div>
<h1 class="govuk-heading-l">Your details</h1>
<div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="full-name-input">
    Full name
  </label>
  <p id="full-name-input-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> Enter your full name [Error message]
  </p>
  <input class="govuk-input govuk-input--error" id="full-name-input" name="name" type="text" aria-describedby="full-name-input-error" autocomplete="name">
</div>