Components

Textarea

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

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

import { Textarea } from '@sproutsocial/racine'
() => {
const [value, setValue] = useState("")
return (
<Box>
<Label htmlFor='resume'>
Resumé
</Label>
<Textarea
value={value}
onChange={e => setValue(e.target.value)}
id='resume'
name='resume'
/>
</Box>
)
}

Properties

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
ariaDescribedbystring
Attribute used to associate other elements that describe the Textarea, like an error
valuestring
Current value of the textarea
autoFocusboolean
Will autofocus the element when mounted to the DOM
disabledboolean
HTML disabled attribute
readOnlyboolean
HTML readonly 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

Note the usage of component nested inside , this is done to convey to screen-reader users there is a character limit associated with the textarea.

() => {
const [value, setValue] = useState("")
return (
<Box>
<Label htmlFor='resume'>
Resumé <VisuallyHidden>(100 characters)</VisuallyHidden>
</Label>
<Textarea
value={value}
onChange={e => setValue(e.target.value)}
id='resume'
name='resume'
elemAfter={
<CharacterCounter currentValue={value.length} maxValue={100} />
}
/>
</Box>
)
}

With placeholder text

Use of placeholder text is generally discouraged.

() => {
const [value, setValue] = useState("")
return (
<Box>
<Label htmlFor='resume'>
Resumé
</Label>
<Textarea
value={value}
onChange={e => setValue(e.target.value)}
id='resume'
name='resume'
placeholder='Your resume details...'
elemAfter={
<CharacterCounter currentValue={value.length} maxValue={100} />
}
/>
</Box>
)
}