The dialog.root contains all the parts of a dialog.

The dialog.trigger wraps the control that will open the dialog.

The dialog.content contains the content of the dialog.

The dialog.title is a title that is announced when the dialog is opened.

The dialog.description is a description that is announced when the dialog is opened.

The dialog.close wraps the control that will close the dialog.

The on_open_change event is called when the open state of the dialog changes. It is used in conjunction with the open prop, which is passed to the event handler.

Check out the menu docs for an example of opening a dialog from within a dropdown menu.

This example adds new users to a database from a dialog using a form.

1. It defines a User model with name and email fields.
2. The add_user_to_db method adds a new user to the database, checking for existing emails.
3. On form submission, it calls the add_user_to_db method.
4. The UI component has:

• A button to open a dialog
• A dialog containing a form to add a new user
• Input fields for name and email
• Submit and Cancel buttons