Help text

Help text provides a brief description accompanying a component.

Usage

Help text is used to provide additional information accompanying a component such as checkbox, dropdown, input, etc.

Structure


Structure of Help text

Properties


PropertyValue(s)Default value
WidthSpans the width of the related component-
Spacing between help text and the component4px4px


Usage

When to use help text

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.

When to use help text
When to use help text

Help text vs Inline message

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 vs Inline message

Position and width of the help text component

Help text always appears just below the accompanying component and spans across its width.

Position and width of the help text component