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
ariaLabelstring
Label used to describe the input if not used with an accompanying visual label
valuestring
Current value of the textarea
autoFocusboolean
Will autofocus the element when mounted to the DOM
disabledboolean
HTML disabled attribute
isInvalidboolean
Whether or not the current contents of the input are invalid
placeholderstring
Placeholder text for when value is undefined or empty
requiredboolean
HTML required attribute
elemBeforeReact.Node
16x16 element, such as an icon
elemAfterReact.Node
16x16 element, such as an icon
maxLengthnumber
Max length of the input
enableSpellcheckboolean
HTML spellcheck attribute
enableResizeboolean
Makes the text area vertically resizable
rowsnumber4
The number of visible lines of text without scrolling
qaany
inputPropsany
Props to spread onto the underlying textarea element
innerRef"textarea"
Used to get a reference to the underlying element
onBlur(e: SyntheticFocusEvent<HTMLInputElement>) => void
onChange(e: SyntheticInputEvent<HTMLInputElement>) => void
onFocus(e: SyntheticFocusEvent<HTMLInputElement>) => void
onKeyDown(e: SyntheticInputEvent<HTMLInputElement>) => void
onKeyUp(e: SyntheticInputEvent<HTMLInputElement>) => void

Recipes

Textarea with character counter
100