feat: Support Rich Content (Links) in gcds-checkboxes Hint
Prerequisites | Prérequis
- [x] I've read the Contributing Guidelines. | J’ai lu les Lignes directrices sur les contributions.
- [x] I agree to follow the Code of Conduct. | J’accepte de me conformer au Code de conduite.
- [x] I've searched for existing issues that already report this problem, without success. | J’ai vérifié parmi les tickets (issues) existants que ce sujet n’avait pas déjà été soumis.
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
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.,
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
<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