diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md
index 1ba34fc3731..2b79a0a369e 100644
--- a/packages/terra-core-docs/CHANGELOG.md
+++ b/packages/terra-core-docs/CHANGELOG.md
@@ -3,7 +3,8 @@
## Unreleased
* Added
- * Added aria-label to announce the visual label.
+ * Added a invalid example in `terra-search-Field`.
+ * Added aria-label to announce the visual label for `terra-form-select`.
## 1.52.0 - (November 21, 2023)
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/search-field/About.1.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/search-field/About.1.doc.mdx
index d3b951f4f6a..6a51cd3759a 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/search-field/About.1.doc.mdx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/search-field/About.1.doc.mdx
@@ -14,6 +14,7 @@ import SearchFieldDisableAutoSearch from './example/SearchFieldDisableAutoSearch
import SearchFieldFilterNumeric from './example/SearchFieldFilterNumeric?dev-site-example';
import SearchFieldFocus from './example/SearchFieldFocus?dev-site-example';
import SearchFieldProgrammaticSet from './example/SearchFieldProgrammaticSet?dev-site-example';
+import SearchFieldInvalid from './example/SearchFieldInvalid?dev-site-example';
import SearchFieldPropsTable from 'terra-search-field/lib/SearchField?dev-site-props-table';
@@ -73,6 +74,7 @@ import SearchField from 'terra-search-field';
+
## SearchField Props
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/search-field/example/SearchFieldInvalid.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/search-field/example/SearchFieldInvalid.jsx
new file mode 100644
index 00000000000..bddc70b7995
--- /dev/null
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/search-field/example/SearchFieldInvalid.jsx
@@ -0,0 +1,63 @@
+import React, { useState, useRef } from 'react';
+import SearchField from 'terra-search-field';
+import classNames from 'classnames/bind';
+import styles from './SearchFieldInvalid.module.scss';
+
+const cx = classNames.bind(styles);
+
+const SearchFieldInvalid = () => {
+ const [isInvalid, setInvalid] = useState(false);
+ const [message, setMessage] = useState('');
+ const [text, setText] = useState('');
+ const inputRef = useRef(null);
+
+ const handleInvalidSearch = (value) => {
+ setText(value);
+ setInvalid(true);
+ setMessage('INVALID Search Text: ');
+ if (inputRef.current) {
+ inputRef.current.classList.add(styles['error-border']); // Add red border on invalid search
+ }
+ };
+
+ const handleChange = (event, value) => {
+ setText(value);
+ setInvalid(false);
+ };
+
+ const handleInput = (event) => {
+ setText(event.target.value);
+ };
+
+ const handleSearch = (value) => {
+ setText(value);
+ setMessage('Search Text: ');
+ if (inputRef.current) {
+ inputRef.current.classList.remove(styles['error-border']); // Remove red border on valid search
+ }
+ };
+
+ return (
+
+
Minimum Search Length is 3
+
{ inputRef.current = ref; }}
+ searchDelay={500}
+ />
+
+ {message}
+ {text}
+
+
+ );
+};
+
+export default SearchFieldInvalid;
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/search-field/example/SearchFieldInvalid.module.scss b/packages/terra-core-docs/src/terra-dev-site/doc/search-field/example/SearchFieldInvalid.module.scss
new file mode 100644
index 00000000000..f1678787ba8
--- /dev/null
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/search-field/example/SearchFieldInvalid.module.scss
@@ -0,0 +1,15 @@
+:local {
+ .error-text {
+ color: var(--terra-core-docs-error-text-color, #e50000);
+ font-size: var(--terra-core-docs-error-text-font-size, 0.857rem);
+ font-weight: var(--terra-core-docs-error-text-font-weight, normal);
+ line-height: 1.25;
+ margin-top: var(--terra-core-docs-error-text-margin-top, 0.357em);
+ outline: 0;
+ text-align: left;
+ }
+
+ .error-border {
+ outline: var(--terra-core-docs-error-border-outline, 2px solid #e50000);
+ }
+}