diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 3f939bca..c06be76c 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1090,6 +1090,7 @@ None.
| placeholder | let
| No | string
| ""
| Specify the input placeholder text |
| pattern | let
| No | string
| "\\d{1,2}\\/\\d{1,2}\\/\\d{4}"
| Specify the Regular Expression for the input value |
| disabled | let
| No | boolean
| false
| Set to `true` to disable the input |
+| helperText | let
| No | string
| ""
| Specify the helper text |
| iconDescription | let
| No | string
| ""
| Specify the ARIA label for the calendar icon |
| id | let
| No | string
| "ccs-" + Math.random().toString(36)
| Set an id for the input element |
| labelText | let
| No | string
| ""
| Specify the label text |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 2d4834cb..e2bd1683 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -2734,6 +2734,17 @@
"constant": false,
"reactive": false
},
+ {
+ "name": "helperText",
+ "kind": "let",
+ "description": "Specify the helper text",
+ "type": "string",
+ "value": "\"\"",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "constant": false,
+ "reactive": false
+ },
{
"name": "iconDescription",
"kind": "let",
diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx
index 6ea1ea8c..a6cae4af 100644
--- a/docs/src/pages/components/DatePicker.svx
+++ b/docs/src/pages/components/DatePicker.svx
@@ -13,6 +13,12 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
+### With helper text
+
+
+
+
+
### Hidden label
diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte
index 92668423..71beefad 100644
--- a/src/DatePicker/DatePickerInput.svelte
+++ b/src/DatePicker/DatePickerInput.svelte
@@ -17,6 +17,9 @@
/** Set to `true` to disable the input */
export let disabled = false;
+ /** Specify the helper text */
+ export let helperText = "";
+
/** Specify the ARIA label for the calendar icon */
export let iconDescription = "";
@@ -50,7 +53,7 @@
/** Obtain a reference to the input HTML element */
export let ref = null;
- import { getContext, onMount } from "svelte";
+ import { getContext } from "svelte";
import Calendar16 from "carbon-icons-svelte/lib/Calendar16/Calendar16.svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
@@ -161,4 +164,12 @@
{#if !invalid && warn}
{warnText}
{/if}
+ {#if helperText}
+
+ {helperText}
+
+ {/if}
diff --git a/tests/DatePicker.test.svelte b/tests/DatePicker.test.svelte
index 79a7cb24..ec0d4473 100644
--- a/tests/DatePicker.test.svelte
+++ b/tests/DatePicker.test.svelte
@@ -7,7 +7,11 @@
console.log(e.detail);
}}"
>
-
+
diff --git a/types/DatePicker/DatePickerInput.d.ts b/types/DatePicker/DatePickerInput.d.ts
index 6f085a3a..0e9c4a48 100644
--- a/types/DatePicker/DatePickerInput.d.ts
+++ b/types/DatePicker/DatePickerInput.d.ts
@@ -32,6 +32,12 @@ export interface DatePickerInputProps
*/
disabled?: boolean;
+ /**
+ * Specify the helper text
+ * @default ""
+ */
+ helperText?: string;
+
/**
* Specify the ARIA label for the calendar icon
* @default ""