Text area
Visible label. Rows 3. Resize block-end only.
Spec
- Visible label.
aria-labelif the label is hidden. - Default
rows="3". - Resize on the block-end axis, not both, not inline-only.
- Error, disabled, placeholder, helper — same as Text field.
- Density: sm / md / lg. Min-height still fits 16px body. Body never drops below 16.
Live demo
Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.
Rows 3, resize block-end, type 16
One paragraph. Consequence first.
Error
Add what the operator should do.
Do / Don't
| Do | Don't |
|---|---|
| Placeholder as an example payload. | Placeholder as the label. |
| Resize block-end. | Corner-drag that covers the helper. |
Motion
| Property | Duration | Easing | Trigger | Reduced motion |
|---|---|---|---|---|
transform: scale(0.97) | 120ms --dur-fast | --ease-out | :active | instant |
| color / border | 120ms --dur-fast | --ease-out | :hover | instant |
| outline | 80ms --dur-micro | --ease-out | :focus-visible | instant |
Accessibility
aria-invalid+describedbyon error.- 16px type — no iOS zoom on focus.
- Hit the field itself; the label is clickable via
for. - These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.