Laravel Form Components Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require rawilk/laravel-form-components
   

   Publish the config (if needed):

   php artisan vendor:publish --provider="Rawilk\LaravelFormComponents\FormComponentsServiceProvider"
   

2. First Use Case Create a Livewire component (php artisan make:livewire MyForm) and use a form component in its view:

   @use('Rawilk\LaravelFormComponents\Components\TextInput')
   <TextInput wire:model="name" label="Name" />
   

   Bind the property in your Livewire class:

   public $name;
   

3. Key Files to Review

   • config/form-components.php (default settings, Tailwind classes)
   • vendor/rawilk/laravel-form-components/src/Components/ (all available components)
   • resources/views/vendor/form-components/ (default Blade templates)

Implementation Patterns

Common Workflows

1. Reusable Form Components Group related inputs in a Livewire component:

   @use('Rawilk\LaravelFormComponents\Components\{TextInput, SelectInput, Button}')
   <div>
       <TextInput wire:model="user.name" label="Full Name" />
       <SelectInput wire:model="user.role" label="Role" :options="$roles" />
       <Button type="submit" label="Save" />
   </div>
   

2. Dynamic Options Pass dynamic options to components (e.g., for SelectInput):

   <SelectInput
       wire:model="status"
       label="Status"
       :options="['active' => 'Active', 'inactive' => 'Inactive']"
   />
   

3. Validation Integration Use Livewire’s validation with built-in feedback:

   <TextInput
       wire:model="email"
       label="Email"
       :error="$errors->first('email')"
   />
   

4. Nested Forms Embed forms in Livewire components for modularity:

   @livewire('user-profile-form', ['user' => $user], key('profile-'.$user->id))
   

Integration Tips

• Tailwind Customization: Override default classes in config/form-components.php or via Blade:

  <TextInput wire:model="name" label="Name" class="custom-class" />
  

• Localization: Extend components by publishing views and overriding them in your app’s resources/views/vendor/form-components.
• Form Submission: Use Livewire’s $rules and validate() methods alongside the components:

  protected $rules = ['name' => 'required|min:3'];
  public function save() {
      $this->validate();
      // Save logic
  }
  

Gotchas and Tips

Pitfalls

1. Livewire Dependency

   • The package requires Livewire. Attempting to use it without Livewire will fail silently (components won’t render).
   • Fix: Ensure Livewire is installed (composer require livewire/livewire) and the Livewire service provider is registered.

2. Archived Status

   • The package is archived (no active maintenance). Check for forks or alternatives (e.g., filament/forms) if long-term support is critical.
   • Workaround: Fork the repo to apply fixes or extend functionality.

3. Tailwind Class Conflicts

   • Default Tailwind classes (e.g., bg-gray-100) may clash with your project’s theme.
   • Fix: Override in config/form-components.php or use the class attribute:

     <TextInput wire:model="name" class="bg-blue-50" />
     

4. Missing Error Handling

   • Some components (e.g., TextInput) rely on Livewire’s $errors for validation messages. Ensure your Livewire component returns errors properly:

     public function rules() {
         return ['email' => 'required|email'];
     }
     

Debugging Tips

• Inspect Rendered HTML: Use browser dev tools to verify components render as expected. Missing inputs often indicate Livewire binding issues.
• Check Livewire Logs: Enable Livewire’s debug mode in config/livewire.php to trace property updates:

  'debug' => env('APP_DEBUG', true),
  

• Validate Config: Ensure config/form-components.php paths (e.g., view_path) are correct if customizing views.

Extension Points

1. Custom Components Extend the base Component class to create new form elements:

   namespace App\Components;
   use Rawilk\LaravelFormComponents\Component;
   
   class CustomInput extends Component {
       public function render() { ... }
   }
   

   Register in FormComponentsServiceProvider.

2. Override Default Views Publish and modify views in resources/views/vendor/form-components to change behavior (e.g., add icons, custom labels).

3. Dynamic Attributes Use wire:ignore or x-data (Alpine.js) for interactive elements:

   <TextInput wire:model="search" wire:ignore class="alpine-focus" x-data="{ open: false }" />