diff --git a/__snapshots__/input/showcase/chromium-highContrast/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/chromium-highContrast/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png
index f296ba00484e..d0afd1b3eddc 100644
Binary files a/__snapshots__/input/showcase/chromium-highContrast/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/chromium-highContrast/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png differ
diff --git a/__snapshots__/input/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml b/__snapshots__/input/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml
index 121254f2cd17..4752418ca2f9 100644
--- a/__snapshots__/input/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml
+++ b/__snapshots__/input/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml
@@ -196,4 +196,17 @@
   - status
   - text: Label
   - button "Label"
+  - status
+  - link "Datalist / Typeahead Examples"
+  - text: Search Cities
+  - combobox "Search Cities"
+  - status
+  - text: Search Countries
+  - combobox "Search Countries"
+  - status
+  - text: Search Products
+  - combobox "Search Products"
+  - status
+  - text: Search Stations
+  - combobox "Search Stations"
   - status
\ No newline at end of file
diff --git a/__snapshots__/input/showcase/chromium/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/chromium/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png
index 487482eed14c..74a94fd7420b 100644
Binary files a/__snapshots__/input/showcase/chromium/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/chromium/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png differ
diff --git a/__snapshots__/input/showcase/chromium/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml b/__snapshots__/input/showcase/chromium/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml
index 121254f2cd17..4752418ca2f9 100644
--- a/__snapshots__/input/showcase/chromium/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml
+++ b/__snapshots__/input/showcase/chromium/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml
@@ -196,4 +196,17 @@
   - status
   - text: Label
   - button "Label"
+  - status
+  - link "Datalist / Typeahead Examples"
+  - text: Search Cities
+  - combobox "Search Cities"
+  - status
+  - text: Search Countries
+  - combobox "Search Countries"
+  - status
+  - text: Search Products
+  - combobox "Search Products"
+  - status
+  - text: Search Stations
+  - combobox "Search Stations"
   - status
\ No newline at end of file
diff --git a/__snapshots__/input/showcase/firefox/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/firefox/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png
index 09cd55d5c5b6..4514b8ebfc6f 100644
Binary files a/__snapshots__/input/showcase/firefox/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/firefox/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png differ
diff --git a/__snapshots__/input/showcase/firefox/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml b/__snapshots__/input/showcase/firefox/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml
index 121254f2cd17..4752418ca2f9 100644
--- a/__snapshots__/input/showcase/firefox/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml
+++ b/__snapshots__/input/showcase/firefox/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml
@@ -196,4 +196,17 @@
   - status
   - text: Label
   - button "Label"
+  - status
+  - link "Datalist / Typeahead Examples"
+  - text: Search Cities
+  - combobox "Search Cities"
+  - status
+  - text: Search Countries
+  - combobox "Search Countries"
+  - status
+  - text: Search Products
+  - combobox "Search Products"
+  - status
+  - text: Search Stations
+  - combobox "Search Stations"
   - status
\ No newline at end of file
diff --git a/__snapshots__/input/showcase/mobile-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/mobile-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png
index 8901a341b151..ff9ddf10ba2c 100644
Binary files a/__snapshots__/input/showcase/mobile-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/mobile-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png differ
diff --git a/__snapshots__/input/showcase/mobile-chrome/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml b/__snapshots__/input/showcase/mobile-chrome/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml
index 121254f2cd17..4752418ca2f9 100644
--- a/__snapshots__/input/showcase/mobile-chrome/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml
+++ b/__snapshots__/input/showcase/mobile-chrome/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml
@@ -196,4 +196,17 @@
   - status
   - text: Label
   - button "Label"
+  - status
+  - link "Datalist / Typeahead Examples"
+  - text: Search Cities
+  - combobox "Search Cities"
+  - status
+  - text: Search Countries
+  - combobox "Search Countries"
+  - status
+  - text: Search Products
+  - combobox "Search Products"
+  - status
+  - text: Search Stations
+  - combobox "Search Stations"
   - status
\ No newline at end of file
diff --git a/__snapshots__/input/showcase/mobile-safari/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/mobile-safari/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png
index e95e37530cbc..d61c90eb41f7 100644
Binary files a/__snapshots__/input/showcase/mobile-safari/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/mobile-safari/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png differ
diff --git a/__snapshots__/input/showcase/mobile-safari/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml b/__snapshots__/input/showcase/mobile-safari/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml
index 121254f2cd17..4752418ca2f9 100644
--- a/__snapshots__/input/showcase/mobile-safari/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml
+++ b/__snapshots__/input/showcase/mobile-safari/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml
@@ -196,4 +196,17 @@
   - status
   - text: Label
   - button "Label"
+  - status
+  - link "Datalist / Typeahead Examples"
+  - text: Search Cities
+  - combobox "Search Cities"
+  - status
+  - text: Search Countries
+  - combobox "Search Countries"
+  - status
+  - text: Search Products
+  - combobox "Search Products"
+  - status
+  - text: Search Stations
+  - combobox "Search Stations"
   - status
\ No newline at end of file
diff --git a/__snapshots__/input/showcase/webkit/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/webkit/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png
index a41db348cf0c..a0b486315474 100644
Binary files a/__snapshots__/input/showcase/webkit/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/webkit/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png differ
diff --git a/__snapshots__/input/showcase/webkit/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml b/__snapshots__/input/showcase/webkit/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml
index 121254f2cd17..4752418ca2f9 100644
--- a/__snapshots__/input/showcase/webkit/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml
+++ b/__snapshots__/input/showcase/webkit/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml
@@ -196,4 +196,17 @@
   - status
   - text: Label
   - button "Label"
+  - status
+  - link "Datalist / Typeahead Examples"
+  - text: Search Cities
+  - combobox "Search Cities"
+  - status
+  - text: Search Countries
+  - combobox "Search Countries"
+  - status
+  - text: Search Products
+  - combobox "Search Products"
+  - status
+  - text: Search Stations
+  - combobox "Search Stations"
   - status
\ No newline at end of file
diff --git a/packages/foundations/dev/icons.html b/packages/foundations/dev/icons.html
index 18611363cba1..2d50be809f12 100644
--- a/packages/foundations/dev/icons.html
+++ b/packages/foundations/dev/icons.html
@@ -16,355 +16,398 @@
 
 	<body>
 		<div class="icons-overview-container">
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="arrow_down"
-					>arrow_down</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>arrow_down</span
-				>
-			</div>
+		
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="arrow_down"
+>arrow_down</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>arrow_down</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="arrow_left"
-					>arrow_left</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>arrow_left</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="arrow_left"
+>arrow_left</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>arrow_left</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="arrow_right"
-					>arrow_right</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>arrow_right</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="arrow_right"
+>arrow_right</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>arrow_right</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="arrow_up"
-					>arrow_up</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>arrow_up</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="arrow_up"
+>arrow_up</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>arrow_up</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="arrow_up_right"
-					>arrow_up_right</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>arrow_up_right</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="arrow_up_right"
+>arrow_up_right</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>arrow_up_right</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="brand"
-					>brand</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>brand</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="brand"
+>brand</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>brand</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="calendar"
-					>calendar</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>calendar</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="calendar"
+>calendar</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>calendar</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="check-circle"
-					>check-circle</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>check-circle</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="check-circle"
+>check-circle</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>check-circle</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="check"
-					>check</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>check</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="check"
+>check</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>check</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="check_circle"
-					>check_circle</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>check_circle</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="check_circle"
+>check_circle</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>check_circle</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="chevron_down"
-					>chevron_down</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>chevron_down</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="chevron_down"
+>chevron_down</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>chevron_down</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="chevron_left"
-					>chevron_left</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>chevron_left</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="chevron_left"
+>chevron_left</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>chevron_left</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="chevron_right"
-					>chevron_right</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>chevron_right</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="chevron_right"
+>chevron_right</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>chevron_right</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="chevron_up"
-					>chevron_up</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>chevron_up</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="chevron_up"
+>chevron_up</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>chevron_up</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="circle"
-					>circle</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>circle</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="circle"
+>circle</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>circle</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="circular_arrows"
-					>circular_arrows</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>circular_arrows</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="circular_arrows"
+>circular_arrows</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>circular_arrows</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="clock"
-					>clock</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>clock</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="clock"
+>clock</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>clock</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="cross"
-					>cross</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>cross</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="cross"
+>cross</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>cross</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="cross_circle"
-					>cross_circle</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>cross_circle</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="cross_circle"
+>cross_circle</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>cross_circle</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="exclamation_mark_circle"
-					>exclamation_mark_circle</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>exclamation_mark_circle</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="exclamation_mark_circle"
+>exclamation_mark_circle</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>exclamation_mark_circle</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="exclamation_mark_triangle"
-					>exclamation_mark_triangle</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>exclamation_mark_triangle</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="exclamation_mark_triangle"
+>exclamation_mark_triangle</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>exclamation_mark_triangle</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="information_circle"
-					>information_circle</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>information_circle</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="information_circle"
+>information_circle</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>information_circle</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="magnifying_glass"
-					>magnifying_glass</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>magnifying_glass</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="magnifying_glass"
+>magnifying_glass</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>magnifying_glass</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="menu"
-					>menu</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>menu</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="menu"
+>menu</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>menu</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="minus"
-					>minus</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>minus</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="minus"
+>minus</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>minus</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="plus"
-					>plus</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>plus</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="plus"
+>plus</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>plus</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="resize_handle_corner"
-					>resize_handle_corner</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>resize_handle_corner</span
-				>
-			</div>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="resize_handle_corner"
+>resize_handle_corner</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>resize_handle_corner</span
+>
+</div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="x_placeholder"
-					>x_placeholder</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>x_placeholder</span
-				>
-			</div>
-		</div>
-	</body>
-</html>
+<div data-spacing="small" class="db-card">
+<span
+aria-hidden="true"
+class="db-icon"
+data-icon="x_placeholder"
+>x_placeholder</span
+><span
+class="db-infotext"
+data-icon="none"
+data-semantic="informational"
+>x_placeholder</span
+>
+</div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/showcases/shared/input.json b/showcases/shared/input.json
index ba21a7fce1c5..4e72e997f511 100644
--- a/showcases/shared/input.json
+++ b/showcases/shared/input.json
@@ -524,7 +524,6 @@
 			},
 			{
 				"name": "Datalist",
-				"experimental": true,
 				"props": {
 					"label": "Label",
 					"variant": "floating",
@@ -541,5 +540,49 @@
 				}
 			}
 		]
+	},
+	{
+		"name": "Datalist / Typeahead Examples",
+		"codeFileName": "DatalistExamples", 
+		"examples": [
+			{
+				"name": "Simple String List",
+				"props": {
+					"label": "Search Cities",
+					"placeholder": "Type to search...",
+					"dataList": true,
+					"variant": "floating"
+				}
+			},
+			{
+				"name": "Value-Label Pairs",
+				"props": {
+					"label": "Search Countries", 
+					"placeholder": "Type to search...",
+					"dataList": true,
+					"variant": "floating"
+				}
+			},
+			{
+				"name": "Regular Variant with Datalist",
+				"props": {
+					"label": "Search Products",
+					"placeholder": "Type to search...",
+					"dataList": true
+				}
+			},
+			{
+				"name": "With Search Icon",
+				"props": {
+					"label": "Search Stations",
+					"placeholder": "Type to search...",
+					"dataList": true,
+					"variant": "floating",
+					"type": "search",
+					"icon": "magnifying_glass",
+					"showIcon": true
+				}
+			}
+		]
 	}
 ]