Helper text changes field height
helper-text-changes-field-height
Helper text changes field height — a field with helper text next to one without will misalign. Equalize by passing a space character as `helperText` on the sibling.
Description
Helper text changes field height, so a field with helper text beside one without will misalign. Equalize by passing a space character as `helperText` on the sibling, or an equivalent spacer, so adjacent fields stay aligned. Misalignment makes forms look broken and harder to scan. Fail when adjacent fields misalign because only one has helper text. Apply when aligning neighboring Text Fields with uneven helper text.
When to use
Aligning adjacent Text Fields where only some have helper text.
Not when
Not for isolated single fields with no adjacent sibling to align.
Agent hint
Equalize adjacent field heights with space helperText on siblings lacking help.
Adjacent fields with/without helper text stay aligned (sibling gets space `helperText` or equivalent).
Adjacent fields misalign because only one has helper text.
Citations
MUI — Text Field
https://mui.com/material-ui/react-text-field/