Form input
Textarea
Multiline semantics without duplicating TextField styling or validation state.Anatomy
Everything the field shows sits in one container with one support row.
- 1
Label
Above the box by default. With `float` on `outlined` it sits on the top border, in a gap the outline's legend cuts for it.
- 2
Container
Owns the border, the surface and the hover state layer; the footer and the grip live inside it.
- 3
Text area
The native textarea with a fixed line height, so `rows` translates into an exact height.
- 4
Resize grip
A bar on the bottom edge rather than a corner glyph: draggable, keyboard-operable, and named by `resizeLabel`.
- 5
Footer
An optional toolbar row in `#footer` for actions such as send. It goes inert together with a disabled or read-only field.
- 6
Support row
The message on the left and the counter on the right, with reserved height, so an error does not move the layout.
Interactive configuration
Toggle growth and the counter, then type a few lines: the box follows the content up to its cap, and the counter speaks up only near the limit.
Filled or outlined
The same shapes as the text field. On outlined a floating label sits on the top border in a cut-out, so it reads on any background.
Grow with a ceiling
`autoGrow` without `maxRows` lets a long paste push the page down. Pair them so the box stops and scrolls.
Counter
`counter` counts against `maxlength`; a number shows a display-only limit. For screen readers it stays quiet until the limit is close.
Leading adornments
An icon in front of the text narrows every line. Use it for meaning — a channel, a mention — rather than decoration.
States
Hover lays a state layer over the box; focus, error and disabled change the boundary. Error wins over focus.
State layer
An 8% layer of the text colour over the container, on `filled` and `outlined` alike.
Primary boundary
The border or the bottom rule takes the primary colour. A read-only field keeps its resting colour.
Message and glyph
The boundary and the support row take the error role, and an error icon precedes the message, so the state never depends on colour alone.
Receded
Surface and ink recede; the grip and the footer stop responding.
In context
The component is shown in a working composition built from public kit primitives.