diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html
index ba1948c4c..102ef2cfe 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html
@@ -246,4 +246,38 @@ <h2 class="go-heading-6 go-heading--underlined">Code</h2>
       </div>
     </ng-container>
   </go-card>
+  <go-card id="form-select-placeholder" class="go-column go-column--100">
+    <ng-container go-card-header>
+      <h1 class="go-heading-5">Component Placeholder</h1>
+    </ng-container>
+    <ng-container go-card-content>
+      <p class="go-body-copy">
+        Sometimes we may want to be able to add a placeholder for the select box. We can achieve this through the
+        <code class="code-block--inline">@Input() placeholder: string;</code> binding. Setting
+        <code class="code-block--inline">placeholder</code> to a string will display that string by default in the
+        select box. When you select an option in the select box, it will replace the placeholder with the selected item.
+      </p>
+      <div class="go-container">
+        <div class="go-column go-column--50">
+          <h2 class="go-heading-6 go-heading--underlined">View</h2>
+          <go-select
+            bindLabel="name"
+            bindValue="value"
+            [control]="select8"
+            [items]="items"
+            [multiple]="true"
+            placeholder="Select a Candy"
+            label="Favorite Candy"
+          ></go-select>
+        </div>
+        <div class="go-column go-column--50">
+          <h2 class="go-heading-6 go-heading--underlined">Code</h2>
+          <code
+            [highlight]="select8Code"
+            class="code-block--no-bottom-margin"
+          ></code>
+        </div>
+      </div>
+    </ng-container>
+  </go-card>
 </section>
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts
index 4296af931..1b11fa96d 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts
@@ -16,6 +16,7 @@ export class SelectDocsComponent implements OnInit {
   select5: FormControl = new FormControl('');
   select6: FormControl = new FormControl('');
   select7: FormControl = new FormControl('');
+  select8: FormControl = new FormControl('');
 
   hints: Array<string> = ['please select you favorite candy'];
 
@@ -105,6 +106,18 @@ export class SelectDocsComponent implements OnInit {
   ></go-select>
   `;
 
+  select8Code: string = `
+  <go-select
+    bindLabel="name"
+    bindValue="value"
+    [control]="select"
+    [items]="items"
+    [multiple]="true"
+    placeholder="Select a Candy"
+    label="Favorite Candy"
+  ></go-select>
+  `;
+
   ngOnInit(): void {
     setTimeout((): void => {
       this.select5.setErrors([