gcds-components icon indicating copy to clipboard operation
gcds-components copied to clipboard

feat: Support Rich Content (Links) in gcds-checkboxes Hint

Open stefx opened this issue 4 months ago • 0 comments

Prerequisites | Prérequis

Describe the feature request. | Décrivez la fonctionnalité demandée

Support rich content (e.g., gcds-link) in the hint area of gcds-checkboxes. Currently, the hint property only accepts plain strings. If you pass markup (such as a link), it renders as raw text instead of an interactive element. This prevents developers from adding “Learn more” links or other contextual content directly in the checkbox hint.

Describe the use case. | Décrivez les cas d’utilisation

In many forms, hints need to include references to related guidance, policies, or supporting documents. For example:

“[Learn more about checkbox item]”

Right now, if we try to add a to the hint, it displays as text and not a functional link. This forces us to place the link outside the checkbox group, which is less accessible and less consistent with expected form design.

Current Behavior

<gcds-checkboxes
  legend="Select options"
  name="example"
  hint="<gcds-link href='https://example.com'>Learn more</gcds-link>"
  options='[{"label": "Option A", "value": "A"}]'
></gcds-checkboxes>

Result: The link is displayed as raw text (<gcds-link ...>Learn more), not an interactive link.

Desired Behavior

Developers should be able to include rich hint content (e.g., , inline HTML) that renders properly and is announced correctly by assistive technology.

Example:

<gcds-checkboxes legend="Select options" name="example" options='[{"label": "Option A", "value": "A"}]'>
  <gcds-hint slot="hint" hint-id="example">
    <gcds-link href="https://example.com" target="_blank" rel="noopener noreferrer">
      Learn more about this option
    </gcds-link>
  </gcds-hint>
</gcds-checkboxes>

Benefits

Enables developers to follow common UX patterns (e.g., “Learn more” links in hints).

Improves accessibility by providing links in context.

Maintains compatibility with existing implementations.

Describe the preferred solution. | Décrivez la solution souhaitée

Add support for rich content inside the hint.

Preferred: Introduce a slot="hint" so developers can pass a with any inline content, including .

<gcds-checkboxes legend="Select options" name="example" options='[{"label": "Option A","value":"A"}]'>
  <gcds-hint slot="hint" hint-id="example">
    <gcds-link href="https://example.com" target="_blank" rel="noopener noreferrer">
      Learn more about eligibility requirements
    </gcds-link>
  </gcds-hint>
</gcds-checkboxes>

Alternative: Render the existing hint prop with innerHTML (with sanitization).

This would preserve backwards compatibility with the current hint string property while enabling richer, more accessible content when needed.

Describe all alternatives. | Décrivez toutes les solutions possibles

No response

Provide related code or examples. | Fournissez du code ou des exemples pertinents

No response

Add other relevant resources. | Ajoutez toute autre ressource utile

No response

stefx avatar Aug 25 '25 15:08 stefx