Textarea

To implement Textarea component into your project you’ll need to add the import:

import Textarea from "@kiwicom/orbit-components/lib/Textarea";

After adding import into your project you can use it simply like:

<Textarea />

Props

Table below contains all types of the props available in Textarea component.

Name	Type	Default	Description
dataAttrs	`Object`		Optional prop for passing `data-*` attributes to the `textarea` DOM element.
dataTest	`string`		Optional prop for testing purposes.
id	`string`		Set `id` for `Textarea`
defaultValue	`string`		Specifies the default value of the Textarea. To be used with uncontrolled usage.
disabled	`boolean`		If `true`, the Textarea will be disabled.
error	`React.Node`		The error to display beneath the Textarea. See Functional specs
fullHeight	`boolean`	`false`	If `true`, the Textarea will take 100 % of parent’s height.
help	`React.Node`		The help to display beneath the Textarea.
label	`Translation`		The label for the Textarea. See Functional specs
maxLength	`number`		Specifies the maximum number of characters allowed.
name	`string`		The name for the Textarea.
onChange	`event => void \\| Promise`		Function for handling onClick event.
onFocus	`event => void \\| Promise`		Function for handling onFocus event.
onBlur	`event => void \\| Promise`		Function for handling onBlur event.
placeholder	`TranslationString`		The placeholder of the Textarea.
ref	`func`		Prop for forwarded ref of the Textarea. See Functional specs
resize	`enum`	`"vertical"`	The resize option for Textarea.
rows	`number`		Specifies the height of the text area (in lines).
readOnly	`boolean`		Adds readOnly to html textarea element.
required	`boolean`		If true, the label is displayed as required.
size	`enum`	`"normal"`	The size of the Textarea.
spaceAfter	`enum`		Additional `margin-bottom` after component. See this docs
tabIndex	`string \\| number`		Specifies the tab order of an element
value	`string`		Specifies the value of the Textarea. To be used with controlled usage.
helpClosable	`boolean`	`true`	Whether to display help as a closable tooltip, or have it open only while the field is focused, same as error.

enum

size	resize
`"small"`	`"vertical"`
`"normal"`	`"none"`

Functional specs

The error prop overwrites the help prop, due to higher priority.
The color of the label will turn into cloud shade when the Textarea has some filled value.
ref can be used for example auto-focus the elements immediately after render.

class Component extends React.PureComponent<Props> {
  componentDidMount() {
    this.ref.current && this.ref.current.focus();
  }
  ref: { current: React.ElementRef<*> | null } = React.createRef();
  render() {
    return <Textarea ref={this.ref} />;
  }
}