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}
  />
)

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.

<Textarea
  name="textarea-name"       // [OPTIONAL] name of the textarea
  id="textarea-id"           // [OPTIONAL] id of the textarea
  value="Textarea value"     // [OPTIONAL] value of the textarea
  onChange={handleChange}    // [OPTIONAL] callback to call when the value changes
  label="Textarea label"     // [OPTIONAL] label for the textarea
  caption="Textarea caption" // [OPTIONAL] caption to describe the textarea
  error="Error message"      // [OPTIONAL] error message to display below
  optional                   // [OPTIONAL] indicate if the textarea is optional
  resizable                  // [OPTIONAL] indicate if the textarea should be resizable
  disabled                   // [OPTIONAL] indicate if the textarea is disabled
/>

Prop	Required	Default	Type
name	false		string
id	false		string
value	false		string
onChange	false		(value: string) => void
label	false		string
caption	false		string
error	false		string
optional	false	false	boolean
resizable	false	false	boolean
disabled	false	false	boolean