Laravel Form Components Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require okipa/laravel-form-components
   

   Publish the config (if needed) with:

   php artisan vendor:publish --provider="Okipa\LaravelFormComponents\LaravelFormComponentsServiceProvider"
   

2. First Usage: Add the form component to your Blade view:

   <x:form::form method="POST" action="{{ route('store.user') }}">
       <x:form::input name="name" />
       <x:form::button.submit />
   </x:form:form>
   

3. Key Files to Review:

   • resources/views/vendor/laravel-form-components/ (default component templates)
   • config/laravel-form-components.php (customization options like default UI framework)

First Use Case: Quick Form in a Livewire Component

<!-- resources/views/livewire/user-profile.blade.php -->
<div>
    <x:form::form wire:submit.prevent="save" method="POST">
        <x:form::input name="name" wire:model="name" />
        <x:form::textarea name="bio" wire:model="bio" />
        <x:form::button.submit />
    </x:form::form>
</div>

Livewire Controller:

class UserProfile extends Component {
    public $name, $bio;

    public function save() {
        // Handle form submission
    }
}

Implementation Patterns

1. Component Composition

Pattern: Nest components for complex forms.

<x:form::form method="POST">
    <!-- Input Group -->
    <div class="mb-3">
        <x:form::input name="username" placeholder="Enter username" />
        <x:form::input.hint text="Must be at least 4 characters" />
    </div>

    <!-- Multi-Select with Validation -->
    <x:form::select
        name="roles"
        :options="$roles"
        multiple
        required
    />
</x:form::form>

Tip: Use x:form::input.hint, x:form::input.error, and x:form::input.group for contextual feedback.

2. Livewire Integration

Pattern: Bind Livewire properties to form components.

<x:form::form wire:submit.prevent="updateProfile">
    <x:form::input
        name="email"
        wire:model="email"
        type="email"
        required
    />
    <x:form::toggle-switch
        name="active"
        wire:model="active"
    />
</x:form::form>

Controller:

public $email, $active;

protected $rules = [
    'email' => 'required|email',
];

3. Dynamic Options

Pattern: Pass dynamic options to components.

<x:form::select
    name="country"
    :options="$countries->pluck('name', 'id')->toArray()"
    caption="Select your country"
/>

Tip: Use locales for multilingual textareas or group for checkbox/radio groups.

4. Validation Handling

Pattern: Leverage Laravel validation with the package.

<x:form::form method="POST" :action="route('store.post')">
    <x:form::input name="title" required />
    <x:form::textarea name="content" :errors="$errors->get('content')" />
</x:form::form>

Controller:

public function store(Request $request) {
    $validated = $request->validate([
        'title' => 'required|max:255',
        'content' => 'required',
    ]);
}

5. UI Framework Switching

Pattern: Configure the default UI framework in config/laravel-form-components.php:

'ui_framework' => 'bootstrap5', // Options: 'bootstrap4', 'bootstrap5', 'tailwind'

Override per component:

<x:form::input name="name" ui="tailwind" />

Gotchas and Tips

Pitfalls

1. Missing name Attribute:

   • Issue: Components without a name attribute won’t bind to Livewire or submit data.
   • Fix: Always specify name (e.g., <x:form::input name="field" />).

2. Bootstrap 4 vs. 5 Class Conflicts:

   • Issue: Mixing Bootstrap versions may break styling (e.g., form-control vs. form-control classes).
   • Fix: Stick to one UI framework per project or explicitly set ui="bootstrap5" on components.

3. Livewire Binding Quirks:

   • Issue: Nested Livewire properties (e.g., user.address.city) require dot notation in wire:model.
   • Fix: Use wire:model="user.address.city" and ensure the form name matches (e.g., name="user[address][city]").

4. Validation Error Display:

   • Issue: Errors may not show if the component lacks an errors prop.
   • Fix: Pass errors explicitly:

     <x:form::input name="email" :errors="$errors->get('email')" />
     

Debugging Tips

1. Inspect Generated HTML: Use browser dev tools to verify classes/attributes. Override templates in resources/views/vendor/laravel-form-components/ if needed.

2. Livewire Debugging: Add {{ dd($this->email) }} in the Livewire component to check bound values.

3. CSRF Token: The <x:form::form> component auto-generates CSRF tokens. Avoid manually adding @csrf directives.

Extension Points

1. Custom Templates: Override default templates by copying files from vendor/okipa/laravel-form-components/resources/views to resources/views/vendor/laravel-form-components/.

2. Add New Components: Extend the package by publishing custom components:

   php artisan vendor:publish --tag=laravel-form-components-views
   

   Then modify resources/views/vendor/laravel-form-components/custom.blade.php.

3. TailwindCSS Support: While "upcoming," you can manually apply Tailwind classes to components:

   <x:form::input name="name" class="tw-classes" />
   

Performance Tips

1. Lazy-Load Components: Dynamically render components in Livewire for large forms:

   @if ($showAdvanced)
       <x:form::select name="advanced_option" />
   @endif
   

2. Debounce Livewire Updates: Use wire:ignore for non-critical fields to reduce updates:

   <x:form::input name="search" wire:ignore />
   

3. Cache Options: Pre-fetch options for selects in Livewire:

   public $countries;
   public function mount() {
       $this->countries = Country::pluck('name', 'id');
   }