TextAreaInput
The TextAreaInput component is composed of a label, textarea field, and description. It supports built-in accessibility attributes and validation states.
Import
import { TextAreaInput } from "@cfa/react-core";Live Editor
Guidelines
When to use
- TextAreaInput is for multi-line text without formatting.
Do
- Always provide a visible label in sentence case. Placeholder text is not a label. Use placeholders only for optional format hints, never as the only label.
- Validate when people leave the field or submit the form, not on every keystroke.
- Show the description and error message at the same time. Do not hide description when the field is invalid.
Avoid
- Using TextAreaInput for single-line text. Use TextInput.
- Using TextAreaInput for rich text with formatting. Use a dedicated rich text editor.
Examples
Default
A basic TextAreaInput with a label.
Required
Use the isRequired prop to indicate that the field must have a value.
With Description
Provide additional context with the description prop.
Character Limit
Set a maximum character length with the maxLength prop and use hasCharacterCounter to display a character counter.
Sizes
Use the size prop to control padding and typography. Options are sm, md (default), and lg.
Field Validation
The TextAreaInput supports built-in validation, showing error states when needed.