Components
Forms
TextArea

TextArea

TextArea allows users to input and edit large amounts of text. Ideal for scenarios where the application requires detailed or extended information from the user, such as comments, descriptions, or notes.

Import statement

import { TextArea } from "@wfp/react"

TextArea works in the same way as the TextInput component.

Usage

Editable Example

<TextArea
  name="inputname"
  labelText="Text Area label"
  placeholder="Placeholder text"
  helperText="Optional helperText"
  id="textarea1"
  fullWidth
  rows={3}
/>;

With Error

The TextArea component with an error state is designed to provide users with feedback when the input does not meet certain validation criteria. This variant highlights the input area to visually indicate an issue, and it displays an error message to guide users on how to correct their input. For example, if the user’s input is invalid, such as missing a required field or using an incorrect format, the accompanying error message, like "Please enter your first name," directs them to make the necessary adjustments. Using clear and concise error messages enhances the user experience by helping users to easily rectify mistakes.

Editable Example

<TextArea
  name="inputname"
  labelText="Text Area label"
  placeholder="Placeholder text"
  helperText="Optional helperText"
  invalid
  invalidText="Please enter your comment"
  id="textarea2"
  rows={3}
/>;

List of TextArea states

Expand code

Editable Example

() => {
  const textAreaRefFocus = React.useRef(null);

  React.useEffect(() => {
    if (textAreaRefFocus.current) {
      textAreaRefFocus.current.focus();
    }
  }, []);

  const args = {
    helperText: "Optional helperText",
    rows: 4,
    fullWidth: true,
  };

  const hoverStyle = {
    background: "#F0F4FB",
    border: "1px solid #71767E",
    color: "#A7ADB9",
  };

  return (
    <>
      <TextArea
        labelText="Default"
        name="inputname-1"
        {...args}
      />
      <br />
      <TextArea
        ref={textAreaRefFocus}
        labelText="Focus"
        name="inputname-2"
        {...args}
      />
      <br />
      <TextArea
        labelText="Hover"
        style={hoverStyle}
        value="Text area input value"
        name="inputname-3"
        {...args}
      />
      <br />
      <TextArea
        labelText="Disabled"
        disabled
        value="Text area input value"
        name="inputname-4"
        {...args}
      />
      <br />
      <TextArea
        labelText="Readonly"
        readOnly
        value="Text area input value"
        name="inputname-5"
        {...args}
      />
      <br />
      <TextArea
        labelText="Invalid"
        invalid
        invalidText="This field is required"
        name="inputname-6"
        {...args}
      />
      <br />
    </>
  );
};

Related

On this page

References