diff --git a/docs/pattern/survey-examples/nc-survey.html b/docs/pattern/survey-examples/nc-survey.html
new file mode 100644
index 0000000..8365315
--- /dev/null
+++ b/docs/pattern/survey-examples/nc-survey.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang=en data-bs-theme=dark>
+ <head>
+  <meta charset=utf-8>
+  <meta name=viewport content="width=device-width, initial-scale=1">
+  <title>Product Experience Survey</title>
+  <link rel=stylesheet type=text/css
+        href=https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css>
+ </head>
+ <body>
+  <h1 class=visually-hidden>Product Experience Survey</h1>
+  <main class=container>
+   <form class=py-5 action=/submit method=post>
+    <fieldset>
+     <legend>What challenges, if any, does our software help you overcome?</legend>
+     <ol>
+      <li>
+       <!-- FORM/CTRL -->
+<div class=mb-3>
+        <label class="form-label group-nc-challenges"
+               for=group-nc-challenges-pleasedescribe>Please describe</label>
+        <input class=form-control id=group-nc-challenges-pleasedescribe
+               type=text name=group-nc-challenges>
+       </div>
+     </ol>
+     <hr class=my-4>
+    </fieldset>
+    <fieldset>
+     <legend>How could we improve to better meet your needs?</legend>
+     <ol>
+      <li>
+       <!-- FORM/CHECKABLE -->
+<div class=form-check>
+        <label class="form-check-label group-nc-improve"
+               for=group-nc-improve-pleasedescribe>
+         <input class=form-check-input type=radio name=group-nc-improve
+                value=please-describe id=group-nc-improve-pleasedescribe> Please describe</label>
+       </div>
+     </ol>
+     <hr class=my-4>
+    </fieldset>
+    <button class="btn btn-primary" type=submit>Submit</button>
+   </form>
+  </main>
+  <script
+          src=https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js></script>
+ </body>
+</html>
\ No newline at end of file
diff --git a/docs/pattern/survey-examples/tcl-survey.html b/docs/pattern/survey-examples/tcl-survey.html
new file mode 100644
index 0000000..81a46af
--- /dev/null
+++ b/docs/pattern/survey-examples/tcl-survey.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang=en data-bs-theme=dark>
+ <head>
+  <meta charset=utf-8>
+  <meta name=viewport content="width=device-width, initial-scale=1">
+  <title>Product Experience Survey</title>
+  <link rel=stylesheet type=text/css
+        href=https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css>
+ </head>
+ <body>
+  <h1 class=visually-hidden>Product Experience Survey</h1>
+  <main class=container>
+   <form class=py-5 action=/submit method=post>
+    <fieldset>
+     <legend>How would you rate your comfort level with technology?</legend>
+     <ol>
+      <li>
+       <!-- FORM/CHECKABLE -->
+<div class=form-check>
+        <label class="form-check-label group-tcl-likeart"
+               for=group-tcl-likeart-1veryuncomfortable>
+         <input class=form-check-input type=radio name=group-tcl-likeart
+                value=1---very-uncomfortable
+                id=group-tcl-likeart-1veryuncomfortable> 1 - Very Uncomfortable</label>
+       </div>
+      <li>
+       <!-- FORM/CHECKABLE -->
+<div class=form-check>
+        <label class="form-check-label group-tcl-likeart"
+               for=group-tcl-likeart-2slightlyuncomfortable>
+         <input class=form-check-input type=radio name=group-tcl-likeart
+                value=2---slightly-uncomfortable
+                id=group-tcl-likeart-2slightlyuncomfortable> 2 - Slightly Uncomfortable</label>
+       </div>
+      <li>
+       <!-- FORM/CHECKABLE -->
+<div class=form-check>
+        <label class="form-check-label group-tcl-likeart"
+               for=group-tcl-likeart-3neutral>
+         <input class=form-check-input type=radio name=group-tcl-likeart
+                value=3---neutral id=group-tcl-likeart-3neutral> 3 - Neutral</label>
+       </div>
+      <li>
+       <!-- FORM/CHECKABLE -->
+<div class=form-check>
+        <label class="form-check-label group-tcl-likeart"
+               for=group-tcl-likeart-4quitecomfortable>
+         <input class=form-check-input type=radio name=group-tcl-likeart
+                value=4---quite-comfortable
+                id=group-tcl-likeart-4quitecomfortable> 4 - Quite Comfortable</label>
+       </div>
+      <li>
+       <!-- FORM/CHECKABLE -->
+<div class=form-check>
+        <label class="form-check-label group-tcl-likeart"
+               for=group-tcl-likeart-5verycomfortable>
+         <input class=form-check-input type=radio name=group-tcl-likeart
+                value=5---very-comfortable
+                id=group-tcl-likeart-5verycomfortable> 5 - Very Comfortable</label>
+       </div>
+     </ol>
+     <hr class=my-4>
+    </fieldset>
+    <fieldset>
+     <legend>How frequently do you adopt new technologies?</legend>
+     <ol>
+      <li>
+       <!-- FORM/CHECKABLE -->
+<div class=form-check>
+        <label class="form-check-label group-tcl-adopt"
+               for=group-tcl-adopt-alwaysimanearlyadopter>
+         <input class=form-check-input type=radio name=group-tcl-adopt
+                value=always---i&#39;m-an-early-adopter.
+                id=group-tcl-adopt-alwaysimanearlyadopter> Always - I&#39;m an early adopter.</label>
+       </div>
+      <li>
+       <!-- FORM/CHECKABLE -->
+<div class=form-check>
+        <label class="form-check-label group-tcl-adopt"
+               for=group-tcl-adopt-oftenistayontopoftechnologicaladvancesandadoptthemfrequently>
+         <input class=form-check-input type=radio name=group-tcl-adopt
+                value=often---i-stay-on-top-of-technological-advances-and-adopt-them-frequently.
+                id=group-tcl-adopt-oftenistayontopoftechnologicaladvancesandadoptthemfrequently> Often - I stay on top of 
+         technological advances and adopt them frequently.</label>
+       </div>
+      <li>
+       <!-- FORM/CHECKABLE -->
+<div class=form-check>
+        <label class="form-check-label group-tcl-adopt"
+               for=group-tcl-adopt-sometimesiadoptnewtechnologiesnowandthen>
+         <input class=form-check-input type=radio name=group-tcl-adopt
+                value=sometimes---i-adopt-new-technologies-now-and-then.
+                id=group-tcl-adopt-sometimesiadoptnewtechnologiesnowandthen> Sometimes - I adopt new technologies now and then.</label>
+       </div>
+      <li>
+       <!-- FORM/CHECKABLE -->
+<div class=form-check>
+        <label class="form-check-label group-tcl-adopt"
+               for=group-tcl-adopt-rarelyionlyadoptnewtechnologieswhenitsnecessaryforworkorotherimportanttasks>
+         <input class=form-check-input type=radio name=group-tcl-adopt
+                value=rarely---i-only-adopt-new-technologies-when-it&#39;s-necessary-for-work-or-other-important-tasks.
+                id=group-tcl-adopt-rarelyionlyadoptnewtechnologieswhenitsnecessaryforworkorotherimportanttasks> Rarely - I only 
+         adopt new technologies when it&#39;s necessary for work or other important tasks.</label>
+       </div>
+      <li>
+       <!-- FORM/CHECKABLE -->
+<div class=form-check>
+        <label class="form-check-label group-tcl-adopt"
+               for=group-tcl-adopt-neveriavoidadoptingnewtechnologiesunlessabsolutelyrequired>
+         <input class=form-check-input type=radio name=group-tcl-adopt
+                value=never---i-avoid-adopting-new-technologies-unless-absolutely-required.
+                id=group-tcl-adopt-neveriavoidadoptingnewtechnologiesunlessabsolutelyrequired> Never - I avoid adopting new 
+         technologies unless absolutely required.</label>
+       </div>
+     </ol>
+     <hr class=my-4>
+    </fieldset>
+    <button class="btn btn-primary" type=submit>Submit</button>
+   </form>
+  </main>
+  <script
+          src=https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js></script>
+ </body>
+</html>
\ No newline at end of file
