chore(demo): add form example for tui-checkbox (#8921)

projects/demo/src/modules/components/checkbox/examples/3/index.html

@@ -0,0 +1,46 @@
+<ng-container *ngIf="currentQuestion < 2; else result">
+    <p>{{ currentQuestion + 1 }}. {{ questionTitles[currentQuestion] }}</p>
+
+    <form [formGroup]="form">
+        <label *ngFor="let option of questions[currentQuestion]; let index = index">
+            <input
+                size="s"
+                tuiCheckbox
+                type="checkbox"
+                [formControlName]="index"
+            />
+            {{ option }}
+        </label>
+    </form>
+
+    <button
+        size="s"
+        tuiButton
+        type="button"
+        class="tui-space_top-4"
+        (click)="nextQuestion()"
+    >
+        Next
+    </button>
+</ng-container>
+
+<ng-template #result>
+    <p><b>Your answers</b></p>
+
+    <div
+        *ngFor="let options of results; let i = index"
+        class="tui-space_top-4"
+    >
+        <p>{{ i + 1 }}. {{ questionTitles[i] }}</p>
+
+        <label *ngFor="let question of questions[i]; let j = index">
+            <input
+                size="s"
+                tuiCheckbox
+                type="checkbox"
+                [checked]="options[j]"
+            />
+            {{ question }}
+        </label>
+    </div>
+</ng-template>

projects/demo/src/modules/components/checkbox/examples/3/index.less

@@ -0,0 +1,5 @@
+label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}

projects/demo/src/modules/components/checkbox/examples/3/index.ts

@@ -0,0 +1,57 @@
+import {JsonPipe, NgForOf, NgIf} from '@angular/common';
+import {Component} from '@angular/core';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiButton} from '@taiga-ui/core';
+import {TuiCheckbox} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [
+        FormsModule,
+        JsonPipe,
+        NgForOf,
+        NgIf,
+        ReactiveFormsModule,
+        TuiButton,
+        TuiCheckbox,
+    ],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected readonly questionTitles = [
+        'What framework do you like?',
+        'What library do you like?',
+    ];
+
+    protected readonly questions = [
+        ['Angular', 'React', 'Vue'],
+        ['Taiga UI', 'Material UI', 'PrimeNG'],
+    ];
+
+    protected currentQuestion = 0;
+
+    protected results: boolean[][] = [];
+
+    protected form = new FormGroup({
+        0: new FormControl(false),
+        1: new FormControl(false),
+        2: new FormControl(false),
+    });
+
+    protected nextQuestion(): void {
+        this.currentQuestion++;
+
+        this.results.push(Object.values(this.form.value).map(Boolean));
+
+        this.form = new FormGroup({
+            0: new FormControl(false),
+            1: new FormControl(false),
+            2: new FormControl(false),
+        });
+    }
+}

projects/demo/src/modules/components/checkbox/index.html

@@ -28,6 +28,13 @@
             [component]="2 | tuiComponent"
             [content]="2 | tuiExample: 'html,ts'"
         />
+
+        <tui-doc-example
+            id="form"
+            heading="Form"
+            [component]="3 | tuiComponent"
+            [content]="3 | tuiExample: 'html,ts'"
+        />
     </ng-template>
 
     <tui-setup *pageTab="'Setup'" />