Use textarea for comments, descriptions, and multi-line feedback.
Textarea
Multi-line text field with shared form shell conventions.
Give enough context for a quick response.
- .source-textarea-root Field wrapper
- .source-textarea-label Associated label
- .source-textarea-wrapper Border and focus container
- .source-textarea Native multiline control
- .source-textarea-hint Hint or error message area
States
StateAppearance
DefaultNeutral surface, border, and standard typography.
FocusFocus ring appears on wrapper.
ErrorDanger border and message tone.
DisabledMuted and non-interactive.
Design intent
Textarea is for free-form input that cannot fit in a single line. The rows prop sets visible starting height, not a character limit. Resize behavior is a layout decision: constrain it when adjacent content would shift unpredictably, allow it when users need to review long input.
When to use
Do
Set rows and helper copy to indicate how much detail users should write.
Allow vertical resize when users need review space for longer content.
Don't
Do not use textarea for short values like city or first name.
Avoid unbounded input without character count or validation when limits exist.
Do not allow layouts that force horizontal scrolling for text editing.
Rows and resize
Use rows to define initial height and resize to control manual resizing. Vertical resize is a practical default for most forms.
Designer checklist
rowsis set to reflect expected input volume (short note vs. full description).- Character limit is visible upfront and updates as the user types.
- Resize is constrained when adjacent layout would break if the field grows.
- Error text describes how to correct the input, not just that it is invalid.
Textarea props
PropTypeDefaultDescription
requiredbooleanfalseShows
* after label and sets the native required attribute.rowsnumber4Initial visible line count.
resizenone | vertical | horizontal | bothverticalCSS resize behavior.
labelstringnullLabel above textarea.
hint / errorstringnullSupport text or validation text below field.
Basic usage
import { Textarea } from '@pierredelattre/source-react';
<Textarea id="notes" label="Notes" rows={5} />Validation usage
<Textarea
id="description"
label="Project description"
hint="Max 500 characters"
error={errors.description}
resize="vertical"
/>Component tokens
TokenDefault
--source-textarea-bg--source-color-surface
--source-textarea-border-color--source-color-border-strong
--source-textarea-padding-y--source-spacing-2
ARIA attributes
AttributePurpose
aria-invalidSignals validation error state.
aria-describedbyReferences hint or error text.
Keyboard support
KeyBehavior
TabMoves focus in and out.
EnterInserts line breaks inside field.