Skip to main content

Text area

Text area in Storybook
note

There are deprecated versions of this component. Switch to a version of the docs older than 10.0.x to view their docs.

Examples​

Check out the Usage section for details about how and when to use the text area component.

Basic TextArea​

The TextArea component has only one required property - label. You can use other props to complement its behavior, such as placeholder, secondaryLabel, onChange, and so on.

<TextInput
  label="Text area component"
  placeholder="Write something here"
  secondaryLabel="Free text element"
/>

Character counter​

The TextArea component can display a character counter. You must set the maxLength and showCounter properties to enable it.

<TextArea
  label="Text area component"
  placeholder="Write something here"
  maxLength={50}
  showCounter={true}
/>

TextArea with tooltip​

The tooltip property makes the TextArea component display the tooltip icon and, when the user interacts with it, display some complementary information. This property can simply receive the text to be displayed {text: "this will be displayed when tooltip is opened"}. You can also control what specific action makes the tooltip appear by passing a second attribute trigger. It accepts the standard HTML events such as pointerover, focus, or blur. By default, the tooltip opens when the user clicks on the tooltip icon.

In this example, the tooltip is displayed when the mouse pointer is over the tooltip icon:

<TextArea
  label="Text input component"
  placeholder="Write something here"
  secondaryLabel="Free text input"
  tooltip={{ text: 'tooltip text', trigger: 'pointerover' }}
/>

TextArea validation on change​

The TextArea component does not provide a specific validation logic but it provides a way to include the developer validation and use the stateMessages property to display any required error messages.

This is an example of handling validation when onChange event is triggered.

export function TextAreaValidation() {
  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}
    />
  );
}

Controlled component​

You can use the value property for the controlled component scenario:

export function TextAreaControlled() {
  const [updatedValue, setNewValue] = useState('first given value');

  const onChange = (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>
  );
}

Using ref to set focus​

TextArea and other inputs allow using a ref property to access some native behaviors. However, only certain features are exposed. In this example, when you click the button, the focus will automatically be set in the input below:

export function TextAreaRef() {
  const textAreaRef = useRef(null);

  const setFocus = (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>
  );
}
Legal and Support Information
Copyright © 2001-2024 Guidewire Software, Inc.