TextArea

core package3.2.2

Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.

TextAreas allow users to enter larger portions of text, typically as part of a Form. The TextArea component only allows for basic Text. If you require more styling options to be applied to the text input, refer to the RichTextEditor documentation.

Usage

TextAreas, like Inputs, can be controlled or uncontrolled components. For a controlled component, make use of the value and onChange props. For an uncontrolled component, use the defaultValue prop. The TextArea component allows for standard Form Field structures such as being set required, disabled, or readOnly, as well as including a label, status, or info. If an onResolveSuggestion callback function is provided, and the status is set to pending, the user will be prompted to accept or deny whatever suggested value populates the TextArea.

If there is a label and the Field is not disabled, passing an object to the additionalInfo prop that includes a heading and content will provide the user with more useful information on the Field when they click on the associated information Icon.

The TextArea component can restrict the length of a message through props such as maxLength, displayCharCount, and hardStop. It can also enforce a minLength to the input. If you would like the TextArea to grow or shrink in height depending on the content of the input, pass the autoResize prop. You can also allow users to adjust the size of the TextArea component themselves by enabling the resizable prop.

Example

Enter a large amount of text

Related components

Properties

NameDescriptionDefaultType
additionalInfoButton when clicked will show additional information on a field
{
  content: string | Element;
  heading: string;
}
autoResizeEnables the Text Area to resize itself automatically.falseboolean
classNameAdditional CSS classes.string
defaultValueIf you wish to use an uncontrolled input, pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.string
disabledDisable the control. The browser defaults to false.boolean
displayCharCountDisplay a live character count in relation to the maxLength.falseboolean
hardStopAllow or disallow a value beyond the maxLength.trueboolean
idSets DOM id for the control and associates label element via 'for' attribute. If an id is not pass, a random id will be generated for any render.string
infoIt is recommended to pass a simple string to offer guidance. Text will be styled based on status prop.ReactNode
labelPass a string or a fragment with an Icon and string.ReactNode
labelHiddenVisually hides the label region.boolean
maxLengthMaximum length of characters that can be input.number
minLengthMinimum length of characters that can be input.number
nameSets html name attribute for the underlying control. Useful for mapping to a data field.string
onChangeChangeEventHandler<HTMLTextAreaElement>
onResolveSuggestion(accepted: boolean) => void
placeholderPlaceholder text. The browser defaults to an empty string.string
readOnlyMakes the input non editable and non clickable. The browser defaults to false.boolean
requiredIndicate if the field is required. The browser defaults to false.boolean
resizableAllows the user to resize the Text Area.falseboolean
statusSet visual state based on a validation state.
'error' |'pending' |'success' |'warning' 
valueCreates a controlled input and sets the value. Requires an onChange handler to update value. value + onChange is the recommended method per React team.string

Custom theming

You can override the styles of the TextArea component by setting a custom theme on the Configuration component.

Example

Enter a large amount of text

Theme properties

{
      •       'min-height': '3.75rem',
      •       padding: 'components.form-control.padding' // → components.form-control.padding
      •     }
    •   }
}