Include a link in the helper text of an option

<GoabxFormItem label="How would you like to be contacted?">
      <GoabCheckboxList name="contact-options">
        <GoabxCheckbox
          name="email"
          text="Email"
          value="email"
          description={
            <span>
              Help text with a <a href="#">link</a>.
            </span>
          }
        />
        <GoabxCheckbox name="phone" text="Phone" value="phone" />
        <GoabxCheckbox name="text" text="Text message" value="text" />
      </GoabCheckboxList>
    </GoabxFormItem>

optionOne = true;
  optionTwo = false;
  optionThree = false;

<goabx-form-item label="How would you like to be contacted?">
  <goab-checkbox-list name="contact-options">
    <goabx-checkbox
      name="email"
      text="Email"
      value="email"
      [description]="descriptionTemplate">
      <ng-template #descriptionTemplate>
        <span>Help text with a <a href="#">link</a>.</span>
      </ng-template>
    </goabx-checkbox>
    <goabx-checkbox name="phone" text="Phone" value="phone"></goabx-checkbox>
    <goabx-checkbox name="text" text="Text message" value="text"></goabx-checkbox>
  </goab-checkbox-list>
</goabx-form-item>

<goa-form-item version="2" label="How would you like to be contacted?">
  <goa-checkbox-list name="contact-options">
    <goa-checkbox version="2" name="email" text="Email" value="email">
      <span slot="description">Help text with a <a href="#">link</a>.</span>
    </goa-checkbox>
    <goa-checkbox version="2" name="phone" text="Phone" value="phone"></goa-checkbox>
    <goa-checkbox version="2" name="text" text="Text message" value="text"></goa-checkbox>
  </goa-checkbox-list>
</goa-form-item>

Add links within the description text of checkbox options to provide additional context or resources while users are making selections.

When to use

Use this pattern when:

Checkbox options need additional context via links
Users might need more information before making a selection
Linking to terms, policies, or detailed explanations
The link is directly relevant to the specific option

Considerations

Keep description text concise even with links
Ensure link text is descriptive and accessible
Consider whether the link should open in a new tab
Use the description prop (React) or ng-template (Angular) for custom content