Laravel Form Components Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require okipa/laravel-form-components
   

   Publish the config (if needed) via:

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

2. First Use Case: Replace a basic HTML form with the package’s <x:form::form> component in your Blade view:

   <x:form::form method="POST" action="{{ route('posts.store') }}">
       <x:form::input name="title" placeholder="Post Title" required />
       <x:form::textarea name="content" placeholder="Write your post..." />
       <x:form::button.submit>Create Post</x:form::button.submit>
   </x:form::form>
   

3. Key Starting Points:

   • Form Component: Wraps all form fields, auto-generates CSRF/method spoofing.
   • Input/Select/Checkbox: Replace native HTML inputs with <x:form::input>, <x:form::select>, etc.
   • Livewire Integration: Use :bind="$property" to sync with Livewire models (e.g., :bind="$user->name").

4. Where to Look First:

   • README.md for component syntax.
   • Wiki for advanced configurations (e.g., custom validation, localization).
   • resources/views/vendor/okipa/form-components/ for default Blade templates (override these for custom styling).

Implementation Patterns

Core Workflows

1. Form Binding with Livewire:

   <x:form::form wire:submit="save" :bind="$user">
       <x:form::input name="email" type="email" />
       <x:form::toggle-switch name="active" />
   </x:form::form>
   

   • Tip: Use :bind to sync form fields with Livewire properties. The package auto-generates wire:model attributes.

2. Dynamic Options:

   <x:form::select
       name="category"
       :options="$categories->pluck('name', 'id')"
       caption="Select a category"
   />
   

   • Supports localized options (e.g., :locales="['en', 'fr']" for multilingual apps).

3. Validation Integration:

   <x:form::input
       name="username"
       :errors="$errors->get('username')"
       rules="required|min:3|unique:users"
   />
   

   • Auto-renders error messages below the field if validation fails.

4. Component Composition:

   <x:form::input-group>
       <x:form::input name="search" placeholder="Search..." />
       <x:form::button.submit class="btn-sm">Search</x:form::button.submit>
   </x:form::input-group>
   

   • Use <x:form::input-group>, <x:form::row>, or <x:form::col> for layout control.

5. Customizing Appearance:

   • Override Defaults: Copy resources/views/vendor/okipa/form-components/ to resources/views/vendor/okipa/ and modify templates.
   • CSS Classes: Add classes directly to components (e.g., <x:form::input class="form-control-lg" ... />).

Integration Tips

• With Laravel Validation: Pass $errors to components for automatic error display:

  <x:form::input name="email" :errors="$errors" />
  

• With Livewire Rules: Use wire:rules alongside package attributes:

  <x:form::input
      name="age"
      wire:rules="required|min:18"
      :errors="$errors"
  />
  

• Form Actions: Use <x:form::button.link> for non-submit actions (e.g., cancel buttons):

  <x:form::button.link href="{{ route('posts.index') }}" class="btn-secondary">
      Cancel
  </x:form::button.link>
  

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="field" (e.g., <x:form::input name="email" />).

2. Bootstrap 4 vs. 5 Class Conflicts:

   • Issue: Mixing Bootstrap versions may break styling (e.g., checkbox/radio buttons).
   • Fix: Ensure your app.blade.php loads only one Bootstrap version and configure the package via config:

     'ui_framework' => 'bootstrap5', // or 'bootstrap4'
     

3. Livewire Binding Quirks:

   • Issue: :bind may not work if the Livewire property name differs from the form field name.
   • Fix: Use wire:model explicitly:

     <x:form::input name="user_name" wire:model="username" />
     

4. File Input Limitations:

   • Issue: Bootstrap 4 file inputs require additional markup for labels.
   • Fix: Use the label attribute:

     <x:form::input type="file" name="avatar" label="Choose an image" />
     

5. TailwindCSS Support:

   • Issue: TailwindCSS 3 support is "upcoming" (as of 2026-05-11). Current releases only support Bootstrap.
   • Fix: Monitor the changelog or use custom CSS classes for Tailwind.

Debugging Tips

• Inspect Generated HTML: Use browser dev tools to verify attributes (e.g., name, wire:model).
• Check Config: Run php artisan config:clear if components render incorrectly after updates.
• Validation Errors: Ensure $errors is passed to components or use wire:model for Livewire validation.

Extension Points

1. Custom Components: Extend the package by creating new Blade components in app/View/Components/Form/:

   namespace App\View\Components\Form;
   use Okipa\LaravelFormComponents\Components\FormComponent;
   
   class CustomInput extends FormComponent { ... }
   

   Register in AppServiceProvider:

   View::addNamespace('form', app_path('View/Components/Form'));
   

2. Override Templates: Copy vendor/okipa/laravel-form-components/resources/views/ to resources/views/vendor/okipa/ and modify as needed.

3. Add New UI Frameworks: The package’s modular design allows adding support for other CSS frameworks (e.g., Bulma, DaisyUI) by extending the base component classes.

Performance Notes

• Avoid Over-Using :bind: Excessive binding can bloat Livewire’s state. Use wire:model selectively.
• Lazy-Load Options: For large select options, fetch data dynamically via Livewire or JavaScript:

  <x:form::select name="category" wire:model="category_id">
      <option value="">Loading...</option>
  </x:form::select>
  

  // Livewire component
  public $category_id;
  public $categories = [];
  
  public function mount() {
      $this->categories = Category::all();
  }