Custom Components

Both Form and HTML builders support a powerful component system for creating reusable form elements. Components are registered once and can be used throughout your application like built-in methods.

Creating Custom Form Components#

Step 1: Register the component (typically in AppServiceProvider)

use SpaanProductions\LaravelForm\FormFacade as Form;

public function boot()
{
    // Register a Bootstrap-styled text input component
    // Syntax: component(name, view, [parameters])
    Form::component('bsText', 'components.form.text', ['name', 'value', 'attributes']);

    // Register a complete form group with label and error handling
    Form::component('bsFormGroup', 'components.form.group', ['name', 'label', 'type', 'value', 'attributes']);
}

Step 2: Create the component view

{{-- resources/views/components/form/text.blade.php --}}
<div class="form-group mb-3">
    <label for="{{ $name }}" class="form-label">
        {{ ucfirst(str_replace('_', ' ', $name)) }}
    </label>
    <input type="text"
           id="{{ $name }}"
           name="{{ $name }}"
           value="{{ $value }}"
           class="form-control {{ $errors->has($name) ? 'is-invalid' : '' }} {{ $attributes['class'] ?? '' }}"
           {!! Html::attributes($attributes) !!}>
    @error($name)
        <div class="invalid-feedback">{{ $message }}</div>
    @enderror
</div>

Step 3: Use the component

{{ Form::bsText('username', null, ['placeholder' => 'Enter username', 'required' => true]) }}
{{ Form::bsText('email', $user->email, ['class' => 'form-control-lg']) }}

Advanced Form Component Example#

{{-- resources/views/components/form/group.blade.php --}}
<div class="mb-3">
    <label for="{{ $name }}" class="form-label">{{ $label }}</label>

    @if($type === 'textarea')
        <textarea name="{{ $name }}"
                  id="{{ $name }}"
                  class="form-control {{ $errors->has($name) ? 'is-invalid' : '' }}"
                  {!! Html::attributes($attributes) !!}>{{ $value }}</textarea>
    @elseif($type === 'select')
        <select name="{{ $name }}"
                id="{{ $name }}"
                class="form-select {{ $errors->has($name) ? 'is-invalid' : '' }}"
                {!! Html::attributes($attributes) !!}>
            {!! $value !!}  {{-- Pass rendered options --}}
        </select>
    @else
        <input type="{{ $type }}"
               name="{{ $name }}"
               id="{{ $name }}"
               value="{{ $value }}"
               class="form-control {{ $errors->has($name) ? 'is-invalid' : '' }}"
               {!! Html::attributes($attributes) !!}>
    @endif

    @error($name)
        <div class="invalid-feedback d-block">{{ $message }}</div>
    @enderror

    @if(isset($attributes['help']))
        <div class="form-text">{{ $attributes['help'] }}</div>
    @endif
</div>

{{-- Usage --}}
{{ Form::bsFormGroup('email', 'Email Address', 'email', null, ['help' => 'We will never share your email']) }}

Creating Custom HTML Components#

// Register in AppServiceProvider
public function boot()
{
    Html::component('alert', 'components.alert', ['type', 'message', 'dismissible']);
    Html::component('card', 'components.card', ['title', 'content', 'footer']);
}

{{-- resources/views/components/alert.blade.php --}}
<div class="alert alert-{{ $type ?? 'info' }} {{ $dismissible ? 'alert-dismissible fade show' : '' }}" role="alert">
    {{ $message }}
    @if($dismissible)
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    @endif
</div>

{{-- Usage --}}
{{ Html::alert('success', 'User created successfully!', true) }}
{{ Html::alert('danger', 'An error occurred.', false) }}

Component Parameter Mapping#

Parameters are mapped to view variables by position:

// Registration
Form::component('example', 'components.example', ['param1', 'param2', 'param3']);

// Usage - parameters are mapped in order
{{ Form::example('value1', 'value2', 'value3') }}

// In the view, you'll have access to:
// $param1 = 'value1'
// $param2 = 'value2'
// $param3 = 'value3'

Default Values in Components:

{{-- Handle undefined parameters with defaults --}}
<div class="custom-input">
    <input type="{{ $type ?? 'text' }}"
           name="{{ $name }}"
           value="{{ $value ?? '' }}"
           placeholder="{{ $placeholder ?? '' }}">
</div>

Real-World Example: Tailwind Form Components#

// AppServiceProvider
public function boot()
{
    Form::component('twInput', 'components.tailwind.input', ['name', 'label', 'value', 'type', 'attributes']);
}

{{-- resources/views/components/tailwind/input.blade.php --}}
<div class="mb-4">
    @if($label)
        <label for="{{ $name }}" class="block text-sm font-medium text-gray-700 mb-2">
            {{ $label }}
        </label>
    @endif

    <input type="{{ $type ?? 'text' }}"
           name="{{ $name }}"
           id="{{ $name }}"
           value="{{ $value }}"
           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm {{ $errors->has($name) ? 'border-red-500' : '' }} {{ $attributes['class'] ?? '' }}"
           {!! Html::attributes(collect($attributes)->except('class')->toArray()) !!}>

    @error($name)
        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
    @enderror
</div>

{{-- Usage --}}
{{ Form::model($user, ['route' => 'users.update']) }}
    {{ Form::twInput('name', 'Full Name', null, 'text', ['required' => true]) }}
    {{ Form::twInput('email', 'Email Address', null, 'email', ['placeholder' => 'you@example.com']) }}
    <button type="submit" class="btn btn-primary">Save</button>
{{ Form::close() }}