Headless

Sometimes you only want the fields instead of an entire form component. When you use the fields this way, you design the component following Livewire conventions.

Think of it as a tool to auto-generate html for the fields, nothing else.

TallFormComponent vs Headless vs TallFormFields

TallFormComponent

(Standard form type)

In a standard TallFormComponent. You don't need to add properties, render(), $rules or create a blade view.

<?php

namespace App\Http\Livewire\Forms;

use App\Models\Post;
use Tanthammar\TallForms\Input;
use Tanthammar\TallForms\Textarea;
use Tanthammar\TallForms\TallFormComponent;

class PostForm extends TallFormComponent
{

    public function mount(Post $post): void
    {
        $this->mount_form($post);
    }

    protected function fields(): array
    {
        return [
            Input::make('Title')->rules('required|string|min:6'),
            Textarea::make('Content')->rules('required|string|max:500')
        ];
    }
}

No view needed

Headless

When you want to create your own blade view and design the component, following Livewire conventions.

You don't have to use an Eloquent Model instance, this is just an example.

<?php

namespace App\Http\Livewire\Forms;

use App\Models\Post;
use Livewire\Component;
use Tanthammar\TallForms\Input;
use Tanthammar\TallForms\Textarea;

class PostForm extends Component
{
    public Post $post;
    
    protected $rules = [
        'post.title' => 'required|string|min:6',
        'post.content' => 'required|string|max:500',
    ];

    public function save()
    {
        $this->validate();
        $this->post->save();
    }

    public function render()
    {
        return view('livewire.post-form');
    }

}

Declare the fields in the blade view

resources/views/livewire/post-form.blade.php

<form wire:submit.prevent="save">
    
    <x-tall-input :field="Input::blade('Title' 'post.title')" />
    <x-tall-textarea :field="Textarea::blade('Content' 'post.content')" />
    
    <button type="submit">Save</button>
    
</form>

Wrapping fields with labels

See Blade components, "Label wrapper" page

TallFormFields

(Fields only, form type)

This form type is almost the same as Headless. The difference is that you declare the fields in the Livewire Component instead of the blade view.

Make a Livewire component that extends TallFormFields and design the component, following Livewire conventions.

You don't have to use an Eloquent Model instance, this is just an example.

<?php

namespace App\Http\Livewire\Forms;

use App\Models\Post;
use Tanthammar\TallForms\Input;
use Tanthammar\TallForms\Textarea;
use Tanthammar\TallForms\TallFormFields;

class PostForm extends TallFormFields
{
    public Post $post;
    
    protected $rules = [
        'post.title' => 'required|string|min:6',
        'post.content' => 'required|string|max:500',
    ];
    
    protected function fields(): array
    {
        return [
            Input::blade('Title', 'post.title'),
            Textarea::blade('Content', 'post.content'),
        ];
    }

    public function save()
    {
        $this->validate();
        $this->post->save();
    }

    public function render()
    {
        return view('livewire.post-form');
    }

}

@include('tall-forms::fields-only')

When you extend TallFormsFields , the form view must contain the blade directive that renders the form fields:

resources/views/livewire/post-form.blade.php

<form wire:submit.prevent="save">
    
    @include('tall-forms::fields-only')
    
    <button type="submit">Save</button>
    
</form>

TallFormFields properties

The TallFormFields component only contains minimum functionality to render the fields and it uses the "Headless" way to generate field html.

There are only a few properties in TallFormFields that you can override with the formAttr() method.

protected function formAttr(): array
 {
     return [
        'inline' => true, //stacked or inline layout
        'inlineLabelAlignment' => 'tf-inline-label-alignment',
        'labelW' => 'tf-label-width',
        'fieldW' => 'tf-field-width',
    ];
 }

Markup for Headless and TallFormFields

Important! ::blade not ::make

See Field Declaration page about differences

• All fields are blade components. There are aliases in the config file.

• You cannot use fields that lack "headless" support, like the Repeater.

• Check the "Headless" tab on each field page, you might need to add traits.

• You will not be able to use field methods like rules() or default()

• Above, Below, Before, After, Help slots are available.

• Validation errors are automatically displayed

Styling

"Headless" is usually used to refer to something without styling. With Tall-forms this is true in the sense that you control the styling in the theme file.

But, you can override the fields default styling when you declare the field in a blade view, which is why we can call it "headless" :)