El área de texto es un campo de entrada que permite a los usuarios ingresar texto largo que abarca varias líneas. Los casos de uso comunes incluyen ingresar descripciones detalladas dentro de los formularios y proporcionar comentarios de los usuarios.
En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
Use el texto de ayuda para proporcionar orientación sobre qué ingresar y cómo hacerlo. Estos son algunos ejemplos de lo que podría incluir en el texto de ayuda:
Contexto para ayudar al usuario, por ejemplo, cómo se utilizará la información.
Sugerencias sobre qué tipo de información va dentro del campo de entrada.
Ejemplos o requisitos de formato.
Utilice el texto de ayuda solo para la información pertinente. No use texto de ayuda que simplemente repita la misma información que aparece en el rótulo.
En el texto de ayuda, use mayúsculas como se usan en las oraciones. Escriba 1 o 2 oraciones cortas y completas que terminen con un punto. Al mostrar ejemplos de formato, no es necesario que termine con un punto.
Utilice texto de ayuda para proporcionar asistencia adicional o contexto al usuario.
No use texto de ayuda que simplemente repita la misma información que aparece en el rótulo.
No coloque texto de marcador de posición en el campo de entrada de texto. El texto de marcador de posición sobrecarga la memoria a corto plazo de los usuarios porque desaparece una vez que se ingresa un valor. También supone una carga adicional para los usuarios con discapacidades visuales y cognitivas.
En lugar de eso, coloque sugerencias e instrucciones, incluidos ejemplos y requisitos de formato, fuera del campo.
El texto del mensaje de error indica a un usuario cómo corregir el error. En el caso del campo de área de texto, los errores a menudo están relacionados con algo que debe corregirse para la validación integrada. Por ejemplo, si el usuario no completa un campo obligatorio que solicita una descripción de la pérdida, puede usar el texto de error para guiarlo a una solución: “Escriba una descripción de la pérdida”.
En el texto de error, use mayúsculas como se usan en las oraciones. Escriba 1 o 2 oraciones cortas y completas que terminen con un punto.
Use el texto de error para guiar al usuario y mostrarle una solución.
No escriba mensajes de error ambiguos ni deje a los usuarios pensando cómo resolver un problema.
Utilice un asterisco (*) para indicar los campos obligatorios. El asterisco precede al rótulo del campo. Esto ayuda a los usuarios a identificar fácilmente qué campos son obligatorios escaneando solo el carácter más a la izquierda del rótulo.
Además de marcar los campos obligatorios con un asterisco, se recomienda incluir instrucciones claras en la parte superior del formulario, como “Todos los campos marcados con un asterisco son obligatorios”, para garantizar que los usuarios comprendan el significado del asterisco.
Utilice un asterisco para indicar que un campo es obligatorio.
No use un asterisco para indicar algo que sea opcional.
El componente área de texto aparece sin valor (predeterminado), texto de marcador de posición o una entrada rellena.
Ilustración
Estado
Descripción
Sin valor (predeterminado)
Indica al usuario que no se ha ingresado ningún valor y que no hay un marcador de posición.
Marcador de posición
Indica al usuario que no se ha ingresado ningún valor. El marcador de posición aparece atenuado.
Entrada rellena
Indica al usuario que la entrada está completa con datos.
Las áreas de texto también tienen estados interactivos para habilitado, en foco, deshabilitado, error, solo lectura y solo visualización.
Estado
Descripción
Habilitado
Indica al usuario que el elemento está habilitado para la interacción.
En foco
Indica al usuario qué elemento de la interfaz de usuario del sistema está el foco.
Deshabilitado
Indica al usuario que el valor de entrada no se puede cambiar debido a factores locales. Por ejemplo, una casilla de verificación sobre el campo de entrada debe estar marcada para acceder a este campo de entrada. El usuario puede habilitarla interactuando con la página.
Error
Indica que el usuario cometió un error de validación. El texto del error proporciona información a los usuarios para solucionarlo.
Solo lectura
Indica al usuario que el valor de entrada no se puede cambiar debido a factores externos. Por ejemplo, la falta de acceso de escritura. El usuario puede hacer algo para habilitarlo, por ejemplo, ponerse en contacto con un administrador.
Solo visualización
El estado de solo visualización se utiliza en dos casos:
Un elemento de interfaz de usuario se utiliza en el modo de visualización.
Un elemento de la interfaz de usuario se muestra en el modo de edición, pero nunca se puede editar.
Los usuarios pueden modificar el ancho y la altura del área de texto usando el controlador de cambio de tamaño ubicado en la parte inferior derecha del campo. Si el contenido excede el espacio visible, se habilita un desplazamiento vertical.
Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:
La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
El elemento se puede operar con teclado, así como con mouse.
Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.
El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.
Cuando utilice este componente en su aplicación, asegúrese de que los rótulos y las instrucciones sean significativos y concisos. Proporcione instrucciones complementarias si fuera necesario.
Note: Hay versiones obsoletas de este componente. Consulte una versión de los documentos anterior a la 10.0.x.
Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.
If set to true, displays the component value in plain text. Consider using readonly instead, if possible, because plain text is worse for accessibility than readonly inputs.
Value of input. Takes precedence over initialValue. If this prop is passed, component works in controlled mode and its value will change only if this prop changes.
Puede utilizar atributos de entrada HTML, excepto aquellos que estén invalidados por Jutro. Estos atributos se asignarán al elemento HTML input.
<TextArea label="Text area component" id="textID1" rows={10} />
El resultado de pasar estas propiedades id y rows es que formará parte del input HTML que se crea en el DOM HTML. En el caso de rows, hará que el elemento del área de texto tenga 10 filas visibles.
Las entradas de Jutro han implementado controladores imperativos como mecanismo para proporcionar acceso a algunas características nativas comunes que podrían ser útiles para usted. Puede utilizar las siguientes características:
Establecer el foco para que usted establezca el foco del usuario en un componente específico.
Desenfocar para eliminar el foco del componente.
Desplazarse hasta el componente para poder llevar al usuario a un área específica de la página.
Estas características se proporcionan a través de la propiedad ref, que las expone de la siguiente manera:
Cuando se proporciona maxLength, el componente TextArea no permitirá ingresar más caracteres que el valor establecido. Sin embargo, si el valor se establece mediante programación con las propiedades initialValue o value, este control no se aplica. Por eso, en este caso, es posible que deba implementar una validación específica para evitar valores no deseados.
De forma predeterminada, el componente TextArea cambia de tamaño automáticamente para adaptarse a todo su contenido (cambio de tamaño automático). Si el usuario cambia el tamaño del componente manualmente, el comportamiento predeterminado se deshabilita y el componente permanecerá con el ancho y la altura que el usuario haya establecido.
Aunque algunos componentes de Jutro pueden proporcionar características complementarias o una función de ayuda para facilitar el proceso de validación, es su responsabilidad, como desarrollador, manejar la validación de cualquier entrada del usuario (con o sin ayudantes complementarios) y decidir qué mensajes de error se mostrarán.
Los componentes de Jutro se comportan en función de la implementación del desarrollador.
¿Cuándo se muestran los mensajes de error?
Los mensajes de error solo se muestran cuando los pasa al componente a través de la propiedad stateMessages. Esta propiedad recibe un objeto con el siguiente contenido:
El componente muestra cada mensaje de error proporcionado en el mismo orden que en la matriz.
¿Cuándo se produce la validación?
Esta decisión es suya, en calidad de desarrollador. Dado que los componentes no determinan cuándo se realiza la validación ni cuándo se debe mostrar el error, debe implementar la lógica para manejarla de acuerdo con los requisitos del proyecto, por ejemplo, mientras el usuario edita el contenido, cuando el componente pierde el foco y en el envío de formularios.
El componente TextArea solo tiene una propiedad obligatoria: label. Puede usar otras propiedades para complementar su comportamiento, como placeholder, secondaryLabel, onChange, etc.
<TextInput label="Text area component" placeholder="Write something here" secondaryLabel="Free text element" />
La propiedad tooltip hace que el componente TextArea muestre el ícono de descripción emergente y, cuando el usuario interactúa con él, muestra información complementaria. Esta propiedad puede recibir tan solo texto para mostrar: {text: "this will be displayed when tooltip is opened"}. También puede controlar qué acción específica hace que aparezca la descripción emergente pasando un segundo atributo trigger. Acepta los eventos HTML estándares como pointerover, focus o blur. De forma predeterminada, la descripción emergente se abre cuando el usuario hace clic en el ícono correspondiente.
En este ejemplo, la descripción emergente se muestra cuando el cursor está sobre su ícono.
El componente TextArea no proporciona una lógica de validación específica, pero sí la forma de incluir la validación del desarrollador y usar la propiedad stateMessages para mostrar cualquier mensaje de error necesario.
Este es un ejemplo de manejo de validación cuando se activa un evento onChange.
exportfunctionTextAreaValidation(){ const[validationMessages, setValidationMessages]=useState({}); const onChange =useCallback((e, newValue)=>{ if(!newValue || newValue.indexOf('a')==-1){ setValidationMessages({}); }else{ setValidationMessages({ error:['The text cannot contain the character `a`'], }); } },[]); return( <TextArea label="Do not accept words containing the 'a' character" secondaryLabel="Raises an error if the input contains the character 'a'" stateMessages={validationMessages} onChange={onChange} /> ); }
Puede utilizar la propiedad value para el caso del componente controlado:
exportfunctionTextAreaControlled(){ const[updatedValue, setNewValue]=useState('first given value'); constonChange=(e, newValue)=>{ setNewValue(newValue); }; return( <div> <TextArea label="Enter the value to be assigned to the input below" onChange={onChange} /> <br/> <TextArea label="Changes with the above" secondaryLabel="This value is automatically updated when the value above changes" value={updatedValue} /> </div> ); }
TextArea y otras entradas permiten el uso de una propiedad ref para acceder a algunos comportamientos nativos. Sin embargo, solo se exponen ciertas características. En este ejemplo, al hacer clic en el botón, el foco se establecerá automáticamente en la entrada que aparezca a continuación:
exportfunctionTextAreaRef(){ const textAreaRef =useRef(null); constsetFocus=(e)=>{ textAreaRef?.current?.focus(); }; return( <div> <Button label="Set focus on TextArea" onClick={setFocus}></Button> <TextArea label="Get the focus from the button" ref={textAreaRef} /> </div> ); }
Se introdujo un nuevo componente @jutro/components/TextArea que sustituye a TextAreaField.
El componente anterior TextAreaField quedó obsoleto y se trasladó al paquete @jutro/legacy. Para ver su documentación, consulte la versión de la documentación anterior a la 10.0.
