LongTextField

LongTextField renderiza un <textarea> estilizado para entrada de texto multilínea. La cantidad de filas visibles y si el usuario puede redimensionar el textarea son configurables. Atributos nativos adicionales del textarea pueden pasarse via rest-props spread.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | string | Sí | — | Valor de texto actual. | | onChange | (value: string) => void | Sí | — | Llamado con la nueva cadena en cada tecla presionada. | | label | string | No | — | Etiqueta mostrada sobre el textarea. | | description | string | No | — | Texto de ayuda mostrado debajo del textarea. | | placeholder | string | No | — | Texto placeholder mostrado dentro del textarea cuando está vacío. | | rows | number | No | 3 | Número inicial de filas de texto visibles. | | resizable | boolean | No | true | Cuando es true el usuario puede arrastrar el asa de redimensionamiento; cuando es false se deshabilita. | | containerStyle | React.CSSProperties | No | — | Estilos del div contenedor raíz. | | labelStyle | React.CSSProperties | No | — | Estilos del elemento de etiqueta. | | descriptionStyle | React.CSSProperties | No | — | Estilos del párrafo de descripción. | | className | string | No | — | Clase CSS del div wrapper interior del textarea. | | id | string | No | — | Atributo id del div wrapper interior. | | ...props | any | No | — | Atributos adicionales reenviados al elemento <textarea>. |

Uso

Básico

import React, { useState } from 'react';
import LongTextField from '@/components/fields/LongTextField';

export default function Example() {
  const [text, setText] = useState('');

  return (
    <LongTextField
      label="Notas"
      value={text}
      onChange={setText}
      placeholder="Ingresá notas adicionales..."
      rows={5}
    />
  );
}

No redimensionable con más filas

<LongTextField
  label="Descripción"
  value={description}
  onChange={setDescription}
  rows={8}
  resizable={false}
  description="No se admite Markdown en este campo."
/>