El componente <textarea> que viene integrado en el navegador te permite renderizar un input de texto multilínea.

<textarea />

Referencia

<textarea>

Para mostrar un text area, renderiza el componente <textarea> que viene integrado en el navegador.

<textarea name="postContent" />

Ver más ejemplos abajo.

Props

<textarea> soporta todas las props comunes de los elementos.

Puedes hacer un text area controlado pasando la prop value:

  • value: Un string. Controla el texto dentro del text area.

Cuando pasas value, también debes pasar un controlador onChange que actualice el valor proporcionado.

En cambio, si tu <textarea> no es controlado, puedes pasar la prop defaultValue:

Estas props de <textarea> son relevantes tanto para text areas controlados como no controlados:

  • autoComplete: Puede ser 'on' u 'off'. Especifica el comportamiento de autocompletar.
  • autoFocus: Un booleano. Si es true, React enfocará el elemento en el montaje.
  • children: <textarea> no acepta hijos. Para establecer el valor inicial, utiliza defaultValue.
  • cols: Un número. Especifica el ancho por defecto en anchos promedio de caracteres. Por defecto es 20.
  • disabled: Un booleano. Si es true, el input no será interactivo y aparecerá atenuado.
  • form: Un string. Especifica el id del <form> al que este input pertenece. Si es omitido, es el formulario padre más cercano.
  • maxLength: Un número. Especifica la longitud máxima del texto.
  • minLength: Un número. Especifica la longitud mínima del texto.
  • name: Un string. Especifica el nombre para este input que es enviado con el formulario.
  • onChange: Una función controladora de evento. Requerida para text areas controlados. Es ejecutada inmediatamente cuando el valor del input es modificado por el usuario (por ejemplo, es ejecutada con cada pulsación de tecla). Se comporta como el evento input del navegador.
  • onChangeCapture: Una versión de onChange que es ejecutada en la fase de captura.
  • onInput: Una función controladora de evento. Es ejecutada inmediatamente cuando el valor es cambiado por el usuario. Por razones históricas, en React es idiomático usar onChange en su lugar, el cual funciona de manera similar.
  • onInputCapture: Una versión de onInput que es ejecutada en la fase de captura.
  • onInvalid: Una función controladora de evento. Es ejecutada si la validación de un input fracasa al enviar el formulario. A diferencia del evento invalid que viene integrado, el evento onInvalid de React se propaga.
  • onInvalidCapture: Una versión de onInvalid que es ejecutado en la fase de captura.
  • onSelect: Una función controladora de evento. Es ejecutada después de que la selección dentro de <textarea> cambia. React extiende el evento onSelect para que también sea ejecutado para selecciones vacías y en ediciones (las cuales puede afectar la selección).
  • onSelectCapture: Una versión de onSelect que es ejecutada en la fase de captura.
  • placeholder: Un string. Mostrado en un color atenuado cuando el valor del text area está vacío.
  • readOnly: Un booleano. Si es true, el text area no puede ser editado por el usuario.
  • required: Un booleano. Si es true, el valor debe ser proporcionado para que el formulario sea enviado.
  • rows: Un número. Especifica la altura por defecto en promedio de altura de carácter. El valor por defecto es 2.
  • wrap: Puede ser 'hard', 'soft', u 'off'. Especifica cómo debe envolverse el texto al enviar un formulario.

Advertencias

  • No es permitido pasar un hijo como <textarea>algo</textarea>. Usa defaultValue para el contenido inicial.
  • Si un text area recibe una prop value string, este será tratado como controlado.
  • Un text area no puede ser controlado y no controlado a la vez.
  • Un text area no puede alternar entre ser controlado o no controlado a lo largo de su vida.
  • Todo text area controlado necesita un controlador de evento onChange que actualice su valor de manera síncrona.

Uso

Mostrar un text area

Renderiza <textarea> para mostrar un text area. Puedes especificar su tamaño por defecto con los atributos rows y cols, pero por defecto el usuario será capaz de modificar su tamaño. Para deshabilitar la modificación de tamaño, puedes especificar resize: none en el CSS.

export default function NewPost() {
  return (
    <label>
      Escribe tu mensaje:
      <textarea name="postContent" rows={4} cols={40} />
    </label>
  );
}

Proporcionar un label para un text area

Típicamente, colocarás todos los <textarea> dentro de una etiqueta <label>. Esto le indica al navegador que este label está asociado con ese text area. Cuando el usuario haga click en el label, el navegador enfocará el text area. Esto también es esencial para accesibilidad: un lector de pantallas anunciará el texto del label cuando el usuario enfoque el text area.

Si no puedes anidar el <textarea> dentro de un <label>, asócialos pasando el mismo identificador a <textarea id> y <label htmlFor>. Para evitar conflictos entre instancias de un componente, genera un identificador con useId.

import { useId } from 'react';

export default function Form() {
  const postTextAreaId = useId();
  return (
    <>
      <label htmlFor={postTextAreaId}>
        Escribe tu mensaje:
      </label>
      <textarea
        id={postTextAreaId}
        name="postContent"
        rows={4}
        cols={40}
      />
    </>
  );
}

Proporcionar un valor inicial para un text area

Opcionalmente puedes especificar el valor inicial de un text area. Pásalo a través de la prop defaultValue.

export default function EditPost() {