tablar-kit-forms-development

name

tablar-kit-forms-development

description

Build forms with takielias/tablar-kit FormBuilder fluent API — full method catalog (input, email, password, number, textarea, select, dependentSelect, tomSelect, flatPicker, litePicker, filepond, editor, repeater, hidden, file, toggle, checkbox, radio), layout helpers (tab, section, row, column, card), AbstractForm class pattern, conditional fields (if/unless/when), array-driven forms via fromArray/fromJson.

Tablar Kit — FormBuilder

When to use this skill

• Building a form with FormBuilder fluent API.
• Picking the right field method (date pickers, file uploads, repeaters).
• Composing layouts (tabs, sections, rows, columns, cards).
• Building dependent dropdowns + AJAX-fed selects.
• Driving forms from declarative array/JSON config.

Two construction patterns

1. Inline builder (fluent)

use TakiElias\TablarKit\Builder\FormBuilder;

$form = FormBuilder::create()
    ->action(route('products.store'))
    ->method('POST')
    ->multipart()
    ->input('title', 'Product title')->required()
    ->select('category_id', $categories, 'Category')->required()
    ->editor('description', 'Description')->height(400)
    ->filepond('image', 'Image')->acceptedFileTypes(['image/*'])->maxFileSize('5MB');

echo $form->render();

2. AbstractForm class (recommended for reuse)

namespace App\Forms;

use TakiElias\TablarKit\Builder\AbstractForm;
use TakiElias\TablarKit\Builder\FormBuilder;

class ProductForm extends AbstractForm
{
    protected function configure(FormBuilder $form): void
    {
        $form->action(route('products.store'))->method('POST')->multipart();
    }

    protected function fields(): array
    {
        return [
            $this->form->input('title', 'Title')->required(),
            $this->form->select('category_id', $this->data['categories'] ?? [], 'Category')->required(),
            $this->form->editor('description', 'Description')->height(400),
            $this->form->filepond('image', 'Image')->acceptedFileTypes(['image/*']),
        ];
    }
}

// Controller
$form = (new ProductForm)->setData(['categories' => Category::pluck('name', 'id')->toArray()]);
return view('products.create', compact('form'));

Field method catalog

Every field method on FormBuilder (verified against src/Builder/FormBuilder.php):

Text inputs

Method	Signature	Returns	Notes
input	(string $name, string $label = '', array $config = [])	InputField	Generic text input. Use ->type('text'|'email'|...) to override.
email	same	InputField	type=email
password	same	PasswordField
number	same	InputField	type=number; pair with ->min()->max()->step()
url	same	InputField	type=url
tel	same	InputField	type=tel
date	same	InputField	Native HTML date; for richer UX use flatPicker
time	same	InputField
datetime	same	InputField
color	same	InputField
range	same	InputField
textarea	(string $name, string $label = '', array $config = [])	TextareaField	Pair with ->rows()->cols()
hidden	(string $name, $value = '', array $config = [])	HiddenField

Selects

Method	Signature	Returns
select	(string $name, array $options = [], string $label = '', array $config = [])	SelectField
tomSelect	(string $name, string $label = '', array $config = [])	TomSelectField
dependentSelect	(string $name, string $targetDropdown = '', array $config = [])	DependentSelectField

tomSelect enables search + tagging. For AJAX search, set options via ->itemSearchRoute(route('api.users.search')).

dependentSelect chains to a parent: parent change triggers AJAX → child repopulates. Parent named via targetDropdown arg; AJAX endpoint via ->targetDataRoute(route('api.cities', ['state' => ':state_id'])).

Date / time pickers

Method	Returns	Notes
flatPicker	FlatPickerField	flatpickr — ->enableTime()->dateFormat('Y-m-d H:i')->singleMode()
litePicker	LitePickerField	litepicker, range-friendly — ->singleMode(false) for range

File uploads

Method	Returns
file	FileField (native input type=file)
filepond	FilepondField (FilePond JS — ->allowMultiple()->maxFileSize('10MB')->acceptedFileTypes(['image/*'])->imageEditor())

Editor

Method	Returns
editor	EditorField (Jodit by default — ->height(400)->toolbar(['bold','italic']))

Choice fields

Method	Returns
checkbox	CheckboxField
toggle	ToggleField
radio	RadioField (takes array $options second arg)

Buttons

Method	Returns
button	ButtonField (plain button)
formButton	FormButtonField (submit/reset)

Repeater

$form->repeater('items', function (FormBuilder $row) {
    $row->input('name', 'Name')->required();
    $row->number('qty', 'Quantity')->min(1);
});

Returns RepeaterField. The callback receives a fresh FormBuilder instance representing the row schema. Repeater UI lets users add/remove rows client-side.

Layout helpers (return self — chain freely)

Method	Signature	Use
tab	(string $title, callable $callback, array $config = [])	Tabbed sections; multiple tabs render as Bootstrap nav-tabs
section	(string $title, callable $callback, array $config = [])	Collapsible / titled section
row	(callable $callback, array $config = [])	Bootstrap row
column	(int $width, callable $callback, array $config = [])	Bootstrap col-{$width}
card	(string $title = '', array $config = [])	Returns CardBuilder; chain ->fields(callable) to populate

Each callback receives the FormBuilder so you keep chaining inside.

$form
    ->tab('Profile', function (FormBuilder $f) {
        $f->row(function (FormBuilder $r) {
            $r->column(6, fn(FormBuilder $c) => $c->input('first_name'));
            $r->column(6, fn(FormBuilder $c) => $c->input('last_name'));
        });
    })
    ->tab('Settings', function (FormBuilder $f) {
        $f->toggle('notifications', 'Email notifications');
    });

Conditional rendering

Method	Signature	Behaviour
if	(bool $condition, callable $callback)	Run callback only if true
unless	(bool $condition, callable $callback)	Run callback only if false
when	(string $field, $value, callable $callback)	Show wrapped fields client-side when field === value

$form->if(auth()->user()?->is_admin, function (FormBuilder $f) {
    $f->select('role', Role::pluck('name', 'id')->toArray(), 'Role');
});

$form->when('type', 'subscription', function (FormBuilder $f) {
    $f->number('billing_cycle', 'Billing cycle (months)');
});

Array / JSON declarative

$form->fromArray([
    'action' => '/products',
    'method' => 'POST',
    'fields' => [
        ['type' => 'input', 'name' => 'title', 'label' => 'Title', 'required' => true],
        ['type' => 'select', 'name' => 'category_id', 'options' => $categories, 'label' => 'Category'],
        ['type' => 'editor', 'name' => 'description', 'height' => 400],
    ],
]);

fromJson(string $json) accepts the same shape as JSON. Useful for storing form schemas in DB.

Builder configuration setters

Chainable on FormBuilder — set form-level state:

• action(string) — form action URL.
• method(string) — GET|POST|PUT|PATCH|DELETE.
• multipart(bool $multipart = true) — enctype=multipart/form-data (required for file uploads).
• attributes(array) — extra HTML attrs.
• data(array) — model data for value population.
• theme(string) — alternate Blade theme.
• config(array) — package config overrides.
• enableCard() — wrap form in <x-card>.
• rules(array) — Laravel validation rules.

Field-level setters (chainable on Field returned by each method)

required, placeholder, addClass, id, value, help, min, max, step, rows, cols, height, toolbar, acceptedFileTypes, imageEditor, maxFileSize, allowMultiple, options, format, dateFormat, enableTime, singleMode, checked, confirmation, remoteData, itemSearchRoute, targetDataRoute, type.

Recipes

1. Contact form (text + email + textarea)

$form = FormBuilder::create()
    ->action('/contact')->method('POST')
    ->input('name', 'Your name')->required()
    ->email('email', 'Email')->required()
    ->textarea('message', 'Message')->required()->rows(5)
    ->formButton('Send', 'submit');

2. Date range with litepicker

$form->litePicker('window', 'Booking window')->singleMode(false)->dateFormat('Y-m-d');

3. Country → State → City cascade

$form
    ->select('country_id', $countries, 'Country')
    ->dependentSelect('state_id', 'country_id')->targetDataRoute(route('api.states'))
    ->dependentSelect('city_id', 'state_id')->targetDataRoute(route('api.cities'));

API endpoints return JSON { data: [{ id, name }, ...] }.

4. FilePond image upload + edit

$form->filepond('avatar', 'Avatar')
    ->acceptedFileTypes(['image/*'])
    ->maxFileSize('5MB')
    ->imageEditor();

Server side requires takielias/laravel-filepond OR a custom upload route compatible with FilePond's chunk protocol.

5. Tabbed form (Profile / Settings)

$form
    ->tab('Profile', function (FormBuilder $f) {
        $f->input('name', 'Name')->required();
        $f->email('email', 'Email')->required();
    })
    ->tab('Password', function (FormBuilder $f) {
        $f->password('current_password', 'Current password');
        $f->password('password', 'New password');
        $f->password('password_confirmation', 'Confirm');
    });

6. AbstractForm with model data binding

class ProductEditForm extends AbstractForm
{
    protected function configure(FormBuilder $form): void
    {
        $form->action(route('products.update', $this->data['product']))->method('PUT')->multipart();
    }
    protected function fields(): array
    {
        return [
            $this->form->input('title')->value($this->data['product']->title)->required(),
            $this->form->editor('description')->value($this->data['product']->description),
        ];
    }
}

Pitfalls

• select(name, options, label, config) arg order — options is SECOND, label THIRD. Easy to swap.
• dependentSelect requires a server endpoint returning {data: [...]}; without it the child stays empty.
• filepond chunk uploads need a server endpoint that handles FilePond's POST + DELETE protocol. Use takielias/laravel-filepond OR write one.
• fromArray schema — undocumented keys are silently ignored. Misnamed 'type' (e.g. 'text' instead of 'input') yields blank field.
• Repeater rows after submit — server receives flat items[0][name], items[0][qty], etc. Validate with 'items.*.name' => 'required'.
• Editor (Jodit) uses the file browser — Jodit's "Upload from server" button hits /jodit/browse. Configure tablar-kit.root + storage disk per tablar-kit-file-browser-development skill.
• ->multipart() required for file fields — without it, $_FILES will be empty server-side.

Configuration

config('tablar-kit.default-class') — applied to every field's class attr (default 'form-control'). config('tablar-kit.prefix') — prefix for component aliases. Field-specific options (filepond, jodit) live under their own keys; check published config/tablar-kit.php after install.

Related

• tablar-kit-components-development — <x-input>, <x-select> standalone components when you don't need the full builder.
• tablar-kit-file-browser-development — Jodit + uploads.
• tablar-kit-confirm-modal-development — confirm dialog on submit / delete.
• Source: src/Builder/FormBuilder.php, src/Builder/AbstractForm.php, src/Fields/.