ontario-hint-text

Use hint text to help users understand how to complete fields in a form. When adding hint text, the first choice should always be to display hint text without using a hint expander.

Usage guidance

Please refer to the Ontario Design System for current documentation guidance.

Configuration

Once the component package has been installed (see Ontario Design System Component Library for installation instructions), the hint text component can be added directly into the project's code, and can be customized by updating the properties outlined here. Please see the examples below for how to configure the component.

Examples

Example of a bare-bones hint text component where the user is passing the hint directly as the element text content, which will be displayed as the question/statement.

HTML

<ontario-hint-text>This is a hint</ontario-hint-text>

React

<OntarioHintText>This is a hint</OntarioHintText>

Angular

<ontario-hint-text>This is a hint</ontario-hint-text>

This is a hint

Example of a hint text that includes the hint property, which will override the This is a hint text. The element-id property has also been added, which is used to establish a relationship between hint text content and elements using the aria-describedby attribute.

HTML

<ontario-hint-text hint="This hint will override the hint text provided as element content" element-id="hint-293849">
	This is a hint
	<ontario-hint-text></ontario-hint-text>
</ontario-hint-text>

React

<OntarioHintText hint="This hint will override the hint text provided as element content" elementId="hint-293849">
	This is a hint
</OntarioHintText>

Angular

<ontario-hint-text
	[hint]="'This hint will override the hint text provided as element content'"
	[elementId]="'hint-293849'"
>
	This is a hint
</ontario-hint-text>

This is a hint

Technical Note: Content Rendering and SSR (Server-Side Rendering)

The Ontario Hint component supports two ways of defining hints:

• Via the hint prop (as a string)
• Via slotted children placed between the component's opening and closing tags

While both approaches work in the browser, only the hint prop is reliably rendered during Server-Side Rendering (SSR).

SSR-safe example:

During SSR, fallback content using host.textContent is not reliably available. This is why it is recommended to pass the hint through the hint prop. Eg:

<OntarioHintText hint="Provide a detailed street address."></OntarioHintText>

Overview

Use hint text to help users understand how to complete fields in a form.

Properties

Property	Attribute	Description	Type	Default
elementId	element-id	The unique identifier of the element. This is optional - if no ID is passed, one will be generated.	string | undefined	undefined
hint	hint	Text to display as the hint text statement. Setting the hint can be done using the host element textContent or through setting this property. This property will take precedence.	string	undefined
hintContentType	hint-content-type	The content type of the hint. If no prop is passed, it will default to a string. If the hint requires multiple lines or HTML, the hintContentType prop should be set to html.	"html" | "string" | undefined	'string'

Methods

getHintTextId() => Promise<string | undefined>

This method returns the ontario-hint-text id. It is used to make sure the hint text and aria-describedby value of other form components match when the internal hint text props are used.

Returns

Type: Promise<string | undefined>

The ID of the hint text element, or undefined if no ID is set.

Shadow Parts

Part	Description
"hint-text"	The container for the hint text content. This part can be used to apply custom styles to the hint text.

Dependencies

Used by

• ontario-checkboxes
• ontario-dropdown-list
• ontario-input
• ontario-radio-buttons
• ontario-search-box
• ontario-task
• ontario-textarea

Graph

---

Built with StencilJS