Slotted helper text in a form item

React

Angular

Web Components

const [value, setValue] = useState("");

  const onChange = (detail: GoabInputOnChangeDetail) => {
    setValue(detail.value);
  };

  const helpText = (
    <>
      <i>This is </i> slotted <b>help text</b>.
    </>
  );

<GoabFormItem label="First name" helpText={helpText}>
      <GoabInput onChange={onChange} value={value} name="item" />
    </GoabFormItem>

Use the helpText slot in a form item to display formatted helper text with custom styling like bold, italic, or links.

When to use

Use this pattern when:

You need to display helper text with custom formatting
Helper text requires links to additional resources
Standard string-based helper text is insufficient

Considerations

Keep helper text concise and relevant to the field
Use formatting to highlight important information
Ensure helper text is accessible to screen readers
Consider using links to provide additional guidance without cluttering the form