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.
Examples
Default
Placeholder
Error
Disabled
Props
In addition to the props defined by this component, any props <textarea> takes, such as name, value, onChange, etc., are accepted.
<Textarea>
id
string
ID for the textarea element.
inputRef
(instance: HTMLTextAreaElement | null) => void | RefObject<HTMLTextAreaElement>
Gives access to the input dom node
noResize
boolean
Disable the browser resize functionality
label
string
A label for the input
className
string
Class on outer container element
disabled
boolean
error
boolean
Flag to indicate if input is in an error (red outline) state. Use in conjunction with errorMessage to display a red error message.
fullWidth
boolean
helpMessage
ReactNode
Optional help text shown below the input
errorMessage
ReactNode
Red text to be shown indicating the user is in an error state.
tooltip
ReactNode
Optional tooltip shown via an icon next to the label
tooltipPlacement
"bottom" | "left" | "right" | "top"
Positioning of tooltip
defaultValue
string | number | Array<string>
placeholder
string
onFocus
FocusEventHandler<T>
onBlur
FocusEventHandler<T>
onChange
ChangeEventHandler<T>
name
string
value
string | number | Array<string>
autoComplete
string
maxLength
number
required
boolean
ref
(instance: any) => void | RefObject<any>