Ir al contenido

Componentes · Ola 1 · Formularios

Textarea

Recibe texto de varias líneas: descripciones, notas, mensajes. Es de solo línea como Input: sin caja ni relleno, el límite es la línea inferior y el foco la enciende. Dentro de un Field toma de él su etiqueta, su descripción y sus estados.

import { Textarea } from '@archeblack/ui';

Ejemplos

Dentro de un Field

Con etiqueta y ayuda. Tres filas por defecto.

La ve todo el equipo.

Svelte 
<script lang="ts">
	import { Field, Textarea } from '@archeblack/ui';

	let description = $state('Portal donde los clientes consultan sus pedidos y descargan facturas.');
</script>

<div style:width="min(100%, 24rem)">
	<Field label="Descripción" hint="La ve todo el equipo.">
		<Textarea bind:value={description} />
	</Field>
</div>

Filas

rows fija el alto inicial. El usuario lo estira en vertical.

Svelte 
<script lang="ts">
	import { Field, Textarea } from '@archeblack/ui';

	let notes = $state('');
</script>

<!-- rows fija el alto inicial; el usuario lo estira en vertical desde la esquina. -->
<div style:width="min(100%, 24rem)">
	<Field label="Notas del despliegue">
		<Textarea rows={6} bind:value={notes} placeholder="Qué cambió y por qué." />
	</Field>
</div>

Tallas

sm, md y lg cambian el texto y el aire; el alto lo dan las filas.

Svelte 
<script lang="ts">
	import { Textarea } from '@archeblack/ui';
</script>

<div style:display="grid" style:gap="var(--arche-spacing-6)" style:width="min(100%, 24rem)">
	<Textarea size="sm" rows={2} placeholder="Talla sm: texto de 13 px" aria-label="Talla sm" />
	<Textarea rows={2} placeholder="Talla md" aria-label="Talla md" />
	<Textarea size="lg" rows={2} placeholder="Talla lg: más aire" aria-label="Talla lg" />
</div>

Estados

Inválido, con el mensaje del Field, y deshabilitado.

Cuéntanos el motivo en al menos 20 caracteres.

Svelte 
<script lang="ts">
	import { Field, Textarea } from '@archeblack/ui';
</script>

<div style:display="grid" style:gap="var(--arche-spacing-6)" style:width="min(100%, 24rem)">
	<Field label="Motivo" error="Cuéntanos el motivo en al menos 20 caracteres.">
		<Textarea rows={2} value="Ya no lo uso." />
	</Field>
	<Field label="Mensaje de bienvenida" disabled>
		<Textarea rows={2} value="Hola, este es el portal de clientes." />
	</Field>
</div>

Props

PropDescripción
bind:value? string | null Texto del campo.
rows? number Por defecto 3Filas visibles al inicio. El usuario puede estirarlo en vertical.
size? 'sm' | 'md' | 'lg' Por defecto 'md'Talla: sm usa texto de 13 px y menos aire arriba y abajo; lg, más aire. El alto sale de rows.
invalid? boolean Por defecto falseMarca el valor como inválido (aria-invalid). Dentro de un Field lo decide su error.
bind:ref? HTMLTextAreaElement | null El <textarea>, para enfocarlo o medirlo desde el código.
class? ClassValue Clases del producto; se suman a arche-textarea.
...rest HTMLTextareaAttributes Cualquier otro atributo va al <textarea>: name, placeholder, maxlength, required, disabled, oninput…

Accesibilidad

  • Es un <textarea> nativo: Enter escribe un salto de línea y Tab sale del campo.
  • Necesita un nombre: dentro de un Field lo da la etiqueta; suelto, aria-label, aria-labelledby o un <label for> propio. En desarrollo, un Textarea suelto sin nombre avisa por consola.
  • La línea llega a 3:1 contra toda capa. El foco la enciende y deja caer un halo; en colores forzados, la engrosa. Inválido y con foco, la línea toma el color de foco y el halo es de peligro, así se distingue de los otros campos inválidos.
  • Deshabilitado, la línea es punteada: se ve, pero no se confunde con la línea sólida de un campo que se puede usar.
  • Se estira solo en vertical, así no rompe el ancho de la columna. Deshabilitado no se estira.
  • El texto usa el alto de línea de la interfaz y crece con la fuente del usuario.

Qué evitar

  • Un Textarea para un dato de una línea (un nombre, un título). Un Input: el tamaño del campo anticipa cuánto se espera escribir.
  • Una sola fila con un texto largo esperado. Ajusta rows a lo que se espera; el usuario igual puede estirarlo.
  • Un límite de caracteres que aparece recién al enviar. Dilo en el hint del Field («Hasta 280 caracteres») y valida con ese mismo texto.