The resize handle must be discoverable
Aliases: textarea resize grip · corner drag · CSS resize
What it is
Many textareas put a resize handle in the lower-right corner so people can stretch the visible window to a height or width they need. If the hatch, triangle, or edge contrast is too weak, the control might as well not exist: users never learn the window can change and live with the default viewport or an inner scrollbar. Discoverability is whether that corner is recognizable as something to drag—not whether the box auto-grows, and not how many rows it should start with.
Why it happens
The handle is an unlabeled miniature control, often little more than a dozen pixels. People must first form the hypothesis “corner equals draggable,” then find hatching or a thickened edge. Native hatching is readable on a light trough; a dark fill, clipped radius, or inner scrollbar eats it. Turning CSS resize off removes the system handle; leaving it on while a custom border paints over the native drawing hides it visually while it remains draggable, so empty space suddenly becomes a drag. Touch has no hover, hairline hatching is a poor target, and a finger competes with inner scrolling at the same corner.
Where it stops holding
When auto-grow already shows “as much as you write,” the handle is an advanced tweak and a miss costs less. Fixed-height log viewers and diff panes are the opposite: height is the workspace and the handle is the main control, so it must be obvious. A field that must not stretch horizontally but still draws a two-axis hatch invites sideways drags that break the layout. Keyboard users cannot operate most handles; a visible corner is not a substitute for a shortcut or a separate “expand editor.” A textarea inside a dialog with parent overflow: hidden can show a handle that cannot move.
Applying it
- Put enough-contrast hatching or a dedicated grip in the corner; do not leave
resizeon while a radius and thick border crop the native handle. - Allow only the axis the task needs: notes usually grow vertically; code and tables may need both.
- On touch, enlarge the corner hit target and keep it off the inner scrollbar and any trailing clear icon.
- Verify with a still of the textarea: ask people new to the page whether the box can be resized and from where. “No” or a wrong corner means the handle is too quiet. Then drag on a device and confirm the visible grip and the actual hit area coincide.