PhoneElement

A complete example form demonstrating how to use the PhoneElement field within Laravel VueForm. This form showcases international phone number handling with country filtering, automatic formatting, and optional unmasking for raw value submission — ideal for forms that require validated and standardized phone input. Documentation

🧱 Import Class

use VueFormLaravel\Abstracts\VueFormBuilder;
use VueFormLaravel\Elements\Fields\PhoneElement;
use VueFormLaravel\Elements\Vueform;

🧩 Example

• Input
• Output

class PhoneElementForm extends VueFormBuilder
{
    protected function buildForm()
    {
        return Vueform::build()
            ->schema([
                PhoneElement::name('phone2')
                    ->unmask(true),

                PhoneElement::name('phone')
                    ->include(['bd']) // only show bd in select country list 
                    ->unmask(true)
            ]);
    }
}

⚙️ Allowed Attributes

⚡ Events

The following events Documentation are available for this element:

🔔 Example Usage of PHP

PhoneElement::name('example')
    ->events([
        'reset' => 'handleReset',
        'clear' => 'handleClear',
        'change' => 'handleChange',
        'select' => 'handleSelect',
        'open' => 'handleOpen',
        'close' => 'handleClose',
        'blur' => 'handleBlur',
        'focus' => 'handleFocus',
        'beforeCreate' => 'handleBeforeCreate',
        'created' => 'handleCreated',
        'beforeMount' => 'handleBeforeMount',
        'mounted' => 'handleMounted',
        'beforeUpdate' => 'handleBeforeUpdate',
        'updated' => 'handleUpdated',
        'beforeUnmount' => 'handleBeforeUnmount',
        'unmounted' => 'handleUnmounted',
    ])

🔔 Example Usage of JavaScript

function handleReset(el$) {
    // Your code here
}
function handleClear(el$) {
    // Your code here
}
function handleChange(newValue, oldValue, el$) {
    // Your code here
}
function handleSelect(option, el$) {
    // Your code here
}
function handleOpen(el$) {
    // Your code here
}
function handleClose(el$) {
    // Your code here
}
function handleBlur(el$) {
    // Your code here
}
function handleFocus(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
}