K
KoreUI

Textarea

Form

Campo de texto multilínea con auto-resize y contador de caracteres.

Uso basico

<x-kore::textarea label="Bio" placeholder="Cuéntanos sobre ti..." />
<x-kore::textarea label="Bio" placeholder="Cuéntanos sobre ti..." />

Auto Resize

El textarea crece verticalmente conforme el usuario escribe.

<x-kore::textarea label="Notas" auto-resize rows="2" placeholder="Escribe algo largo..." />
<x-kore::textarea label="Notas" auto-resize rows="2" placeholder="Escribe algo largo..." />

Contador de caracteres

Muestra current/max debajo del textarea. El hint se mueve a la izquierda cuando hay contador.

Mantenlo breve

<x-kore::textarea label="Tweet" :max-length="280" hint="Mantenlo breve" />
<x-kore::textarea label="Tweet" :max-length="280" hint="Mantenlo breve" />

Combinado

Auto-resize y contador de caracteres trabajando juntos.

<x-kore::textarea label="Descripcion" auto-resize :max-length="500" rows="3" placeholder="Describe tu proyecto..." />
<x-kore::textarea label="Descripcion" auto-resize :max-length="500" rows="3" placeholder="Describe tu proyecto..." />

Tamanos

Tres tamanos disponibles.

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

Estados

Disabled, readonly, required y error.

<x-kore::textarea label="Disabled" disabled value="No editable" />
<x-kore::textarea label="Readonly" readonly value="Solo lectura" />
<x-kore::textarea label="Required" required placeholder="Obligatorio" />
<x-kore::textarea label="Con error" error="Este campo es requerido" />
<x-kore::textarea label="Disabled" disabled value="No editable" />
<x-kore::textarea label="Readonly" readonly value="Solo lectura" />
<x-kore::textarea label="Required" required placeholder="Obligatorio" />
<x-kore::textarea 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 textarea
name string|null null Nombre del textarea (tambien para deteccion de errores)
error string|null null Mensaje de error manual
size string md Tamano: sm, md, lg
rows int 4 Numero de filas iniciales (configurable via kore-ui.form.textarea.rows)
autoResize bool false Crece con el contenido automaticamente
maxLength int|null null Limite de caracteres con contador visible
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