Skip to main content
Demo
Modal dialog component example
Keyboard: Tab, Shift+Tab, Enter/Space, Escape

Example modal dialog

The dialog is closed by default. Activate the button to open it. Focus moves into the dialog and returns to the trigger when it closes.

Jump to notes

Tip: Press Escape to close the dialog. Use Tab to move between controls.

Share feedback

This is an example dialog with a form. Fields marked with are required.

Enter your name as you would like it shown.
Share what worked well and what could be improved.
How should we contact you?

Notes

  • Uses the native <dialog> element for semantics and focus trapping.
  • Escape closes the dialog. Focus returns to the open button.
  • Form errors are shown with text (not color alone) and focus moves to the first invalid field.