Textarea is an input that allows the user to enter long form info and manually adjust the input size accordingly.
Best practices
- Always allow the size of the text input box to reflect the length of the content you expect the user to enter. Use Input for a single line of text; use TextArea when you expect more than one sentence.
- Display character limit/counter to set user expectations about input length.
- Use clear and concise language for all labels.
- Use help messaging to further clarify what the input is asking, never use icons for this purpose.
- Ensure error messaging adds specific instructions on how to resolve an error.
Variants
Default
Placeholder
Error
Disabled
Development
import Textarea from '@nerdwallet/react-textarea';<Textarea />;Props
<Textarea>
id
string
ID for the textarea element.
error
boolean
Show the input in an error visual state.
fullWidth
boolean
When true, sets width to 100% on the input.
disabled
boolean
Disable interaction and change.
noResize
boolean
Disable the browser resize functionality
className
string
Class on the <textarea> element.
inputRef
Function
Gives access to the input dom node
label
string
Optional label for the input.
errorMessage
node
Optional text to be shown indicating the user is in an error state.
helpMessage
node
Optional help text shown below the input.
tooltip
node
Optional tooltip shown via an icon next to the label.
tooltipPlacement
'top' | 'right' | 'bottom' | 'left'
Positioning of tooltip.
dangerouslyForceFocusStyling
boolean
Force the component to use its focus styles.
dangerouslyForceHoverStyling
boolean
Force the component to use its hover styles.