componente · @solu30/ui-kit/input

TextArea

Campo de texto multilínea con etiqueta, error, ayuda y alto que puede crecer con el contenido.

Seguir leyendo — 2 párrafos más

Multi-line text input with label, error, help text, and optional auto-resize.

Uses CSS variables for theming:

--ui-border for border color
--ui-accent for focus ring
--ui-bg-raised for background
--ui-content-primary for text
--ui-content-secondary for label/help text

373 sitios de import en 10 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

TheCharterPanel
carlosmartinpavon
cmp-packages
dietaly
elliot
gestorsalon
luigi
prepchat
raquetea
zentrya

El componente, montado

Cargando el espécimen…

export function TextAreaMatrix() {
  return (
    <Stage label="TextArea · auto-resize, disabled y un error sin variante warning" tall wide>
      <div className="grid w-full grid-cols-1 gap-3 sm:grid-cols-2">
        <TextArea
          label="Notas del evento"
          placeholder="Alergias, pedidos especiales, distribución de mesas..."
          autoResize
          helpText="El equipo de salón lo ve antes de armar el timeline."
        />
        <TextArea
          label="Motivo de cancelación"
          defaultValue="El cliente pidió mover la fecha por el pronóstico de lluvia."
          disabled
        />
        <TextArea
          label="Comentario del capitán"
          size="sm"
          defaultValue=""
          error="Se necesita el comentario antes de cerrar el zarpe."
        />
        <TextArea
          label="Descripción del sabor"
          size="sm"
          defaultValue="Dulce de leche granizado, elaboración propia, sin gluten."
        />
      </div>
    </Stage>
  )
}

De specimens/input.tsx · TextAreaMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Cómo se usa

import { TextArea } from '@solu30/ui-kit/input'

Props

7 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
label	opcional	`string`	Label for the textarea
error	opcional	`string`	Error message to display
className	opcional	`string`	Additional CSS class
helpText	opcional	`string`	Help text to display below the textarea
fullWidth	opcional	`boolean`	Whether the textarea should take full width
autoResize	opcional	`boolean`	Whether the textarea should auto-resize based on content
size	opcional	`'sm' \| 'md' \| 'lg'`	Size variant

Ejemplo del paquete

<TextArea
  label="Description"
  placeholder="Enter a description"
  value={description}
  onChange={(e) => setDescription(e.target.value)}
  autoResize
/>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.