/

Dialog

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.

In context examples

Events when the Dialog opens or closes

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.

Number of times dialog opened or closed: 0

Dialog open: false

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

Form Submission to a Database from a Dialog

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

It defines a User model with name and email fields.
The add_user_to_db method adds a new user to the database, checking for existing emails.
On form submission, it calls the add_user_to_db method.
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

API Reference

rx.dialog.root

Root component for Dialog.

Prop	Type \| Values	Default	Interactive
`open`	`bool`	`-`
`default_open`	`bool`	`-`

Event Triggers

See the full list of default event triggers

Trigger	Description
`on_open_change`	Fired when the open state changes.

rx.dialog.trigger

Trigger an action or event, to open a Dialog modal.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.dialog.title

Title component to display inside a Dialog modal.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.dialog.content

Content component to display inside a Dialog modal.

Prop	Type \| Values	Default	Interactive
`access_key`	`str`	`-`
`auto_capitalize`	`"off" \| "none" \| ...`	`-`
`content_editable`	`Union["inherit" \| "plaintext-only", bool]`	`-`
`context_menu`	`str`	`-`
`dir`	`str`	`-`
`draggable`	`bool`	`-`	false
`enter_key_hint`	`"enter" \| "done" \| ...`	`-`
`hidden`	`bool`	`-`	false
`input_mode`	`"none" \| "text" \| ...`	`-`
`item_prop`	`str`	`-`
`lang`	`str`	`-`
`role`	`"alert" \| "alertdialog" \| ...`	`-`
`slot`	`str`	`-`
`spell_check`	`bool`	`-`	false
`tab_index`	`int`	`-`
`title`	`str`	`-`
`size`	`"1" \| "2" \| ...`	`-`

Event Triggers

See the full list of default event triggers

Trigger	Description
`on_open_auto_focus`	Fired when the dialog is opened.
`on_close_auto_focus`	Fired when the dialog is closed.
`on_escape_key_down`	Fired when the escape key is pressed.
`on_pointer_down_outside`	Fired when the pointer is down outside the dialog.
`on_interact_outside`	Fired when the pointer interacts outside the dialog.

rx.dialog.description

Description component to display inside a Dialog modal.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.dialog.close

Close button component to close an open Dialog modal.

Props

No component specific props

Event Triggers

See the full list of default event triggers