Renders a modal.

Examples

<.modal id="confirm-modal">
  This is a modal.
</.modal>

JS commands may be passed to the :on_cancel to configure the closing/cancel event, for example:

<.modal id="confirm" on_cancel={JS.navigate(~p"/posts")}>
  This is another modal.
</.modal>

Attributes

• id (:string) (required) - the unique id of the modal.
• show (:boolean) - whether the modal is visible. Defaults to false.
• title (:string) - the title of the modal. Defaults to nil.
• on_cancel (Phoenix.LiveView.JS) - the JS command to run when the modal is closed. Defaults to %Phoenix.LiveView.JS{ops: []}.
• form (:any) - If a form object is passed the modal will render form buttons and process submit/change events. Defaults to nil.
• as (:any) - the server side parameter to collect all input under. Defaults to nil.
• noclose (:boolean) - whether the modal can be closed. Defaults to false.
• submit (:any) - the phx-submit event for the form. Defaults to "submit".
• change (:any) - the phx-change event for the form. Defaults to "validate".
• submit_text (:string) - the text for the submit button. Defaults to "Submit".
• target (:any) - the target for the form events. Defaults to nil.
• thin (:boolean) - whether the modal is wide. Defaults to false.
• wide (:boolean) - whether the modal is wide. Defaults to false.
• error (:string) - an error message to display. Defaults to nil.

Slots

• inner_block (required) - the slot for the modal content.
• description - the slot for the modal description/subheading.
• actions - the slot for modal actions, such as buttons.