CRUD Modals

Modal-based CRUD operation blocks for creating, reading, updating, and deleting items in application interfaces.

Default Create Modal

Blade code

<x-fwb.blocks.application.crud-create-modal />

Create Modal with Custom Fields

Blade code

<x-fwb.blocks.application.crud-create-modal
    title="Add new user"
    id="createUserModal"
    action="/users"
    method="POST"
    submitText="Create user">
    <div class="grid gap-4 mb-4 sm:grid-cols-2">
        <div>
            <label for="user-name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Full Name</label>
            <input type="text" name="name" id="user-name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white" placeholder="John Doe" required>
        </div>
        <div>
            <label for="user-email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email</label>
            <input type="email" name="email" id="user-email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white" placeholder="john@example.com" required>
        </div>
    </div>
</x-fwb.blocks.application.crud-create-modal>

Default Update Modal

Blade code

<x-fwb.blocks.application.crud-update-modal />

Update Modal with Custom Props

Blade code

<x-fwb.blocks.application.crud-update-modal
    title="Edit product"
    id="editProductModal"
    action="/products/1"
    method="PUT"
    submitText="Save changes" />

Default Read Modal

Blade code

<x-fwb.blocks.application.crud-read-modal />

Read Modal with Custom Content

Blade code

<x-fwb.blocks.application.crud-read-modal
    title="Product Details"
    id="viewProductModal">
    <dl>
        <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Name</dt>
        <dd class="mb-4 font-light text-gray-500 dark:text-gray-400">Custom Product</dd>
        <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Price</dt>
        <dd class="mb-4 font-light text-gray-500 dark:text-gray-400">$1,499</dd>
    </dl>
</x-fwb.blocks.application.crud-read-modal>

Default Delete Confirmation Modal

Blade code

<x-fwb.blocks.application.crud-delete-confirm />

Delete Confirmation with Custom Props

Blade code

<x-fwb.blocks.application.crud-delete-confirm
    title="Delete this item?"
    message="This will permanently remove the item and all associated data. This action cannot be undone."
    id="confirmDeleteModal"
    action="/products/1" />

Component Properties

Create Modal x-fwb.blocks.application.crud-create-modal

PropTypeDefaultDescription
title string Add new product The modal heading text.
id string createProductModal The HTML id for the modal element.
action string # Form action URL.
method string POST HTTP method for the form.
submitText string Add new product Label for the submit button.
footer slot - Custom footer replacing the default submit button.
slot slot - Custom form fields replacing the default product form.

Update Modal x-fwb.blocks.application.crud-update-modal

PropTypeDefaultDescription
title string Update product The modal heading text.
id string updateProductModal The HTML id for the modal element.
action string # Form action URL.
method string POST HTTP method for the form. Supports PUT, PATCH, DELETE via method spoofing.
submitText string Update Label for the submit button.
footer slot - Custom footer replacing the default Update/Delete buttons.
slot slot - Custom form fields replacing the default product form.

Read Modal x-fwb.blocks.application.crud-read-modal

PropTypeDefaultDescription
title string Item Details The modal heading text.
id string read-modal The HTML id for the modal element.
slot slot - Custom content replacing the default product details and action buttons.

Delete Confirmation x-fwb.blocks.application.crud-delete-confirm

PropTypeDefaultDescription
title string Are you sure? The confirmation dialog heading (used for sr-only context).
message string Are you sure you want to delete this item?... The confirmation message displayed to the user.
id string delete-modal The HTML id for the modal element.
action string # Form action URL for the DELETE request.
actions slot - Custom action buttons replacing the default Cancel/Confirm buttons.