Input (Textarea)

A textarea is a multi-line text field for user input.

Example

⌘ Cmd + ⌥ Option + 1

Properties

property	propType	required	default	description
displayError	bool	-	false	Shows error styling if true
focus	bool	-	false	Auto focus the Textaraea if true
label	string	-	null	Text that describes the textarea
note	string	-	null	Form note for the input
isOptional	custom	-	false	Adds an optional label if there is a label provided @param {Object} props Object of props @returns {Error} Error or null
defaultValue	string	-	-	The default value of the textarea used on initial render
isDisabled	bool	-	-	Prevents textarea from being modified and appears disabled
isReadOnly	bool	-	-	Prevents textarea from being modified but doesn't appear disabled
isRequired	bool	-	-	Prevents textarea from being submitted without value
maxLength	number	-	-	Max length of the input value
onBlur	func	-	-	Function that fires when the textarea loses focus. It fires regardless of whether the value has changed.
onChange	func	-	-	Function that fires when the textarea loses focus after the value changes
onFocus	func	-	-	Function that fires when the textarea gains focus
onInput	func	-	-	Function that fires the the textarea value changes
onKeyDown	func	-	-	Function that fires when a key is pressed down
placeholder	string	-	-	Textarea placeholder text
testSection	string	-	-	Hook for automated JavaScript tests
value	string	-	-	Text within the textarea

Usage

When text input includes multiple lines, you must use a textarea. Note: consider the CodeMirror component in Optimziely.git for advanced code input and editing capabilities.

Best Practices

Use textarea for generic multi-line input

Use textarea for simple code input like a CSS rule, or small snippet of HTML

Don't

Only use textarea for multi-line input, otherwise always use a standard <Input>