Text Element

A form example demonstrating how to use the TextElement field in VueForm Laravel to capture single-line text input in a Laravel form. Documentation

🧱 Import Class

use VueFormLaravel\Abstracts\VueFormBuilder;
use VueFormLaravel\Elements\Fields\TextElement;
use VueFormLaravel\Elements\Static\ButtonElement;
use VueFormLaravel\Elements\Vueform;

🧩 Example

• Input
• Output

class TextElementForm extends VueFormBuilder
{
    protected function buildForm()
    {
        return Vueform::build()
            ->theme('dark')
            ->default([
                'search' => 'Search',
                'number' => '123456',
                'email' => 'user@example.com',
                'password' => 'password123',
                'url' => 'https://example.com',
            ])
            ->schema([
                TextElement::name('search')
                    ->info('')
                    ->addClass('block min-w-0 grow py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focused:outline-sky-500 focus:outline-sky-500 sm:text-sm/6'),
                TextElement::name('addon')->slots([
                    'addon-before' => '<i class="fa fa-search"></i>'
                ]),
                TextElement::name('number')
                    ->inputType('number')
                    ->conditions([
                        ['search', 'not_empty']
                    ]),
                TextElement::name('email')->inputType('email'),
                TextElement::name('password')->inputType('password'),
                TextElement::name('url')->inputType('url'),
                ButtonElement::submitButton()
            ]);
    }

    public static function formData($request)
    {
        $request->validate([
            'search' => 'required'
        ]);

        return response()->json([
            'status' => 'success'
        ]);
    }
}

⚙️ Allowed Attributes

⚡ Events

You can define custom text element events Documentation directly in PHP using the ->events() method.

Each event value refers to a JavaScript function name.

These functions must be defined inside:

public/vueform-laravel/vueform-custom.js

This allows you to extend or override default behaviors for your generated VueForm components

🔔 Example Usage of event (PHP)

TextElement::name('example')
    ->events([
        'reset' => 'handleReset',
        'clear' => 'handleClear',
        'change' => 'handleChange',
        'blur' => 'handleBlur',
        'focus' => 'handleFocus',
        'keydown' => 'handleKeydown',
        'keyup' => 'handleKeyup',
        'keypress' => 'handleKeypress',
        'beforeCreate' => 'handleBeforeCreate',
        'created' => 'handleCreated',
        'beforeMount' => 'handleBeforeMount',
        'mounted' => 'handleMounted',
        'beforeUpdate' => 'handleBeforeUpdate',
        'updated' => 'handleUpdated',
        'beforeUnmount' => 'handleBeforeUnmount',
        'unmounted' => 'handleUnmounted',
    ])

🔔 Example Usage of event(JavaScript)

function handleReset(el$) {
    // Your code here
}
function handleClear(el$) {
    // Your code here
}
function handleChange(newValue, oldValue, el$) {
    // Your code here
}
function handleBlur(el$) {
    // Your code here
}
function handleFocus(el$) {
    // Your code here
}
function handleKeydown(Event, el$) {
    // Your code here
}
function handleKeyup(Event, el$) {
    // Your code here
}
function handleKeypress(Event, el$) {
    // Your code here
}
function handleBeforeCreate(el$) {
    // Your code here
}
function handleCreated(el$) {
    // Your code here
}
function handleBeforeMount(el$) {
    // Your code here
}
function handleMounted(el$) {
    // Your code here
}
function handleBeforeUpdate(el$) {
    // Your code here
}
function handleUpdated(el$) {
    // Your code here
}
function handleBeforeUnmount(el$) {
    // Your code here
}
function handleUnmounted(el$) {
    // Your code here
}

⚡ Slots

The following slots Documentation are available for this element: