K
KoreUI

Input

Form

Campo de texto con iconos, prefix/suffix, botón de limpiar y soporte completo de wire:model.

Uso básico

<x-kore::input label="Nombre" placeholder="Ingresa tu nombre" />
<x-kore::input label="Nombre" placeholder="Ingresa tu nombre" />

Iconos

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

<x-kore::input label="Buscar" icon="search" placeholder="Buscar..." />
<x-kore::input label="Email" icon="mail" icon-right="check" placeholder="tu@email.com" />
<x-kore::input label="Buscar" icon="search" placeholder="Buscar..." />
<x-kore::input label="Email" icon="mail" icon-right="check" placeholder="tu@email.com" />

Prefix & Suffix

Addons de texto con fondo muted.

https://
.com
$
USD 
<x-kore::input label="Website" prefix="https://" suffix=".com" />
<x-kore::input label="Precio" prefix="$" suffix="USD" />
<x-kore::input label="Website" prefix="https://" suffix=".com" />
<x-kore::input label="Precio" prefix="$" suffix="USD" />

Clearable

Muestra un botón X cuando el input tiene valor.

<x-kore::input label="Buscar" icon="search" clearable value="Alpine.js" />
<x-kore::input label="Buscar" icon="search" clearable value="Alpine.js" />

Tamaños

Tres tamaños disponibles.

<x-kore::input label="Small" size="sm" placeholder="sm" />
<x-kore::input label="Medium" size="md" placeholder="md" />
<x-kore::input label="Large" size="lg" placeholder="lg" />
<x-kore::input label="Small" size="sm" placeholder="sm" />
<x-kore::input label="Medium" size="md" placeholder="md" />
<x-kore::input label="Large" size="lg" placeholder="lg" />

Estados

Disabled, readonly, required, y error.

<x-kore::input label="Disabled" disabled value="No editable" />
<x-kore::input label="Readonly" readonly value="Solo lectura" />
<x-kore::input label="Required" required placeholder="Obligatorio" />
<x-kore::input label="Con error" error="Este campo es requerido" />
<x-kore::input label="Disabled" disabled value="No editable" />
<x-kore::input label="Readonly" readonly value="Solo lectura" />
<x-kore::input label="Required" required placeholder="Obligatorio" />
<x-kore::input label="Con error" 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 input
name string|null null Nombre del input (también para detección de errores)
error string|null null Mensaje de error manual
type string text Tipo HTML del input
size string md Tamaño: sm, md, lg
icon string|null null Icono Lucide izquierdo
iconRight string|null null Icono Lucide derecho
prefix string|null null Texto addon izquierdo
suffix string|null null Texto addon 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