FormHelperText

Helper or error text for a field, built on Typography and rendered as a <p>. Reads its id and error state from FormControl context and registers its presence so the control points aria-describedby at it only while it is rendered.

Architecture: FormHelperText renders Typography as="p". id resolves to the explicit prop, else the FormControl helperId (${id}-helper). When error is set (or inherited from FormControl), it renders in color="error" and sets role="alert" so changes are announced. On mount it calls the FormControl's stable setHasHelperText(true) and clears it on unmount - that flag drives aria-describedby on the control, so a reference is only present when the text is.

Examples

Default

We'll never share it.

<FormHelperText>We'll never share it.</FormHelperText>

Error State

<FormHelperText error>Enter a valid e-mail address.</FormHelperText>

From Context

<FormControl id="email" error>
  <FormHelperText>Enter a valid e-mail address.</FormHelperText>
</FormControl>

FormHelperText API reference