Slotted helper text in a form item

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>

form: FormGroup;

constructor(private fb: FormBuilder) {
  this.form = this.fb.group({
    item: [""],
  });
}

<goab-form-item label="First name" [formGroup]="form" [helpText]="helpTextTemplate">
  <goab-input name="item" formControlName="item"></goab-input>
  <ng-template #helpTextTemplate>
    <span>This is </span>
    <i>slotted </i>
    <b>help text</b>.
  </ng-template>
</goab-form-item>

const input = document.querySelector('goa-input[name="item"]');
input.addEventListener("_change", (e) => {
  console.log("Value changed:", e.detail.value);
});

<goa-form-item version="2" label="First name">
  <goa-input version="2" name="item"></goa-input>
  <div slot="helptext">
    <span>This is </span>
    <i>slotted </i>
    <b>help text</b>.
  </div>
</goa-form-item>

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

View old example docs