CRUD Forms & Details

Form-based and section-based CRUD blocks for creating, updating, and reading items, along with success message feedback in application interfaces.

Default Create Form

Blade code

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

Create Form with Custom Fields

Add new employee

Blade code

<x-fwb.blocks.application.crud-create-form
    title="Add new employee"
    action="/employees">
    <div class="grid gap-4 sm:grid-cols-2 sm:gap-6">
        <div class="sm:col-span-2">
            <label for="emp-name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Full Name</label>
            <input type="text" name="name" id="emp-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="emp-email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email</label>
            <input type="email" name="email" id="emp-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>
            <label for="emp-department" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Department</label>
            <select id="emp-department" name="department" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
                <option selected="">Select department</option>
                <option value="engineering">Engineering</option>
                <option value="design">Design</option>
                <option value="marketing">Marketing</option>
            </select>
        </div>
    </div>
    <button type="submit" class="inline-flex items-center px-5 py-2.5 mt-4 sm:mt-6 text-sm font-medium text-center text-white bg-blue-700 rounded-lg focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900 hover:bg-blue-800">
        Add employee
    </button>
</x-fwb.blocks.application.crud-create-form>

Default Update Form

Blade code

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

Update Form with Custom Fields

Edit employee

Blade code

<x-fwb.blocks.application.crud-update-form
    title="Edit employee"
    action="/employees/1">
    <div class="grid gap-4 sm:grid-cols-2 sm:gap-6">
        <div class="sm:col-span-2">
            <label for="edit-name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Full Name</label>
            <input type="text" name="name" id="edit-name" value="Jane Smith" 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" required>
        </div>
        <div>
            <label for="edit-email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email</label>
            <input type="email" name="email" id="edit-email" value="jane@example.com" 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" required>
        </div>
        <div>
            <label for="edit-role" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Role</label>
            <input type="text" name="role" id="edit-role" value="Senior Designer" 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" required>
        </div>
    </div>
    <div class="flex items-center space-x-4 mt-4 sm:mt-6">
        <button type="submit" class="inline-flex items-center px-5 py-2.5 text-sm font-medium text-center text-white bg-blue-700 rounded-lg focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900 hover:bg-blue-800">
            Save changes
        </button>
        <button type="button" class="text-red-600 inline-flex items-center hover:text-white border border-red-600 hover:bg-red-600 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900">
            Delete
        </button>
    </div>
</x-fwb.blocks.application.crud-update-form>

Default Read Section

Name
Apple iMac 27"
Category
Electronics
Brand / Manufacturer
Apple
Item weight (net)
12kg
Description
Standard glass, 3.8GHz 8-core 10th-generation Intel Core i7 processor, Turbo Boost up to 5.0GHz, 16GB 2666MHz DDR4 memory, Radeon Pro 5500 XT with 8GB of GDDR6 memory, 256GB SSD storage, Gigabit Ethernet, Two Thunderbolt 3 ports.
Colors
Price
$2999
Discount
20% off

Blade code

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

Read Section with Custom Content

Employee Profile

Name
Jane Smith
Department
Design
Email
jane@example.com
Role
Senior Designer

Blade code

<x-fwb.blocks.application.crud-read-section title="Employee Profile">
    <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">Jane Smith</dd>
        <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Department</dt>
        <dd class="mb-4 font-light text-gray-500 dark:text-gray-400">
            <span class="bg-blue-100 text-blue-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800">Design</span>
        </dd>
        <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Email</dt>
        <dd class="mb-4 font-light text-gray-500 dark:text-gray-400">jane@example.com</dd>
        <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Role</dt>
        <dd class="mb-4 font-light text-gray-500 dark:text-gray-400">Senior Designer</dd>
    </dl>
    <div class="flex items-center space-x-4">
        <button type="button" class="text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
            Edit
        </button>
        <button type="button" class="inline-flex items-center text-white bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900">
            Delete
        </button>
    </div>
</x-fwb.blocks.application.crud-read-section>

Default Success Message

Blade code

<x-fwb.blocks.application.crud-success-message />

Success Message with Custom Actions

Blade code

<x-fwb.blocks.application.crud-success-message
    title="Product created"
    message="Your new product has been added to the catalog successfully.">
    <x-slot:actions>
        <a href="#" class="py-2 px-3 text-sm font-medium text-center text-white rounded-lg bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800">
            View product
        </a>
        <button type="button" class="py-2 px-3 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 hover:text-gray-900 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
            Back to list
        </button>
    </x-slot:actions>
</x-fwb.blocks.application.crud-success-message>

Component Properties

Create Form x-fwb.blocks.application.crud-create-form

PropTypeDefaultDescription
title string Add a new product The form heading text.
action string # Form action URL for the POST request.
slot slot - Custom form fields and submit button replacing the default product form.

Update Form x-fwb.blocks.application.crud-update-form

PropTypeDefaultDescription
title string Update product The form heading text.
action string # Form action URL. Uses PUT method spoofing.
slot slot - Custom form fields and action buttons replacing the default product form.

Read Section x-fwb.blocks.application.crud-read-section

PropTypeDefaultDescription
title string Item Details The section heading text.
slot slot - Custom content replacing the default product details and action buttons.

Success Message x-fwb.blocks.application.crud-success-message

PropTypeDefaultDescription
title string Successfully completed The success message heading text.
message string Your action has been completed successfully. The descriptive message shown below the heading.
actions slot - Named slot for custom action buttons replacing the default Continue button.
slot slot - Default slot for custom action buttons (used when actions slot is not set).