A digital services project by FlexionTextarea
formUSWDS-derived
A multi-line text input for longer form content.
Reference: USWDS documentation ↗
Variants
Default
<div>
<label class="flex-label" for="textarea-default">Comments</label>
<textarea class="flex-textarea" id="textarea-default" name="comments">
</textarea>
</div>With Error
<div>
<label class="flex-label" for="textarea-error">Description</label>
<textarea class="flex-textarea" id="textarea-error" name="description" data-state="error" aria-describedby="textarea-error-msg">
</textarea>
</div>Contract
Class mapping
| USWDS | Flex | Notes |
|---|---|---|
usa-textarea | .flex-textarea | Multi-line text input |
Verified properties
font-familyfont-sizecolorbackground-colorborder-radiusBehavior promises
- ○ Focus ring visible on keyboard focus
- ○ Disabled state grays out textarea
Source CSS
Base styles: Form Control Base
/* flex-textarea — USWDS Textarea conformance
Extends: Form Control Base (base-classes.css#form-control)
States: error, success, disabled */
.flex-textarea {
min-block-size: 160px;
resize: vertical;
/* --- State: error --- */
&[data-state="error"] {
padding-block: 4px;
}
/* --- State: success --- */
&[data-state="success"] {
padding-block: 4px;
}
}