Components

Textarea

Textarea is a themed version of the native textarea element with an enhanced API for formatting and accessibility.

Always use a Label component to identify and describe the purpose of a text area.

import { Textarea } from '@sproutsocial/racine'

Properties

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

NameTypeDefaultDescriptionRequired?
idstring
ID of the form element, should match the "for" value of the associated label
namestring
Name of the form element and used for data-qa-input
ariaLabelstring
Label used to describe the input if not used with an accompanying label
valuestring
Current value of the textarea
autoFocusboolean
Will autofocus the element when mounted to the DOM
disabledboolean
Sets the HTML disabled attribute
isInvalidboolean
Renders an error state when true
placeholderstring
Placeholder text for when value is undefined or empty
requiredboolean
Sets the HTML required attribute
elemBeforeReactNode
16x16 element, such as an icon
elemAfterReactNode
16x16 element, such as an icon
maxLengthnumber
Max length of the input
enableSpellcheckboolean
Sets the HTML spellcheck attribute
enableResizeboolean
Makes the text area vertically resizable
rowsnumber4
The number of visible lines of text without scrolling
qaany
legacy for qa props until we cut everyone over
inputPropsany
props to spread onto the input field
innerRef"textarea"
Pass React.createRef() to get a reference to the underlying textarea element
onBlursignature
onChangesignature
onFocussignature
onKeyDownsignature
onKeyUpsignature

Recipes

Textarea with character counter
100