Include a link in the helper text of an option

React

Angular

Web Components

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

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