K
KoreUI

Maskable

Form

Input con máscara basada en tokens, máscaras dinámicas, auto-uppercase, soporte de pegado y binding con wire:model.

Uso básico

<x-kore::maskable wire:model="phone" label="Teléfono" mask="(##) ####-####" />
<x-kore::maskable wire:model="phone" label="Teléfono" mask="(##) ####-####" />

Tokens de máscara

# = dígito, A = letra, * = cualquier carácter, ! = letra auto-mayúscula. Todo lo demás es literal.

{{-- Teléfono --}}
<x-kore::maskable label="Teléfono" mask="(##) ####-####" />

{{-- RFC con auto-mayúscula --}}
<x-kore::maskable label="RFC" mask="!!!!######!!!" />

{{-- Código postal --}}
<x-kore::maskable label="Código postal" mask="#####" />
{{-- Teléfono --}}
<x-kore::maskable label="Teléfono" mask="(##) ####-####" />

{{-- RFC con auto-mayúscula --}}
<x-kore::maskable label="RFC" mask="!!!!######!!!" />

{{-- Código postal --}}
<x-kore::maskable label="Código postal" mask="#####" />

Máscaras dinámicas

Pasa un array de máscaras para inputs con diferentes longitudes. La mejor máscara se selecciona automáticamente.

<x-kore::maskable
    :mask="['(##) ####-####', '(##) #####-####']"
    label="Teléfono"
/>
<x-kore::maskable
    :mask="['(##) ####-####', '(##) #####-####']"
    label="Teléfono"
/>

Valor formateado

Por defecto, Livewire recibe el valor sin formato (solo dígitos/letras). Con emit-formatted, recibe el valor con la máscara aplicada.

{{-- Valor raw: "5512345678" --}}
<x-kore::maskable wire:model="phone" label="Raw" mask="(##) ####-####" />

{{-- Valor formateado: "(55) 1234-5678" --}}
<x-kore::maskable wire:model="phone" label="Formateado" mask="(##) ####-####" emit-formatted />
{{-- Valor raw: "5512345678" --}}
<x-kore::maskable wire:model="phone" label="Raw" mask="(##) ####-####" />

{{-- Valor formateado: "(55) 1234-5678" --}}
<x-kore::maskable wire:model="phone" label="Formateado" mask="(##) ####-####" emit-formatted />

Iconos

Iconos Lucide a la izquierda y/o derecha del input.

<x-kore::maskable label="Teléfono" mask="(##) ####-####" icon="phone" />
<x-kore::maskable label="RFC" mask="!!!!######!!!" icon="file-text" clearable />
<x-kore::maskable label="Teléfono" mask="(##) ####-####" icon="phone" />
<x-kore::maskable label="RFC" mask="!!!!######!!!" icon="file-text" clearable />

Tamaños

Tres tamaños disponibles.

<x-kore::maskable label="Small" size="sm" mask="#####" />
<x-kore::maskable label="Medium" size="md" mask="#####" />
<x-kore::maskable label="Large" size="lg" mask="#####" />
<x-kore::maskable label="Small" size="sm" mask="#####" />
<x-kore::maskable label="Medium" size="md" mask="#####" />
<x-kore::maskable label="Large" size="lg" mask="#####" />

Estados

Disabled, readonly, required y error.

<x-kore::maskable label="Disabled" mask="(##) ####-####" disabled />
<x-kore::maskable label="Readonly" mask="(##) ####-####" readonly />
<x-kore::maskable label="Required" mask="(##) ####-####" required />
<x-kore::maskable label="Con error" mask="(##) ####-####" error="Este campo es requerido" />
<x-kore::maskable label="Disabled" mask="(##) ####-####" disabled />
<x-kore::maskable label="Readonly" mask="(##) ####-####" readonly />
<x-kore::maskable label="Required" mask="(##) ####-####" required />
<x-kore::maskable label="Con error" mask="(##) ####-####" error="Este campo es requerido" />

Props

Prop Tipo Default Descripción
label string|null null Texto de la etiqueta
hint string|null null Texto de ayuda debajo del campo
name string|null null Nombre para detección de errores
error string|null null Mensaje de error manual
size string md Tamaño: sm, md, lg
mask string|array|null null Patrón(es) de máscara. Array para máscaras dinámicas
emitFormatted bool false Enviar valor formateado a Livewire en lugar del raw
slotChar string _ Carácter placeholder para posiciones vacías
autoClear bool false Limpiar valor al perder el foco si está incompleto
icon string|null null Icono Lucide izquierdo
iconRight string|null null Icono Lucide derecho
clearable bool false Mostrar botón de limpiar
disabled bool false Estado deshabilitado
readonly bool false Estado de solo lectura
required bool false Campo obligatorio con asterisco
showError bool true Auto-detectar errores del \$errors bag

Configuración

Defaults globales en config/kore-ui.php.

config/kore-ui.php 
'form' => [
    'maskable' => [
        'slot_char' => '_',
        'auto_clear' => false,
        'emit_formatted' => false,
    ],
],
'form' => [
    'maskable' => [
        'slot_char' => '_',
        'auto_clear' => false,
        'emit_formatted' => false,
    ],
],