Skip to content

Form error summary

A box at the top of a form listing the errors, each with a link to the field concerned.

  • Tailwind
  • React
  • CSS
  • WordPress
Open in a new tab

Description

The summary carries role="alert" to be announced as soon as it appears after submission; each link leads to the field, whose error message is linked with aria-describedby and state with aria-invalid. This pattern is recommended by many public accessibility guidelines.

Code

Loading the code…

Archive contents

alerte-resume-erreurs-html-tailwind.zip3 files · 4 Ko

  • index.html4 Ko
  • README.md2 Ko
  • LICENSE.md1 Ko

Tags

Updated on October 12, 2026.

In the same spirit

  • Short notifications that appear at the bottom of the screen after an action, then disappear.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • The four classic interface messages: information, success, warning and error.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • Three callouts for technical documentation: note, tip and warning.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A notice warning of a scheduled service interruption, with date, time and impact.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component