Text area
A multi-line field where users can input and edit text.
Props
ariaLabel
string
Defines how the text will be translated for the screen reader.
autoComplete
string
Specifies the autocomplete attribute for the textarea input.
countBy
GoabTextAreaCountBy character | word
Counting interval for characters or words, specifying whether to count every character or word.
disabled
boolean
Sets the input to a disabled state.
error
boolean
Sets the input to an error state.
id
string
Sets the id attribute on the textarea element.
maxCount
number
Maximum number of characters or words allowed.
maxWidth
string
Sets the maximum width of the text area.
Defaults to
60ch.
name
string
Name of the input value that is received in the change event. If omitted, a unique name is generated.
placeholder
string
Text displayed within the textarea when no value is set.
readOnly
boolean
Sets the input to a read only state.
rows
number
Sets the number of visible text rows.
Defaults to
3.
size
GoabTextAreaSize default | compact
Sets the visual size variant of the text area.
testId
string
Sets a data-testid attribute for automated testing.
value
string
Bound to the current value of the textarea.
width
string
Sets the width of the text area.
Defaults to
100%.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
Events
onBlur
(event: GoabTextAreaOnBlurDetail) => void
Callback fired when the textarea loses focus.
onChange
(event: GoabTextAreaOnChangeDetail) => void
Callback fired when the value of the textarea changes.
onFocus
(event: GoabTextAreaOnFocusDetail) => void
Callback fired when the textarea receives focus.
onKeyPress
(event: GoabTextAreaOnKeyPressDetail) => void
Callback fired when a key is pressed within the textarea.
Ask a long answer question with a maximum word count
States
When you must disable a button or input:
- Provide nearby text explaining what needs to happen first
- Consider showing the element enabled with validation on submit instead
- Use aria-describedby to link the disabled element to explanatory text
Don't
Don't disable buttons or inputs without explaining why. Disabled controls can be confusing and users may not understand why they can't interact with an element.
Other
The form item automatically associates the label with the input for screen readers, ensuring your form is accessible.
Do
Use a form item wrapper on all inputs to add a label, helper text, error message, and more.
Sizing
Known input length: Use fixed-width inputs for content with a specific length, such as postal code (7 characters) or year (4 characters).
Unknown input length: If you don’t know how many characters the user will need (like their name), make your text input 100% of the container.
Do
Size text inputs based on the expected content length to help users understand what information is needed.
Content
Tip
Use countBy='word' when suggesting a response length. Use countBy='character' when enforcing a hard limit.
Types
Do
Use a text area to input content longer than a single line, such as descriptions, comments, or feedback.
