@ongov/ontario-design-system-component-library 4.2.0 → 4.3.0-alpha.1

package/src/components/ontario-checkbox/ontario-checkboxes.tsx

@@ -24,6 +24,7 @@ import {
 import { handleInputEvent } from '../../utils/events/event-handler';
 
 import { default as translations } from '../../translations/global.i18n.json';
+import { ErrorMessage } from '../../utils/components/error-message/error-message';
 
 @Component({
 	tag: 'ontario-checkboxes',
@@ -144,6 +145,11 @@ export class OntarioCheckboxes implements Checkboxes {
 	 */
 	@Prop() required?: boolean = false;
 
+	/**
+	 * Set this to display an error message
+	 */
+	@Prop({ mutable: true }) errorMessage?: string;
+
 	/**
 	 * Used to add a custom function to the checkbox onChange event.
 	 */
@@ -199,6 +205,11 @@ export class OntarioCheckboxes implements Checkboxes {
 	 */
 	@Event() checkboxOnFocus: EventEmitter<InputFocusBlurEvent>;
 
+	/**
+	 * Emitted when an error message is reported to the component.
+	 */
+	@Event() inputErrorOccurred: EventEmitter<{ errorMessage: string }>;
+
 	/**
 	 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.
 	 */
@@ -323,6 +334,12 @@ export class OntarioCheckboxes implements Checkboxes {
 		this.updateCaptionState(this.caption);
 	}
 
+	@Watch('errorMessage')
+	broadcastInputErrorOccurredEvent() {
+		// Emit event to notify anyone who wants to listen for errors occurring
+		this.inputErrorOccurred.emit({ errorMessage: this.errorMessage ?? '' });
+	}
+
 	/**
 	 * Function to handle checkbox events and the information pertaining to the checkbox to emit.
 	 */
@@ -363,7 +380,6 @@ export class OntarioCheckboxes implements Checkboxes {
 			this.element,
 		);
 	}
-
 	/**
 	 * If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the fieldset `aria-describedBy` attribute.
 	 */
@@ -381,8 +397,9 @@ export class OntarioCheckboxes implements Checkboxes {
 	}
 
 	render() {
+		const error = !!this.errorMessage;
 		return (
-			<div class="ontario-form-group">
+			<div class={`ontario-form-group ${error ? 'ontario-input--error' : ''}`}>
 				<fieldset class="ontario-fieldset" aria-describedby={this.hintTextId}>
 					{this.captionState.getCaption(undefined, !!this.internalHintExpander)}
 					{this.internalHintText && (
@@ -392,6 +409,7 @@ export class OntarioCheckboxes implements Checkboxes {
 							ref={(el) => (this.hintTextRef = el)}
 						></ontario-hint-text>
 					)}
+					<ErrorMessage message={this.errorMessage} error={error} />
 					<div class="ontario-checkboxes">
 						{this.internalOptions?.map((checkbox) => (
 							<div class="ontario-checkboxes__item">

package/src/components/ontario-checkbox/readme.md

@@ -208,6 +208,7 @@ expander for checkbox option 2", "content": "Example hint expander content for c
 | `customOnBlur`   | --              | Used to add a custom function to the checkbox onBlur event.                                                                                                                                                                                                                                                                                                                                                                            | `((event: Event) => void) \| undefined` | `undefined` |
 | `customOnChange` | --              | Used to add a custom function to the checkbox onChange event.                                                                                                                                                                                                                                                                                                                                                                          | `((event: Event) => void) \| undefined` | `undefined` |
 | `customOnFocus`  | --              | Used to add a custom function to the checkbox onFocus event.                                                                                                                                                                                                                                                                                                                                                                           | `((event: Event) => void) \| undefined` | `undefined` |
+| `errorMessage`   | `error-message` | Set this to display an error message                                                                                                                                                                                                                                                                                                                                                                                                   | `string \| undefined`                   | `undefined` |
 | `hintExpander`   | `hint-expander` | Used to include the ontario-hint-expander component for the checkbox group. This is passed in as an object with key-value pairs. This is optional.                                                                                                                                                                                                                                                                                     | `HintExpander \| string \| undefined`   | `undefined` |
 | `hintText`       | `hint-text`     | Used to include the ontario-hint-text component for the checkbox group. This is optional.                                                                                                                                                                                                                                                                                                                                              | `Hint \| string \| undefined`           | `undefined` |
 | `language`       | `language`      | The language of the component. This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.                                                                                                                                                                                                                    | `"en" \| "fr" \| undefined`             | `undefined` |
@@ -217,11 +218,12 @@ expander for checkbox option 2", "content": "Example hint expander content for c
 
 ## Events
 
-| Event              | Description                                                                                  | Type                                                         |
-| ------------------ | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
-| `checkboxOnBlur`   | Emitted when a keyboard input event occurs when a checkbox option has lost focus.            | `CustomEvent<InputInteractionEvent & { focused: boolean; }>` |
-| `checkboxOnChange` | Emitted when a keyboard input or mouse event occurs when a checkbox option has been changed. | `CustomEvent<InputInteractionEvent & { checked: boolean; }>` |
-| `checkboxOnFocus`  | Emitted when a keyboard input event occurs when a checkbox option has gained focus.          | `CustomEvent<InputInteractionEvent & { focused: boolean; }>` |
+| Event                | Description                                                                                  | Type                                                         |
+| -------------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
+| `checkboxOnBlur`     | Emitted when a keyboard input event occurs when a checkbox option has lost focus.            | `CustomEvent<InputInteractionEvent & { focused: boolean; }>` |
+| `checkboxOnChange`   | Emitted when a keyboard input or mouse event occurs when a checkbox option has been changed. | `CustomEvent<InputInteractionEvent & { checked: boolean; }>` |
+| `checkboxOnFocus`    | Emitted when a keyboard input event occurs when a checkbox option has gained focus.          | `CustomEvent<InputInteractionEvent & { focused: boolean; }>` |
+| `inputErrorOccurred` | Emitted when an error message is reported to the component.                                  | `CustomEvent<{ errorMessage: string; }>`                     |
 
 ## Dependencies
 
@@ -229,6 +231,7 @@ expander for checkbox option 2", "content": "Example hint expander content for c
 
 - [ontario-hint-text](../ontario-hint-text)
 - [ontario-hint-expander](../ontario-hint-expander)
+- [ontario-icon-alert-error](../ontario-icon)
 
 ### Graph
 
@@ -236,6 +239,7 @@ expander for checkbox option 2", "content": "Example hint expander content for c
 graph TD;
   ontario-checkboxes --> ontario-hint-text
   ontario-checkboxes --> ontario-hint-expander
+  ontario-checkboxes --> ontario-icon-alert-error
   ontario-hint-expander --> ontario-icon-chevron-up
   ontario-hint-expander --> ontario-icon-chevron-down
   style ontario-checkboxes fill:#f9f,stroke:#333,stroke-width:4px

package/src/components/ontario-checkbox/test/ontario-checkboxes.spec.tsx

@@ -17,6 +17,10 @@ describe('ontario-checkbox', () => {
                   (optional)
                 </span>
               </legend>
+              <div class="ontario-error-messaging ontario-error__hidden" role="alert">
+								<ontario-icon-alert-error></ontario-icon-alert-error>
+								<div class="ontario-error-messaging__content"></div>
+							</div>
               <div class="ontario-checkboxes"></div>
             </fieldset>
           </div>

package/src/components/ontario-dropdown-list/ontario-dropdown-list.scss

@@ -2,6 +2,9 @@
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';
 @use '../../styles/form.scss';
+@forward '../../utils/components/error-message/error-message';
+
+$ontario-dropdown-border-width: 0.125rem;
 
 .ontario-dropdown {
 	background-color: colours.$ontario-colour-white;
@@ -24,3 +27,9 @@
 .ontario-dropdown option {
 	font-weight: normal;
 }
+
+.ontario-dropdown--error {
+	select {
+		border: $ontario-dropdown-border-width solid colours.$ontario-colour-alert;
+	}
+}

package/src/components/ontario-dropdown-list/ontario-dropdown-list.tsx

@@ -33,6 +33,7 @@ import { InputFocusBlurEvent, EventType, InputInteractionEvent } from '../../uti
 import { handleInputEvent } from '../../utils/events/event-handler';
 
 import { default as translations } from '../../translations/global.i18n.json';
+import { ErrorMessage } from '../../utils/components/error-message/error-message';
 
 @Component({
 	tag: 'ontario-dropdown-list',
@@ -178,6 +179,11 @@ export class OntarioDropdownList implements Dropdown {
 	 */
 	@Prop() hintExpander?: HintExpander | string;
 
+	/**
+	 * Set this to display an error message
+	 */
+	@Prop({ mutable: true }) errorMessage?: string;
+
 	/**
 	 * Used to add a custom function to the dropdown onChange event.
 	 */
@@ -235,6 +241,11 @@ export class OntarioDropdownList implements Dropdown {
 	 */
 	@Event() dropdownOnFocus: EventEmitter<InputFocusBlurEvent>;
 
+	/**
+	 * Emitted when an error message is reported to the component.
+	 */
+	@Event() inputErrorOccurred: EventEmitter<{ errorMessage: string }>;
+
 	/**
 	 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.
 	 */
@@ -362,6 +373,12 @@ export class OntarioDropdownList implements Dropdown {
 		}
 	}
 
+	@Watch('errorMessage')
+	broadcastInputErrorOccurredEvent() {
+		// Emit event to notify anyone who wants to listen for errors occurring
+		this.inputErrorOccurred.emit({ errorMessage: this.errorMessage ?? '' });
+	}
+
 	/**
 	 * Function to handle dropdown list events and the information pertaining to the dropdown list to emit.
 	 */
@@ -454,8 +471,9 @@ export class OntarioDropdownList implements Dropdown {
 	}
 
 	render() {
+		const error = !!this.errorMessage;
 		return (
-			<div class="ontario-form-group">
+			<div class={`ontario-form-group ${error ? 'ontario-dropdown--error' : ''}`}>
 				{this.captionState.getCaption(this.getId(), !!this.internalHintExpander)}
 				{this.internalHintText && (
 					<ontario-hint-text
@@ -464,6 +482,7 @@ export class OntarioDropdownList implements Dropdown {
 						ref={(el) => (this.hintTextRef = el)}
 					></ontario-hint-text>
 				)}
+				<ErrorMessage message={this.errorMessage} error={error} />
 				<select
 					class={this.getClass()}
 					aria-describedby={this.hintTextId}

package/src/components/ontario-dropdown-list/readme.md

@@ -293,6 +293,7 @@ options='[ { "value": "netflix", "label": "Netflix" }, { "value": "disney-plus",
 | `customOnChange`     | --                      | Used to add a custom function to the dropdown onChange event.                                                                                                                                                                                                                                                       | `((event: Event) => void) \| undefined` | `undefined` |
 | `customOnFocus`      | --                      | Used to add a custom function to the dropdown onFocus event.                                                                                                                                                                                                                                                        | `((event: Event) => void) \| undefined` | `undefined` |
 | `elementId`          | `element-id`            | The ID for the dropdown list. If no ID is provided, one will be generated.                                                                                                                                                                                                                                          | `string \| undefined`                   | `undefined` |
+| `errorMessage`       | `error-message`         | Set this to display an error message                                                                                                                                                                                                                                                                                | `string \| undefined`                   | `undefined` |
 | `hintExpander`       | `hint-expander`         | Used to include the ontario-hint-expander component for the dropdown list component. This is passed in as an object with key-value pairs. This is optional.                                                                                                                                                         | `HintExpander \| string \| undefined`   | `undefined` |
 | `hintText`           | `hint-text`             | Used to include the ontario-hint-text component for the dropdown list. This is optional.                                                                                                                                                                                                                            | `Hint \| string \| undefined`           | `undefined` |
 | `isEmptyStartOption` | `is-empty-start-option` | This prop is used to determine whether or not the initial option displayed is empty. If set to `true`, it will render the default “select” text. If set to a string, it will render the string value.                                                                                                               | `boolean \| string \| undefined`        | `false`     |
@@ -303,11 +304,12 @@ options='[ { "value": "netflix", "label": "Netflix" }, { "value": "disney-plus",
 
 ## Events
 
-| Event              | Description                                                                                | Type                                                                      |
-| ------------------ | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- |
-| `dropdownOnBlur`   | Emitted when a keyboard input event occurs when a dropdown list has lost focus.            | `CustomEvent<InputInteractionEvent & { focused: boolean; }>`              |
-| `dropdownOnChange` | Emitted when a keyboard input or mouse event occurs when a dropdown list has been changed. | `CustomEvent<{ id?: string \| undefined; value?: string \| undefined; }>` |
-| `dropdownOnFocus`  | Emitted when a keyboard input event occurs when a dropdown list has gained focus.          | `CustomEvent<InputInteractionEvent & { focused: boolean; }>`              |
+| Event                | Description                                                                                | Type                                                                      |
+| -------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- |
+| `dropdownOnBlur`     | Emitted when a keyboard input event occurs when a dropdown list has lost focus.            | `CustomEvent<InputInteractionEvent & { focused: boolean; }>`              |
+| `dropdownOnChange`   | Emitted when a keyboard input or mouse event occurs when a dropdown list has been changed. | `CustomEvent<{ id?: string \| undefined; value?: string \| undefined; }>` |
+| `dropdownOnFocus`    | Emitted when a keyboard input event occurs when a dropdown list has gained focus.          | `CustomEvent<InputInteractionEvent & { focused: boolean; }>`              |
+| `inputErrorOccurred` | Emitted when an error message is reported to the component.                                | `CustomEvent<{ errorMessage: string; }>`                                  |
 
 ## Dependencies
 
@@ -315,6 +317,7 @@ options='[ { "value": "netflix", "label": "Netflix" }, { "value": "disney-plus",
 
 - [ontario-hint-text](../ontario-hint-text)
 - [ontario-hint-expander](../ontario-hint-expander)
+- [ontario-icon-alert-error](../ontario-icon)
 
 ### Graph
 
@@ -322,6 +325,7 @@ options='[ { "value": "netflix", "label": "Netflix" }, { "value": "disney-plus",
 graph TD;
   ontario-dropdown-list --> ontario-hint-text
   ontario-dropdown-list --> ontario-hint-expander
+  ontario-dropdown-list --> ontario-icon-alert-error
   ontario-hint-expander --> ontario-icon-chevron-up
   ontario-hint-expander --> ontario-icon-chevron-down
   style ontario-dropdown-list fill:#f9f,stroke:#333,stroke-width:4px

package/src/components/ontario-dropdown-list/test/ontario-dropdown-list.spec.tsx

@@ -17,6 +17,10 @@ describe('ontario-dropdown-list', () => {
 							(optional)
 							</span>
 						</label>
+						<div class="ontario-error-messaging ontario-error__hidden" role="alert">
+								<ontario-icon-alert-error></ontario-icon-alert-error>
+								<div class="ontario-error-messaging__content"></div>
+							</div>
 						<select class="ontario-dropdown ontario-input" id="dropdown-list" style="background-image: url(/assets/ontario-material-dropdown-arrow-48px.svg);">
 							<option value="dropdown-option-1">Option 1</option>
 						</select>

package/src/components/ontario-footer/components/expanded-footer-wrapper.tsx

@@ -1,4 +1,4 @@
-import { FunctionalComponent, h, getAssetPath } from '@stencil/core';
+import { FunctionalComponent, h } from '@stencil/core';
 import { SimpleFooter } from './simple-footer';
 import { SimpleFooterLinks } from '../ontario-footer-interface';
 

package/src/components/ontario-header/ontario-header.scss

@@ -26,6 +26,10 @@ $ontario-header-menu-button-icon--margin-right: 6px;
 
 $ontario-navigation-container-min-width: 290px;
 
+:host {
+	--header-search-reset: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE5IDYuNEwxNy42IDUgMTIgMTAuNiA2LjQgNSA1IDYuNGw1LjYgNS42TDUgMTcuNiA2LjQgMTlsNS42LTUuNiA1LjYgNS42IDEuNC0xLjQtNS42LTUuNkwxOSA2LjR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+);
+}
+
 .ontario-header__container {
 	position: relative;
 	z-index: calc(zIndex.$ontario-z-index-above-high + 1);
@@ -419,7 +423,7 @@ input[type='reset'].ontario-header__search-reset {
 	color: colours.$ontario-colour-black;
 	margin: spacing.$spacing-0;
 	padding: spacing.$spacing-2;
-	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE5IDYuNEwxNy42IDUgMTIgMTAuNiA2LjQgNSA1IDYuNGw1LjYgNS42TDUgMTcuNiA2LjQgMTlsNS42LTUuNiA1LjYgNS42IDEuNC0xLjQtNS42LTUuNkwxOSA2LjR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+);
+	background-image: var(--header-search-reset);
 	background-position: center center;
 	background-repeat: no-repeat;
 	background-color: transparent;

package/src/components/ontario-radio-buttons/ontario-radio-buttons.scss

@@ -13,10 +13,13 @@
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_form.component.scss';
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_text-inputs.component.scss';
+@forward '../../utils/components/error-message/error-message';
 
 $ontario-radios-size: 32px;
 $ontario-radios-size-mobile: 36px;
 $ontario-input-offset: math.div((globalVariables.$touch-target-size - $ontario-radios-size), 2);
+$ontario-input-border-width: 0.125rem;
 
 .ontario-radios__item {
 	position: relative;

package/src/components/ontario-radio-buttons/ontario-radio-buttons.tsx

@@ -23,6 +23,7 @@ import {
 import { handleInputEvent } from '../../utils/events/event-handler';
 
 import { default as translations } from '../../translations/global.i18n.json';
+import { ErrorMessage } from '../../utils/components/error-message/error-message';
 
 @Component({
 	tag: 'ontario-radio-buttons',
@@ -50,7 +51,6 @@ export class OntarioRadioButtons implements RadioButtons {
 	 * </ontario-radio-buttons>
 	 */
 	@Prop() caption: Caption | string;
-
 	/**
 	 * The language of the component.
 	 * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.
@@ -148,6 +148,11 @@ export class OntarioRadioButtons implements RadioButtons {
 	 */
 	@Prop() options: string | RadioOption[];
 
+	/**
+	 * Set this to display an error message
+	 */
+	@Prop({ mutable: true }) errorMessage?: string;
+
 	/**
 	 * Used to add a custom function to the radio input onChange event.
 	 */
@@ -203,6 +208,11 @@ export class OntarioRadioButtons implements RadioButtons {
 	 */
 	@Event({ eventName: 'radioOnFocus' }) radioOnFocus: EventEmitter<InputFocusBlurEvent>;
 
+	/**
+	 * Emitted when an error message is reported to the component.
+	 */
+	@Event() inputErrorOccurred: EventEmitter<{ errorMessage: string }>;
+
 	/**
 	 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.
 	 */
@@ -327,6 +337,12 @@ export class OntarioRadioButtons implements RadioButtons {
 		this.updateCaptionState(this.caption);
 	}
 
+	@Watch('errorMessage')
+	broadcastInputErrorOccurredEvent() {
+		// Emit event to notify anyone who wants to listen for errors occurring
+		this.inputErrorOccurred.emit({ errorMessage: this.errorMessage ?? '' });
+	}
+
 	/**
 	 * Function to handle radio buttons events and the information pertaining to the radio buttons to emit.
 	 */
@@ -388,8 +404,9 @@ export class OntarioRadioButtons implements RadioButtons {
 	}
 
 	render() {
+		const error = !!this.errorMessage;
 		return (
-			<div class="ontario-form-group">
+			<div class={`ontario-form-group ${error ? 'ontario-input--error' : ''}`}>
 				<fieldset class="ontario-fieldset" aria-describedby={this.hintTextId}>
 					{this.captionState.getCaption(undefined, !!this.internalHintExpander)}
 					{this.internalHintText && (
@@ -399,7 +416,9 @@ export class OntarioRadioButtons implements RadioButtons {
 							ref={(el) => (this.hintTextRef = el)}
 						></ontario-hint-text>
 					)}
+
 					<div class="ontario-radios">
+						<ErrorMessage message={this.errorMessage} error={error} />
 						{this.internalOptions?.map((radioOption) => (
 							<div class="ontario-radios__item">
 								<Input

package/src/components/ontario-radio-buttons/readme.md

@@ -240,6 +240,7 @@ visible when the hint expander title (hint) is toggled" }'
 | `customOnBlur`   | --              | Used to add a custom function to the radio input onBlur event.                                                                                                                                                                                                                                                                                                                                                                                 | `((event: Event) => void) \| undefined` | `undefined` |
 | `customOnChange` | --              | Used to add a custom function to the radio input onChange event.                                                                                                                                                                                                                                                                                                                                                                               | `((event: Event) => void) \| undefined` | `undefined` |
 | `customOnFocus`  | --              | Used to add a custom function to the radio input onFocus event.                                                                                                                                                                                                                                                                                                                                                                                | `((event: Event) => void) \| undefined` | `undefined` |
+| `errorMessage`   | `error-message` | Set this to display an error message                                                                                                                                                                                                                                                                                                                                                                                                           | `string \| undefined`                   | `undefined` |
 | `hintExpander`   | `hint-expander` | Used to include the ontario-hint-expander component for the radio button group. This is passed in as an object with key-value pairs. This is optional.                                                                                                                                                                                                                                                                                         | `HintExpander \| string \| undefined`   | `undefined` |
 | `hintText`       | `hint-text`     | Used to include the ontario-hint-text component for radio button group. This is optional.                                                                                                                                                                                                                                                                                                                                                      | `Hint \| string \| undefined`           | `undefined` |
 | `language`       | `language`      | The language of the component. This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.                                                                                                                                                                                                                            | `"en" \| "fr" \| undefined`             | `undefined` |
@@ -249,11 +250,12 @@ visible when the hint expander title (hint) is toggled" }'
 
 ## Events
 
-| Event           | Description                                                                               | Type                                                         |
-| --------------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
-| `radioOnBlur`   | Emitted when a keyboard input event occurs when a radio option has lost focus.            | `CustomEvent<InputInteractionEvent & { focused: boolean; }>` |
-| `radioOnChange` | Emitted when a keyboard input or mouse event occurs when a radio option has been changed. | `CustomEvent<InputInteractionEvent & { checked: boolean; }>` |
-| `radioOnFocus`  | Emitted when a keyboard input event occurs when a radio option has gained focus.          | `CustomEvent<InputInteractionEvent & { focused: boolean; }>` |
+| Event                | Description                                                                               | Type                                                         |
+| -------------------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
+| `inputErrorOccurred` | Emitted when an error message is reported to the component.                               | `CustomEvent<{ errorMessage: string; }>`                     |
+| `radioOnBlur`        | Emitted when a keyboard input event occurs when a radio option has lost focus.            | `CustomEvent<InputInteractionEvent & { focused: boolean; }>` |
+| `radioOnChange`      | Emitted when a keyboard input or mouse event occurs when a radio option has been changed. | `CustomEvent<InputInteractionEvent & { checked: boolean; }>` |
+| `radioOnFocus`       | Emitted when a keyboard input event occurs when a radio option has gained focus.          | `CustomEvent<InputInteractionEvent & { focused: boolean; }>` |
 
 ## Dependencies
 
@@ -261,6 +263,7 @@ visible when the hint expander title (hint) is toggled" }'
 
 - [ontario-hint-text](../ontario-hint-text)
 - [ontario-hint-expander](../ontario-hint-expander)
+- [ontario-icon-alert-error](../ontario-icon)
 
 ### Graph
 
@@ -268,6 +271,7 @@ visible when the hint expander title (hint) is toggled" }'
 graph TD;
   ontario-radio-buttons --> ontario-hint-text
   ontario-radio-buttons --> ontario-hint-expander
+  ontario-radio-buttons --> ontario-icon-alert-error
   ontario-hint-expander --> ontario-icon-chevron-up
   ontario-hint-expander --> ontario-icon-chevron-down
   style ontario-radio-buttons fill:#f9f,stroke:#333,stroke-width:4px

package/src/components/ontario-radio-buttons/test/ontario-radio-button.spec.tsx

@@ -17,7 +17,12 @@ describe('ontario-radio-buttons', () => {
                     (optional)
                   </span>
                 </legend>
-              <div class="ontario-radios"></div>
+              <div class="ontario-radios">
+                <div class="ontario-error-messaging ontario-error__hidden" role="alert">
+                  <ontario-icon-alert-error></ontario-icon-alert-error>
+                  <div class="ontario-error-messaging__content"></div>
+                </div>
+              </div>
             </fieldset>
           </div>
         </mock:shadow-root>

package/src/components/ontario-textarea/ontario-textarea.scss

@@ -7,6 +7,9 @@
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';
 @use '../../styles/form.scss';
+@forward '../../utils/components/error-message/error-message';
+
+$ontario-textarea-border-width: 0.125rem;
 
 .ontario-textarea {
 	border: globalVariables.$border-size-standard solid colours.$ontario-colour-black;
@@ -34,3 +37,9 @@
 .ontario-textarea.ontario-textarea-hint-expander--true {
 	margin-bottom: spacing.$spacing-4;
 }
+
+.ontario-textarea--error {
+	textarea {
+		border: $ontario-textarea-border-width solid colours.$ontario-colour-alert;
+	}
+}

package/src/components/ontario-textarea/ontario-textarea.tsx

@@ -19,6 +19,7 @@ import {
 import { handleInputEvent } from '../../utils/events/event-handler';
 
 import { default as translations } from '../../translations/global.i18n.json';
+import { ErrorMessage } from '../../utils/components/error-message/error-message';
 
 @Component({
 	tag: 'ontario-textarea',
@@ -105,6 +106,11 @@ export class OntarioTextarea implements Input {
 	 */
 	@Prop({ mutable: true }) language?: Language;
 
+	/**
+	 * Set this to display an error message
+	 */
+	@Prop({ mutable: true }) errorMessage?: string;
+
 	/**
 	 * Used to add a custom function to the textarea onInput event.
 	 */
@@ -165,6 +171,11 @@ export class OntarioTextarea implements Input {
 	 */
 	@Event() inputOnFocus: EventEmitter<InputFocusBlurEvent>;
 
+	/**
+	 * Emitted when an error message is reported to the component.
+	 */
+	@Event() inputErrorOccurred: EventEmitter<{ inputId: string; errorMessage: string }>;
+
 	/**
 	 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the textarea component loads.
 	 */
@@ -253,6 +264,12 @@ export class OntarioTextarea implements Input {
 		this.updateCaptionState(this.caption);
 	}
 
+	@Watch('errorMessage')
+	broadcastInputErrorOccurredEvent() {
+		// Emit event to notify anyone who wants to listen for errors occurring
+		this.inputErrorOccurred.emit({ inputId: this.getId(), errorMessage: this.errorMessage ?? '' });
+	}
+
 	/**
 	 * Function to handle textarea events and the information pertaining to the textarea to emit.
 	 */
@@ -307,8 +324,9 @@ export class OntarioTextarea implements Input {
 	}
 
 	render() {
+		const error = !!this.errorMessage;
 		return (
-			<div class="ontario-form-group">
+			<div class={`ontario-form-group ${error ? 'ontario-textarea--error' : ''}`}>
 				{this.captionState.getCaption(this.getId(), !!this.internalHintExpander)}
 				{this.internalHintText && (
 					<ontario-hint-text
@@ -317,6 +335,7 @@ export class OntarioTextarea implements Input {
 						ref={(el) => (this.hintTextRef = el)}
 					></ontario-hint-text>
 				)}
+				<ErrorMessage message={this.errorMessage} error={error} />
 				<textarea
 					aria-describedby={this.hintTextId}
 					class={this.getClass()}

package/src/components/ontario-textarea/readme.md

@@ -98,6 +98,7 @@ hintExpander='{ "hint": "This is the hint expander title", "content": "This is t
 | `customOnFocus`  | --              | Used to add a custom function to the textarea onFocus event.                                                                                                                                                                                   | `((event: Event) => void) \| undefined` | `undefined` |
 | `customOnInput`  | --              | Used to add a custom function to the textarea onInput event.                                                                                                                                                                                   | `((event: Event) => void) \| undefined` | `undefined` |
 | `elementId`      | `element-id`    | The unique identifier of the textarea. This is optional - if no ID is passed, one will be generated.                                                                                                                                           | `string \| undefined`                   | `undefined` |
+| `errorMessage`   | `error-message` | Set this to display an error message                                                                                                                                                                                                           | `string \| undefined`                   | `undefined` |
 | `hintExpander`   | `hint-expander` | Used to include the ontario-hint-expander component for the textarea component. This is passed in as an object with key-value pairs. This is optional.                                                                                         | `HintExpander \| string \| undefined`   | `undefined` |
 | `hintText`       | `hint-text`     | Used to include the ontario-hint-text component for the textarea. This is optional.                                                                                                                                                            | `Hint \| string \| undefined`           | `undefined` |
 | `language`       | `language`      | The language of the component. This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.                            | `"en" \| "fr" \| undefined`             | `undefined` |
@@ -107,12 +108,13 @@ hintExpander='{ "hint": "This is the hint expander title", "content": "This is t
 
 ## Events
 
-| Event           | Description                                                                         | Type                                                                        |
-| --------------- | ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
-| `inputOnBlur`   | Emitted when a keyboard input event occurs when an input has lost focus.            | `CustomEvent<InputInteractionEvent & { focused: boolean; }>`                |
-| `inputOnChange` | Emitted when a keyboard input or mouse event occurs when an input has been changed. | `CustomEvent<{ id?: string \| undefined; value?: string \| undefined; }>`   |
-| `inputOnFocus`  | Emitted when a keyboard input event occurs when an input has gained focus.          | `CustomEvent<InputInteractionEvent & { focused: boolean; }>`                |
-| `inputOnInput`  | Emitted when a input event occurs when an input has been changed.                   | `CustomEvent<InputInteractionEvent & { inputType?: string \| undefined; }>` |
+| Event                | Description                                                                         | Type                                                                        |
+| -------------------- | ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| `inputErrorOccurred` | Emitted when an error message is reported to the component.                         | `CustomEvent<{ inputId: string; errorMessage: string; }>`                   |
+| `inputOnBlur`        | Emitted when a keyboard input event occurs when an input has lost focus.            | `CustomEvent<InputInteractionEvent & { focused: boolean; }>`                |
+| `inputOnChange`      | Emitted when a keyboard input or mouse event occurs when an input has been changed. | `CustomEvent<{ id?: string \| undefined; value?: string \| undefined; }>`   |
+| `inputOnFocus`       | Emitted when a keyboard input event occurs when an input has gained focus.          | `CustomEvent<InputInteractionEvent & { focused: boolean; }>`                |
+| `inputOnInput`       | Emitted when a input event occurs when an input has been changed.                   | `CustomEvent<InputInteractionEvent & { inputType?: string \| undefined; }>` |
 
 ## Dependencies
 
@@ -120,6 +122,7 @@ hintExpander='{ "hint": "This is the hint expander title", "content": "This is t
 
 - [ontario-hint-text](../ontario-hint-text)
 - [ontario-hint-expander](../ontario-hint-expander)
+- [ontario-icon-alert-error](../ontario-icon)
 
 ### Graph
 
@@ -127,6 +130,7 @@ hintExpander='{ "hint": "This is the hint expander title", "content": "This is t
 graph TD;
   ontario-textarea --> ontario-hint-text
   ontario-textarea --> ontario-hint-expander
+  ontario-textarea --> ontario-icon-alert-error
   ontario-hint-expander --> ontario-icon-chevron-up
   ontario-hint-expander --> ontario-icon-chevron-down
   style ontario-textarea fill:#f9f,stroke:#333,stroke-width:4px

package/src/components/ontario-textarea/test/__snapshots__/ontario-textarea.spec.tsx.snap

@@ -9,7 +9,11 @@ exports[`ontario-textarea snapshot should render the expected html 1`] = `
         <span class="ontario-label__flag">
           (optional)
         </span>
-      </label><textarea class="ontario-textarea" id="ontario-textarea" name="ontario-textarea" value=""></textarea>
+      </label>
+      <div class="ontario-error-messaging ontario-error__hidden" role="alert">
+        <ontario-icon-alert-error></ontario-icon-alert-error>
+        <div class="ontario-error-messaging__content"></div>
+      </div><textarea class="ontario-textarea" id="ontario-textarea" name="ontario-textarea" value=""></textarea>
     </div>
   </mock:shadow-root>
 </ontario-textarea>

package/src/components/ontario-textarea/test/ontario-textarea.spec.tsx

@@ -8,7 +8,6 @@ describe('ontario-textarea', () => {
 				components: [OntarioTextarea],
 				html: `<ontario-textarea name="ontario-textarea" element-id="ontario-textarea" caption='{"captionText": "Ontario Textarea"}'></ontario-textarea>`,
 			});
-
 			expect(page.root).toMatchSnapshot();
 		});
 	});
@@ -29,6 +28,10 @@ describe('ontario-textarea', () => {
 									(optional)
 								</span>
 							</label>
+							<div class="ontario-error-messaging ontario-error__hidden" role="alert">
+								<ontario-icon-alert-error></ontario-icon-alert-error>
+								<div class="ontario-error-messaging__content"></div>
+							</div>
 							<textarea class="ontario-textarea" id="ontario-textarea" name="ontario-textarea" value=""></textarea>
 						</div>
 					</mock:shadow-root>