Enables users to add longer text to a form.


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


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

dataTeststringOptional prop for testing purposes.
idstringSet id for Textarea
disabledbooleanIf true, the Textarea will be disabled.
errorReact.NodeThe error to display beneath the Textarea. See Functional specs
fullHeightbooleanfalseIf true, the Textarea will take 100 % of parent’s height.
helpReact.NodeThe help to display beneath the Textarea.
labelTranslationThe label for the Textarea. See Functional specs
maxLengthnumberSpecifies the maximum number of characters allowed.
namestringThe name for the Textarea.
onChangeevent => void \| PromiseFunction for handling onClick event.
onFocusevent => void \| PromiseFunction for handling onFocus event.
onBlurevent => void \| PromiseFunction for handling onBlur event.
placeholderTranslationStringThe placeholder of the Textarea.
reffuncProp for forwarded ref of the Textarea. See Functional specs
resizeenum"vertical"The resize option for Textarea.
rowsnumberSpecifies the height of the text area (in lines).
readOnlybooleanAdds readOnly to html textarea element.
requiredbooleanIf true, the label is displayed as required.
sizeenum"normal"The size of the Textarea.
spaceAfterenumAdditional margin-bottom after component. See this docs
tabIndexstring \| numberSpecifies the tab order of an element
valuestringSpecifies the value of the Textarea.
helpClosablebooleantrueWhether to display help as a closable tooltip, or have it open only while the field is focused, same as error.



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