Textarea

The Textarea component is used to create a multi-line text input field.

Usage

import { Textarea } from '@harnessio/ui/components'

//...

return (
  <Textarea
    label="Textarea label"
    placeholder="Placeholder"
    name="textarea-name"
    onChange={handleChange}
  />
)

Disable

Resizable

Theme

The Textarea component accepts a theme prop, which defines the visual state of the input: either warning, or danger.

When an error occurs, set theme="danger" and pass the error message to the error prop.

For warnings, set theme="warning" and provide the warning message via the warning prop.

Character Limit

The Textarea component supports a maxCharacters prop, which defines the maximum number of characters a user can enter.

Sizes

The Textarea component supports the following sizes: sm and md. The default size is md.

Orientation

The Textarea component accepts an optional orientation prop, which defines the layout direction of the textarea and its label. Available options are horizontal and vertical (default).

API Reference

The Textarea can be used either controlled or uncontrolled.

When controlled, the Textarea will use the value prop as its value and call the onChange callback whenever the value changes.

When uncontrolled, the Textarea will use the defaultValue prop as its initial value and will call onChange when its value changes.

The Textarea also supports all attributes of the textarea HTML element.

interface InformerProps extends Omit<TooltipProps, "children"> {
  className?: string;
  /**
   * If disabled, the tooltip will not be shown
   */
  disabled?: boolean;
  iconProps?: IconPropsV2;
}

Prop	Required	Default	Type
wrapperClassName	false		string
className	false		string
name	false		string
id	false		string
value	false		string
onChange	false		(value: string) => void
label	false		string
caption	false		string
error	false		string
warning	false		string
optional	false	false	boolean
resizable	false	false	boolean
disabled	false	false	boolean
size	false	'md'	'sm' | 'md'
maxCharacters	false		number
informerContent	false		Exclude<ReactNode, boolean | null | undefined>
informerProps	false		InformerProps
labelSuffix	false		ReactNode
orientation	false	'vertical'	'vertical' | 'horizontal'