diff --git a/projects/composition/src/app/pages/switch-page/switch-page.component.html b/projects/composition/src/app/pages/switch-page/switch-page.component.html
index 312d4c072..6d34853e4 100644
--- a/projects/composition/src/app/pages/switch-page/switch-page.component.html
+++ b/projects/composition/src/app/pages/switch-page/switch-page.component.html
@@ -1,26 +1,52 @@
 <app-component-docs-viewer [componentData]="componentData">
   <!-- Example of component's usage -->
-  <div class="switches-group">
+  <app-code-example
+    label="Switch with tooltip"
+    [htmlCode]="examples.tooltipSwitch.html">
     <cps-switch
       label="Switch with tooltip"
       [value]="false"
       infoTooltip="Provide any information here">
     </cps-switch>
+  </app-code-example>
+
+  <app-code-example label="Basic switch" [htmlCode]="examples.basicSwitch.html">
     <cps-switch label="Basic switch" [value]="true"></cps-switch>
+  </app-code-example>
+
+  <app-code-example
+    label="Unlabeled switch"
+    [htmlCode]="examples.unlabeledSwitch.html">
     <cps-switch ariaLabel="Unlabeled switch" [value]="true"></cps-switch>
+  </app-code-example>
+
+  <app-code-example
+    label="Disabled switch checked"
+    [htmlCode]="examples.disabledCheckedSwitch.html">
     <cps-switch
       label="Disabled switch checked"
       [disabled]="true"
       [value]="true"></cps-switch>
+  </app-code-example>
+
+  <app-code-example
+    label="Disabled switch unchecked"
+    [htmlCode]="examples.disabledUncheckedSwitch.html">
     <cps-switch
       label="Disabled switch unchecked"
       [disabled]="true"
       [value]="false"></cps-switch>
+  </app-code-example>
+
+  <app-code-example
+    label="Two-way binding"
+    [htmlCode]="examples.twoWayBindingSwitch.html"
+    [tsCode]="examples.twoWayBindingSwitch.ts">
     <div class="sync-val-example">
       <cps-switch
         label="Switch with two-way binding"
         [(ngModel)]="syncVal"></cps-switch>
       <div class="sync-val">Is checked: {{ syncVal }}</div>
     </div>
-  </div>
+  </app-code-example>
 </app-component-docs-viewer>
diff --git a/projects/composition/src/app/pages/switch-page/switch-page.component.scss b/projects/composition/src/app/pages/switch-page/switch-page.component.scss
index 7aaff7fa2..d32514303 100644
--- a/projects/composition/src/app/pages/switch-page/switch-page.component.scss
+++ b/projects/composition/src/app/pages/switch-page/switch-page.component.scss
@@ -1,10 +1,3 @@
-.switches-group {
-  gap: 2rem;
-  display: flex;
-  flex-direction: column;
-  margin-left: 0.5rem;
-}
-
 .sync-val-example {
   .sync-val {
     margin-top: 1rem;
diff --git a/projects/composition/src/app/pages/switch-page/switch-page.component.ts b/projects/composition/src/app/pages/switch-page/switch-page.component.ts
index cd5d094f3..73c39ce7d 100644
--- a/projects/composition/src/app/pages/switch-page/switch-page.component.ts
+++ b/projects/composition/src/app/pages/switch-page/switch-page.component.ts
@@ -1,16 +1,18 @@
 import { Component } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CpsSwitchComponent } from 'cps-ui-kit';
-
 import ComponentData from '../../api-data/cps-switch.json';
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
+import { CodeExampleComponent } from '../../components/code-example/code-example.component';
+import { switchExamples } from './switch-page.examples';
 
 @Component({
   imports: [
     CpsSwitchComponent,
     ReactiveFormsModule,
     FormsModule,
-    ComponentDocsViewerComponent
+    ComponentDocsViewerComponent,
+    CodeExampleComponent
   ],
   selector: 'app-switch-page',
   templateUrl: './switch-page.component.html',
@@ -20,4 +22,5 @@ import { ComponentDocsViewerComponent } from '../../components/component-docs-vi
 export class SwitchPageComponent {
   syncVal = true;
   componentData = ComponentData;
+  readonly examples = switchExamples;
 }
diff --git a/projects/composition/src/app/pages/switch-page/switch-page.examples.ts b/projects/composition/src/app/pages/switch-page/switch-page.examples.ts
new file mode 100644
index 000000000..bd84651d0
--- /dev/null
+++ b/projects/composition/src/app/pages/switch-page/switch-page.examples.ts
@@ -0,0 +1,48 @@
+export const switchExamples: Record<string, { html: string; ts?: string }> = {
+  tooltipSwitch: {
+    html: `
+<cps-switch
+  label="Switch with tooltip"
+  [value]="false"
+  infoTooltip="Provide any information here">
+</cps-switch>`
+  },
+
+  basicSwitch: {
+    html: `
+<cps-switch label="Basic switch" [value]="true"></cps-switch>`
+  },
+
+  unlabeledSwitch: {
+    html: `
+<cps-switch ariaLabel="Unlabeled switch" [value]="true"></cps-switch>`
+  },
+
+  disabledCheckedSwitch: {
+    html: `
+<cps-switch
+  label="Disabled switch checked"
+  [disabled]="true"
+  [value]="true"></cps-switch>`
+  },
+
+  disabledUncheckedSwitch: {
+    html: `
+<cps-switch
+  label="Disabled switch unchecked"
+  [disabled]="true"
+  [value]="false"></cps-switch>`
+  },
+
+  twoWayBindingSwitch: {
+    html: `
+<div class="sync-val-example">
+  <cps-switch
+    label="Switch with two-way binding"
+    [(ngModel)]="syncVal"></cps-switch>
+  <div class="sync-val">Is checked: {{ syncVal }}</div>
+</div>`,
+    ts: `
+syncVal = true;`
+  }
+};
diff --git a/projects/composition/src/app/pages/tag-page/tag-page.component.html b/projects/composition/src/app/pages/tag-page/tag-page.component.html
index 4291ad7fd..87715a400 100644
--- a/projects/composition/src/app/pages/tag-page/tag-page.component.html
+++ b/projects/composition/src/app/pages/tag-page/tag-page.component.html
@@ -1,8 +1,17 @@
 <app-component-docs-viewer [componentData]="componentData">
   <!-- Example of component's usage -->
-  <div class="tags-group">
+  <app-code-example label="Regular tag" [htmlCode]="examples.regularTag.html">
     <cps-tag color="warn" label="Regular tag"></cps-tag>
+  </app-code-example>
+
+  <app-code-example label="Disabled tag" [htmlCode]="examples.disabledTag.html">
     <cps-tag [disabled]="true" color="red" label="Disabled tag"></cps-tag>
+  </app-code-example>
+
+  <app-code-example
+    label="Selectable tag"
+    [htmlCode]="examples.selectableTag.html"
+    [tsCode]="examples.selectableTag.ts">
     <div class="sync-val-example">
       <cps-tag
         [selectable]="true"
@@ -12,5 +21,5 @@
 
       <div class="sync-val">Is selected: {{ syncVal }}</div>
     </div>
-  </div>
+  </app-code-example>
 </app-component-docs-viewer>
diff --git a/projects/composition/src/app/pages/tag-page/tag-page.component.scss b/projects/composition/src/app/pages/tag-page/tag-page.component.scss
index b6b8c82ed..d32514303 100644
--- a/projects/composition/src/app/pages/tag-page/tag-page.component.scss
+++ b/projects/composition/src/app/pages/tag-page/tag-page.component.scss
@@ -1,10 +1,3 @@
-.tags-group {
-  margin-left: 0.5rem;
-  gap: 2rem;
-  display: flex;
-  flex-direction: column;
-}
-
 .sync-val-example {
   .sync-val {
     margin-top: 1rem;
diff --git a/projects/composition/src/app/pages/tag-page/tag-page.component.ts b/projects/composition/src/app/pages/tag-page/tag-page.component.ts
index 6e1defdf5..a0101b25a 100644
--- a/projects/composition/src/app/pages/tag-page/tag-page.component.ts
+++ b/projects/composition/src/app/pages/tag-page/tag-page.component.ts
@@ -1,16 +1,18 @@
 import { Component } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CpsTagComponent } from 'cps-ui-kit';
-
 import ComponentData from '../../api-data/cps-tag.json';
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
+import { CodeExampleComponent } from '../../components/code-example/code-example.component';
+import { tagExamples } from './tag-page.examples';
 
 @Component({
   imports: [
     CpsTagComponent,
     ReactiveFormsModule,
     FormsModule,
-    ComponentDocsViewerComponent
+    ComponentDocsViewerComponent,
+    CodeExampleComponent
   ],
   selector: 'app-tag-page',
   templateUrl: './tag-page.component.html',
@@ -20,4 +22,5 @@ import { ComponentDocsViewerComponent } from '../../components/component-docs-vi
 export class TagPageComponent {
   syncVal = true;
   componentData = ComponentData;
+  readonly examples = tagExamples;
 }
diff --git a/projects/composition/src/app/pages/tag-page/tag-page.examples.ts b/projects/composition/src/app/pages/tag-page/tag-page.examples.ts
new file mode 100644
index 000000000..8892d3fbb
--- /dev/null
+++ b/projects/composition/src/app/pages/tag-page/tag-page.examples.ts
@@ -0,0 +1,25 @@
+export const tagExamples: Record<string, { html: string; ts?: string }> = {
+  regularTag: {
+    html: `
+<cps-tag color="warn" label="Regular tag"></cps-tag>`
+  },
+
+  disabledTag: {
+    html: `
+<cps-tag [disabled]="true" color="red" label="Disabled tag"></cps-tag>`
+  },
+
+  selectableTag: {
+    html: `
+<div class="sync-val-example">
+  <cps-tag
+    [selectable]="true"
+    color="info"
+    [(ngModel)]="syncVal"
+    label="Selectable tag"></cps-tag>
+  <div class="sync-val">Is selected: {{ syncVal }}</div>
+</div>`,
+    ts: `
+syncVal = true;`
+  }
+};
diff --git a/projects/composition/src/app/pages/textarea-page/textarea-page.component.html b/projects/composition/src/app/pages/textarea-page/textarea-page.component.html
index a4bb5e81c..4db4cdd4b 100644
--- a/projects/composition/src/app/pages/textarea-page/textarea-page.component.html
+++ b/projects/composition/src/app/pages/textarea-page/textarea-page.component.html
@@ -1,7 +1,10 @@
 <app-component-docs-viewer [componentData]="componentData">
   <!-- Example of component's usage -->
-  <form [formGroup]="form">
-    <div class="textarea-group">
+  <app-code-example
+    label="Required textarea with a tooltip"
+    [htmlCode]="examples.requiredTextarea.html"
+    [tsCode]="examples.requiredTextarea.ts">
+    <form [formGroup]="form">
       <cps-textarea
         label="Required textarea with a tooltip"
         placeholder="Please enter any text"
@@ -10,36 +13,52 @@
         [clearable]="true"
         formControlName="requiredTextarea">
       </cps-textarea>
+    </form>
+  </app-code-example>
 
-      <cps-textarea label="Disabled textarea" [disabled]="true"></cps-textarea>
+  <app-code-example
+    label="Disabled textarea"
+    [htmlCode]="examples.disabledTextarea.html">
+    <cps-textarea label="Disabled textarea" [disabled]="true"></cps-textarea>
+  </app-code-example>
 
-      <cps-textarea
-        label="Readonly textarea"
-        hint="This textarea is readonly"
-        value="Value to show"
-        [readonly]="true">
-      </cps-textarea>
+  <app-code-example
+    label="Readonly textarea"
+    [htmlCode]="examples.readonlyTextarea.html">
+    <cps-textarea
+      label="Readonly textarea"
+      hint="This textarea is readonly"
+      value="Value to show"
+      [readonly]="true">
+    </cps-textarea>
+  </app-code-example>
+
+  <app-code-example
+    label="Clearable textarea with persistent clear icon"
+    [htmlCode]="examples.clearableTextarea.html">
+    <cps-textarea
+      label="Clearable textarea with persistent clear icon"
+      hint="This textarea is clearable"
+      value="Clear me"
+      [clearable]="true"
+      [persistentClear]="true">
+    </cps-textarea>
+  </app-code-example>
 
+  <app-code-example
+    label="Two-way binding"
+    [htmlCode]="examples.twoWayBindingTextarea.html"
+    [tsCode]="examples.twoWayBindingTextarea.ts">
+    <div class="sync-val-example">
       <cps-textarea
-        label="Clearable textarea with persistent clear icon"
-        hint="This textarea is clearable"
-        value="Clear me"
-        [clearable]="true"
-        [persistentClear]="true">
+        width="25rem"
+        label="Textarea with two-way binding, type something in"
+        [(ngModel)]="syncVal"
+        resizable="none"
+        hint="This textarea has a fixed width of 25rem and is not resizable"
+        [ngModelOptions]="{ standalone: true }">
       </cps-textarea>
-
-      <div class="sync-val-example">
-        <cps-textarea
-          width="25rem"
-          label="Textarea with two-way binding, type something in"
-          [(ngModel)]="syncVal"
-          resizable="none"
-          hint="This textarea has a fixed width of 25rem and is not resizable"
-          [ngModelOptions]="{ standalone: true }">
-          >
-        </cps-textarea>
-        <span class="sync-val">{{ syncVal }}</span>
-      </div>
+      <span class="sync-val">{{ syncVal }}</span>
     </div>
-  </form>
+  </app-code-example>
 </app-component-docs-viewer>
diff --git a/projects/composition/src/app/pages/textarea-page/textarea-page.component.scss b/projects/composition/src/app/pages/textarea-page/textarea-page.component.scss
index 76e52c7cb..fe6f52680 100644
--- a/projects/composition/src/app/pages/textarea-page/textarea-page.component.scss
+++ b/projects/composition/src/app/pages/textarea-page/textarea-page.component.scss
@@ -1,9 +1,3 @@
-.textarea-group {
-  gap: 1.5rem;
-  display: flex;
-  flex-direction: column;
-}
-
 .sync-val-example {
   display: flex;
   align-items: center;
diff --git a/projects/composition/src/app/pages/textarea-page/textarea-page.component.ts b/projects/composition/src/app/pages/textarea-page/textarea-page.component.ts
index 820e6a62c..74a655801 100644
--- a/projects/composition/src/app/pages/textarea-page/textarea-page.component.ts
+++ b/projects/composition/src/app/pages/textarea-page/textarea-page.component.ts
@@ -7,9 +7,10 @@ import {
   Validators
 } from '@angular/forms';
 import { CpsTextareaComponent } from 'cps-ui-kit';
-
 import ComponentData from '../../api-data/cps-textarea.json';
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
+import { CodeExampleComponent } from '../../components/code-example/code-example.component';
+import { textareaExamples } from './textarea-page.examples';
 
 @Component({
   selector: 'app-textarea-page',
@@ -17,7 +18,8 @@ import { ComponentDocsViewerComponent } from '../../components/component-docs-vi
     CpsTextareaComponent,
     ReactiveFormsModule,
     FormsModule,
-    ComponentDocsViewerComponent
+    ComponentDocsViewerComponent,
+    CodeExampleComponent
   ],
   templateUrl: './textarea-page.component.html',
   styleUrls: ['./textarea-page.component.scss'],
@@ -27,6 +29,7 @@ export class TextareaPageComponent implements OnInit {
   form!: UntypedFormGroup;
   syncVal = '';
   componentData = ComponentData;
+  readonly examples = textareaExamples;
 
   // eslint-disable-next-line no-useless-constructor
   constructor(private _formBuilder: UntypedFormBuilder) {}
diff --git a/projects/composition/src/app/pages/textarea-page/textarea-page.examples.ts b/projects/composition/src/app/pages/textarea-page/textarea-page.examples.ts
new file mode 100644
index 000000000..62e4247ca
--- /dev/null
+++ b/projects/composition/src/app/pages/textarea-page/textarea-page.examples.ts
@@ -0,0 +1,68 @@
+export const textareaExamples: Record<string, { html: string; ts?: string }> = {
+  requiredTextarea: {
+    html: `
+<form [formGroup]="form">
+  <cps-textarea
+    label="Required textarea with a tooltip"
+    placeholder="Please enter any text"
+    hint="Maximum 3 characters are allowed"
+    infoTooltip="Provide any information here"
+    [clearable]="true"
+    formControlName="requiredTextarea">
+  </cps-textarea>
+</form>`,
+    ts: `
+private readonly _formBuilder = inject(UntypedFormBuilder);
+
+form!: UntypedFormGroup;
+
+ngOnInit() {
+  this.form = this._formBuilder.group({
+    requiredTextarea: ['', [Validators.required, Validators.maxLength(3)]]
+  });
+}`
+  },
+
+  disabledTextarea: {
+    html: `
+<cps-textarea label="Disabled textarea" [disabled]="true"></cps-textarea>`
+  },
+
+  readonlyTextarea: {
+    html: `
+<cps-textarea
+  label="Readonly textarea"
+  hint="This textarea is readonly"
+  value="Value to show"
+  [readonly]="true">
+</cps-textarea>`
+  },
+
+  clearableTextarea: {
+    html: `
+<cps-textarea
+  label="Clearable textarea with persistent clear icon"
+  hint="This textarea is clearable"
+  value="Clear me"
+  [clearable]="true"
+  [persistentClear]="true">
+</cps-textarea>`
+  },
+
+  twoWayBindingTextarea: {
+    html: `
+<div class="sync-val-example">
+  <cps-textarea
+    width="25rem"
+    label="Textarea with two-way binding, type something in"
+    [(ngModel)]="syncVal"
+    resizable="none"
+    hint="This textarea has a fixed width of 25rem and is not resizable"
+    [ngModelOptions]="{ standalone: true }">
+  </cps-textarea>
+  <span class="sync-val">{{ syncVal }}</span>
+</div>`,
+    ts: `
+syncVal = '';`
+  }
+};
diff --git a/projects/composition/src/app/pages/timepicker-page/timepicker-page.component.html b/projects/composition/src/app/pages/timepicker-page/timepicker-page.component.html
index 2b0dfca1f..67d385aa4 100644
--- a/projects/composition/src/app/pages/timepicker-page/timepicker-page.component.html
+++ b/projects/composition/src/app/pages/timepicker-page/timepicker-page.component.html
@@ -1,38 +1,69 @@
 <app-component-docs-viewer [componentData]="componentData">
   <!-- Example of component's usage -->
-  <form [formGroup]="form">
-    <div class="timepickers-group">
+  <app-code-example
+    label="Required 12-hour timepicker with a tooltip"
+    [htmlCode]="examples.requiredTimepicker.html"
+    [tsCode]="examples.requiredTimepicker.ts">
+    <form [formGroup]="form">
       <cps-timepicker
         label="Required 12-hour timepicker with a tooltip"
         formControlName="requiredTimepicker"
         infoTooltip="Provide any information here"></cps-timepicker>
+    </form>
+  </app-code-example>
+
+  <app-code-example
+    label="Disabled 12-hour timepicker"
+    [htmlCode]="examples.disabledTimepicker.html">
+    <cps-timepicker
+      label="Disabled 12-hour timepicker"
+      [disabled]="true"
+      hint="This timepicker is disabled">
+    </cps-timepicker>
+  </app-code-example>
+
+  <app-code-example
+    label="12-hour timepicker with seconds"
+    [htmlCode]="examples.secondsTimepicker.html"
+    [tsCode]="examples.secondsTimepicker.ts">
+    <cps-timepicker
+      label="12-hour timepicker with seconds"
+      (valueChanged)="onValueChanged($event)"
+      [withSeconds]="true">
+    </cps-timepicker>
+  </app-code-example>
+
+  <app-code-example
+    label="24-hour timepicker"
+    [htmlCode]="examples.use24HourTimepicker.html">
+    <cps-timepicker label="24-hour timepicker" [use24HourTime]="true">
+    </cps-timepicker>
+  </app-code-example>
+
+  <app-code-example
+    label="24-hour timepicker with seconds"
+    [htmlCode]="examples.use24HourSecondsTimepicker.html"
+    [tsCode]="examples.use24HourSecondsTimepicker.ts">
+    <cps-timepicker
+      label="24-hour timepicker with seconds"
+      [use24HourTime]="true"
+      [value]="val24"
+      [withSeconds]="true">
+    </cps-timepicker>
+  </app-code-example>
+
+  <app-code-example
+    label="Two-way binding"
+    [htmlCode]="examples.twoWayBindingTimepicker.html"
+    [tsCode]="examples.twoWayBindingTimepicker.ts">
+    <div class="sync-val-example">
       <cps-timepicker
-        label="Disabled 12-hour timepicker"
-        [disabled]="true"
-        hint="This timepicker is disabled">
+        label="12-hour timepicker with two-way binding"
+        [(ngModel)]="syncVal"
+        [withSeconds]="true"
+        [ngModelOptions]="{ standalone: true }">
       </cps-timepicker>
-      <cps-timepicker
-        label="12-hour timepicker with seconds"
-        (valueChanged)="onValueChanged($event)"
-        [withSeconds]="true">
-      </cps-timepicker>
-      <cps-timepicker label="24-hour timepicker" [use24HourTime]="true">
-      </cps-timepicker>
-      <cps-timepicker
-        label="24-hour timepicker with seconds"
-        [use24HourTime]="true"
-        [value]="val24"
-        [withSeconds]="true">
-      </cps-timepicker>
-      <div class="sync-val-example">
-        <cps-timepicker
-          label="12-hour timepicker with two-way binding"
-          [(ngModel)]="syncVal"
-          [withSeconds]="true"
-          [ngModelOptions]="{ standalone: true }">
-        </cps-timepicker>
-        <span>{{ syncVal | json }}</span>
-      </div>
+      <span>{{ syncVal | json }}</span>
     </div>
-  </form>
+  </app-code-example>
 </app-component-docs-viewer>
diff --git a/projects/composition/src/app/pages/timepicker-page/timepicker-page.component.scss b/projects/composition/src/app/pages/timepicker-page/timepicker-page.component.scss
index 68f1a6936..1e881efc4 100644
--- a/projects/composition/src/app/pages/timepicker-page/timepicker-page.component.scss
+++ b/projects/composition/src/app/pages/timepicker-page/timepicker-page.component.scss
@@ -1,9 +1,3 @@
-.timepickers-group {
-  gap: 1.5rem;
-  display: flex;
-  flex-direction: column;
-}
-
 .sync-val-example {
   display: flex;
   flex-direction: column;
diff --git a/projects/composition/src/app/pages/timepicker-page/timepicker-page.component.ts b/projects/composition/src/app/pages/timepicker-page/timepicker-page.component.ts
index a2ebaee28..9b3c4eb1a 100644
--- a/projects/composition/src/app/pages/timepicker-page/timepicker-page.component.ts
+++ b/projects/composition/src/app/pages/timepicker-page/timepicker-page.component.ts
@@ -9,8 +9,9 @@ import {
   Validators
 } from '@angular/forms';
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
-
+import { CodeExampleComponent } from '../../components/code-example/code-example.component';
 import ComponentData from '../../api-data/cps-timepicker.json';
+import { timepickerExamples } from './timepicker-page.examples';
 
 @Component({
   selector: 'app-timepicker-page',
@@ -19,13 +20,15 @@ import ComponentData from '../../api-data/cps-timepicker.json';
     CpsTimepickerComponent,
     ReactiveFormsModule,
     FormsModule,
-    ComponentDocsViewerComponent
+    ComponentDocsViewerComponent,
+    CodeExampleComponent
   ],
   templateUrl: './timepicker-page.component.html',
   styleUrls: ['./timepicker-page.component.scss'],
   host: { class: 'composition-page' }
 })
 export class TimepickerPageComponent implements OnInit {
+  readonly examples = timepickerExamples;
   form!: UntypedFormGroup;
 
   syncVal: CpsTime = {
diff --git a/projects/composition/src/app/pages/timepicker-page/timepicker-page.examples.ts b/projects/composition/src/app/pages/timepicker-page/timepicker-page.examples.ts
new file mode 100644
index 000000000..783d8d85a
--- /dev/null
+++ b/projects/composition/src/app/pages/timepicker-page/timepicker-page.examples.ts
@@ -0,0 +1,91 @@
+export const timepickerExamples: Record<string, { html: string; ts?: string }> =
+  {
+    requiredTimepicker: {
+      html: `
+<form [formGroup]="form">
+  <cps-timepicker
+    label="Required 12-hour timepicker with a tooltip"
+    formControlName="requiredTimepicker"
+    infoTooltip="Provide any information here"></cps-timepicker>
+</form>`,
+      ts: `
+private readonly _formBuilder = inject(UntypedFormBuilder);
+
+form!: UntypedFormGroup;
+
+ngOnInit() {
+  const defVal: CpsTime = {
+    hours: '11',
+    minutes: '10',
+    dayPeriod: 'PM'
+  };
+  this.form = this._formBuilder.group({
+    requiredTimepicker: [defVal, [Validators.required]]
+  });
+}`
+    },
+
+    disabledTimepicker: {
+      html: `
+<cps-timepicker
+  label="Disabled 12-hour timepicker"
+  [disabled]="true"
+  hint="This timepicker is disabled">
+</cps-timepicker>`
+    },
+
+    secondsTimepicker: {
+      html: `
+<cps-timepicker
+  label="12-hour timepicker with seconds"
+  (valueChanged)="onValueChanged($event)"
+  [withSeconds]="true">
+</cps-timepicker>`,
+      ts: `
+onValueChanged(val: CpsTime) {
+  console.log('onValueChanged', val);
+}`
+    },
+
+    use24HourTimepicker: {
+      html: `
+<cps-timepicker label="24-hour timepicker" [use24HourTime]="true">
+</cps-timepicker>`
+    },
+
+    use24HourSecondsTimepicker: {
+      html: `
+<cps-timepicker
+  label="24-hour timepicker with seconds"
+  [use24HourTime]="true"
+  [value]="val24"
+  [withSeconds]="true">
+</cps-timepicker>`,
+      ts: `
+val24: CpsTime = {
+  hours: '22',
+  minutes: '59',
+  seconds: '59'
+};`
+    },
+
+    twoWayBindingTimepicker: {
+      html: `
+<div class="sync-val-example">
+  <cps-timepicker
+    label="12-hour timepicker with two-way binding"
+    [(ngModel)]="syncVal"
+    [withSeconds]="true"
+    [ngModelOptions]="{ standalone: true }">
+  </cps-timepicker>
+  <span>{{ syncVal | json }}</span>
+</div>`,
+      ts: `
+syncVal: CpsTime = {
+  hours: '05',
+  minutes: '10',
+  seconds: '10',
+  dayPeriod: 'PM'
+};`
+    }
+  };