Help text provides a brief description accompanying a component.
Help text is used to provide additional information accompanying a component such as checkbox, dropdown, input, etc.
Property | Value(s) |
---|---|
Width | Spans the width of the related component |
Spacing between help text and the component | 4 px |
Help text should only be used to provide a brief description related to the component. It should not be used for headings, main content, or long paragraphs.
Inline message is used to provide inline feedback regarding a state or action and hence it is reactive (only appears after something has happened, to provide feedback). Whereas help text is used to provide additional information typically appearing just below a component e.g. inputs, dropdowns, etc.
Help text always appears just below the accompanying component and spans across its width.