Skip to content


The new Fiber dialogs are created mainly on the backend. They all reuse the same dialog components.

Component name Usage
k-form-dialog For dialogs with form fields and submit buttons
k-remove-dialog To confirm deleting items
k-text-dialog For dialogs with a custom text message

Dialog setup

Dialogs are defined as a part of areas:

Kirby::plugin('yourname/todos', [
  'areas' => [
    'todos' => function ($kirby) {
      return [
        // ... (see area definiton above)
        'dialogs' => [

          // the key of the dialog defines the dialog routing pattern
          'todos/create' => [
            // the load event is creating a GET route at
            // `/panel/dialogs/{pattern}`;
            // it returns the setup for the dialog, including
            // used component, buttons, props, etc.
            'load' => function () {
              return [
                'component' => 'k-form-dialog',
                'props' => [
                  // field definition for the form dialog
                  'fields' => [ ... ],
                  // the prefilled model data
                  'value' => [ ... ]
            // the submit event is creating a POST route at
            // `/panel/dialogs/{pattern}`;
            // the submit button of the dialog is automatically
            // wired to fire the POST request with the form
            // data or whatever data the dialog provides
            'submit' => function () {
              // create todo
              return true;

Submit event responses

The Dialog submit has multiple ways to interact with the component.

return void|null|false

Returning nothing or false is interpreted as a 404. It suggests that the model could not be found.

return true

Returning true is interpreted as a success and will automatically close the dialog.

return [ ... ]

By returning an array, you gain more control of what happens when the dialog closes. You can pass data to the event, dispatch Vuex events and more.

return [
  'event' => 'todo.create',
  'data'  => [
    // some data for the event

throw new Exception

Any exception is interpreted as an error and will show the error message box in the dialog containing the exception message


You can redirect the Panel to a different location after submitting the dialog by calling: