Tag Input
FormInput de tags/chips con soporte de teclado, manejo de pegado, límite máximo, separador personalizado y binding con wire:model.
Uso básico
Escribe y presiona Enter o coma para agregar tags.
<x-kore::tag-input wire:model="skills" label="Habilidades" placeholder="Agrega una habilidad..." /><x-kore::tag-input wire:model="skills" label="Habilidades" placeholder="Agrega una habilidad..." />Límite máximo
Limita el número máximo de tags permitidos.
<x-kore::tag-input wire:model="tags" :max="5" label="Tags (máximo 5)" placeholder="Agrega un tag..." /><x-kore::tag-input wire:model="tags" :max="5" label="Tags (máximo 5)" placeholder="Agrega un tag..." />Separador personalizado
Cambia el carácter que dispara la adición del tag.
<x-kore::tag-input wire:model="items" separator=";" label="Separados por punto y coma" placeholder="Escribe y presiona ;" /><x-kore::tag-input wire:model="items" separator=";" label="Separados por punto y coma" placeholder="Escribe y presiona ;" />Clearable
Muestra un botón para limpiar todos los tags.
<x-kore::tag-input wire:model="tags" label="Tags" clearable placeholder="Agrega tags..." /><x-kore::tag-input wire:model="tags" label="Tags" clearable placeholder="Agrega tags..." />Tamaños
Tres tamaños disponibles.
<x-kore::tag-input label="Small" size="sm" placeholder="sm" />
<x-kore::tag-input label="Medium" size="md" placeholder="md" />
<x-kore::tag-input label="Large" size="lg" placeholder="lg" /><x-kore::tag-input label="Small" size="sm" placeholder="sm" />
<x-kore::tag-input label="Medium" size="md" placeholder="md" />
<x-kore::tag-input label="Large" size="lg" placeholder="lg" />Estados
Disabled, required y error.
Agrega al menos un tag
<x-kore::tag-input label="Disabled" disabled />
<x-kore::tag-input label="Required" required placeholder="Obligatorio" />
<x-kore::tag-input label="Con error" error="Agrega al menos un tag" /><x-kore::tag-input label="Disabled" disabled />
<x-kore::tag-input label="Required" required placeholder="Obligatorio" />
<x-kore::tag-input label="Con error" error="Agrega al menos un tag" />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 |
separator
|
string | , | Carácter que dispara la adición del tag |
max
|
int|null | null | Número máximo de tags |
allowDuplicate
|
bool | false | Permitir tags duplicados |
addOnBlur
|
bool | true | Agregar texto actual como tag al perder el foco |
placeholder
|
string|null | null | Texto placeholder |
clearable
|
bool | false | Mostrar botón de limpiar todo |
disabled
|
bool | false | Estado deshabilitado |
required
|
bool | false | Campo obligatorio con asterisco |
showError
|
bool | true | Auto-detectar errores del \$errors bag |