diff --git a/projects/demo/src/components/number-format/index.html b/projects/demo/src/components/number-format/index.html
new file mode 100644
index 000000000000..dc600e460a8b
--- /dev/null
+++ b/projects/demo/src/components/number-format/index.html
@@ -0,0 +1,141 @@
+<tr>
+    <td colspan="3">
+        <span tuiTitle>
+            <a
+                target="_blank"
+                tuiLink
+                [routerLink]="routes.NumberFormat"
+            >
+                <strong>TuiNumberFormat</strong>
+            </a>
+            <div tuiSubtitle>
+                Usage example:
+                <br />
+                <code>[tuiNumberFormat]="&#123;thousandSeparator, decimalSeparator, ..., rounding&#125;"</code>
+            </div>
+        </span>
+    </td>
+</tr>
+
+<tr
+    *ngIf="!hiddenOptions.includes('thousandSeparator')"
+    name="[thousandSeparator]"
+    tuiDocAPIItem
+    type="string"
+    [value]="thousandSeparator()"
+    (valueChange)="thousandSeparator.set($event)"
+>
+    Symbol for separating thousands
+</tr>
+
+<tr
+    *ngIf="!hiddenOptions.includes('decimalSeparator')"
+    name="[decimalSeparator]"
+    tuiDocAPIItem
+    type="string"
+    [value]="decimalSeparator()"
+    (valueChange)="decimalSeparator.set($event)"
+>
+    Symbol for separating fraction
+</tr>
+
+<tr
+    *ngIf="!hiddenOptions.includes('precision')"
+    name="[precision]"
+    tuiDocAPIItem
+    type="number"
+    [value]="precision()"
+    (valueChange)="precision.set($event)"
+>
+    A number of digits after
+    <code>[decimalSeparator]</code>
+    (
+    <code>Infinity</code>
+    for an untouched decimal part)
+</tr>
+
+<tr
+    *ngIf="!hiddenOptions.includes('decimalMode')"
+    name="[decimalMode]"
+    tuiDocAPIItem
+    type="TuiDecimalMode"
+    [items]="decimalVariants"
+    [value]="decimalMode()"
+    (valueChange)="decimalMode.set($event)"
+>
+    <dl>
+        <dt>
+            <code>always</code>
+        </dt>
+        <dd>
+            number of digits after
+            <code>[decimalSeparator]</code>
+            is
+            <b>always</b>
+            equal to the precision.
+        </dd>
+
+        <dt>
+            <code>pad</code>
+        </dt>
+        <dd>pads trailing zeroes up to precision, if the number is fractional</dd>
+
+        <dt>
+            <code>not-zero</code>
+        </dt>
+        <dd>drops trailing zeroes</dd>
+    </dl>
+</tr>
+
+<tr
+    *ngIf="!hiddenOptions.includes('rounding')"
+    name="[rounding]"
+    tuiDocAPIItem
+    type="TuiRounding"
+    [items]="roundingVariants"
+    [value]="rounding()"
+    (valueChange)="rounding.set($event)"
+>
+    <dl>
+        <dt>
+            <code>round</code>
+        </dt>
+        <dd>
+            rounds to the
+            <strong>nearest</strong>
+            number with the specified
+            <code>[precision]</code>
+        </dd>
+
+        <dt>
+            <code>floor</code>
+        </dt>
+        <dd>
+            rounds down (the
+            <strong>largest</strong>
+            number with the specified
+            <code>[precision]</code>
+            less than or equal to a given number)
+        </dd>
+
+        <dt>
+            <code>ceil</code>
+        </dt>
+        <dd>
+            rounds up (the
+            <strong>smallest</strong>
+            number with the specified
+            <code>[precision]</code>
+            greater than or equal to a given number)
+        </dd>
+
+        <dt>
+            <code>truncate</code>
+        </dt>
+        <dd>
+            returns the number with the specified
+            <code>[precision]</code>
+            by just removing extra fractional digits
+        </dd>
+    </dl>
+</tr>
diff --git a/projects/demo/src/components/number-format/index.ts b/projects/demo/src/components/number-format/index.ts
new file mode 100644
index 000000000000..45abd332bb60
--- /dev/null
+++ b/projects/demo/src/components/number-format/index.ts
@@ -0,0 +1,48 @@
+import {NgIf} from '@angular/common';
+import type {WritableSignal} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input, signal} from '@angular/core';
+import {RouterLink} from '@angular/router';
+import {DemoRoute} from '@demo/routes';
+import {TuiDocAPIItem} from '@taiga-ui/addon-doc';
+import type {TuiLooseUnion, TuiRounding} from '@taiga-ui/cdk';
+import type {TuiDecimalMode, TuiNumberFormatSettings} from '@taiga-ui/core';
+import {TUI_DEFAULT_NUMBER_FORMAT, TuiLink, TuiTitle} from '@taiga-ui/core';
+import {tuiInputNumberOptionsProvider} from '@taiga-ui/legacy';
+
+@Component({
+    standalone: true,
+    selector: 'tbody[tuiDocNumberFormat]',
+    imports: [NgIf, RouterLink, TuiDocAPIItem, TuiLink, TuiTitle],
+    templateUrl: './index.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        tuiInputNumberOptionsProvider({
+            min: 0,
+        }),
+    ],
+})
+export class TuiDocNumberFormat
+    implements
+        Record<
+            keyof TuiNumberFormatSettings,
+            WritableSignal<TuiNumberFormatSettings[keyof TuiNumberFormatSettings]>
+        >
+{
+    protected readonly routes = DemoRoute;
+    protected readonly decimalVariants: TuiDecimalMode[] = ['always', 'pad', 'not-zero'];
+    protected readonly roundingVariants: TuiRounding[] = [
+        'truncate',
+        'round',
+        'ceil',
+        'floor',
+    ];
+
+    @Input()
+    public hiddenOptions: Array<TuiLooseUnion<keyof TuiNumberFormatSettings>> = [];
+
+    public thousandSeparator = signal(TUI_DEFAULT_NUMBER_FORMAT.thousandSeparator);
+    public decimalSeparator = signal(TUI_DEFAULT_NUMBER_FORMAT.decimalSeparator);
+    public precision = signal(TUI_DEFAULT_NUMBER_FORMAT.precision);
+    public decimalMode = signal(TUI_DEFAULT_NUMBER_FORMAT.decimalMode);
+    public rounding = signal(TUI_DEFAULT_NUMBER_FORMAT.rounding);
+}
diff --git a/projects/demo/src/modules/components/abstract/inherited-documentation/index.html b/projects/demo/src/modules/components/abstract/inherited-documentation/index.html
index 662320326635..19a182544bed 100644
--- a/projects/demo/src/modules/components/abstract/inherited-documentation/index.html
+++ b/projects/demo/src/modules/components/abstract/inherited-documentation/index.html
@@ -1,5 +1,4 @@
 <dropdown-documentation *ngIf="dropdown" />
-<number-format-documentation *ngIf="isTuiFormatNumber(documentedComponent)" />
 <ng-container *ngIf="isTuiReactiveControl(documentedComponent)">
     <hint-controller-documentation *ngIf="withHint" />
     <textfield-controller-documentation *ngIf="withTextFieldController" />
diff --git a/projects/demo/src/modules/components/abstract/inherited-documentation/index.ts b/projects/demo/src/modules/components/abstract/inherited-documentation/index.ts
index c201f7d7431e..4825ff69b5e1 100644
--- a/projects/demo/src/modules/components/abstract/inherited-documentation/index.ts
+++ b/projects/demo/src/modules/components/abstract/inherited-documentation/index.ts
@@ -14,8 +14,6 @@ import {DropdownDocumentation} from '../dropdown-documentation';
 import {AbstractExampleTuiHint} from '../hint';
 import {HintControllerDocumentation} from '../hint-controller-documentation';
 import {AbstractExampleTuiInteractive} from '../interactive';
-import {AbstractExampleTuiNumberFormat} from '../number-format';
-import {NumberFormatDocumentation} from '../number-format-documentation';
 import type {TuiSupportingDocumentationComponent} from '../supporting-documentation-component';
 import {TextfieldControllerDocumentation} from '../textfield-controller-documentation';
 
@@ -26,7 +24,6 @@ import {TextfieldControllerDocumentation} from '../textfield-controller-document
         DropdownDocumentation,
         HintControllerDocumentation,
         NgIf,
-        NumberFormatDocumentation,
         TextfieldControllerDocumentation,
         TuiDocDocumentation,
         TuiDocDocumentationPropertyConnector,
@@ -70,10 +67,4 @@ export class InheritedDocumentation {
     ): documentedComponent is AbstractExampleTuiHint {
         return documentedComponent instanceof AbstractExampleTuiHint;
     }
-
-    protected isTuiFormatNumber(
-        documentedComponent: TuiSupportingDocumentationComponent,
-    ): documentedComponent is AbstractExampleTuiHint {
-        return documentedComponent instanceof AbstractExampleTuiNumberFormat;
-    }
 }
diff --git a/projects/demo/src/modules/components/abstract/number-format-documentation/index.html b/projects/demo/src/modules/components/abstract/number-format-documentation/index.html
deleted file mode 100644
index 5fc2642e93ff..000000000000
--- a/projects/demo/src/modules/components/abstract/number-format-documentation/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
-<h6 class="tui-text_h6">
-    Can be expanded with
-    <a
-        target="_blank"
-        tuiLink
-        [routerLink]="routes.NumberFormat"
-    >
-        TuiNumberFormat
-    </a>
-</h6>
-<p>
-    Usage example:
-    <code>
-        [tuiNumberFormat]='&#123;decimalMode, precision, rounding, zeroPadding, thousandSeparator,
-        decimalSeparator&#125;'
-    </code>
-</p>
-<p>
-    Requires you to import
-    <code>TuiNumberFormat</code>
-    .
-</p>
-
-<tui-doc-documentation>
-    <ng-template
-        documentationPropertyMode="input"
-        documentationPropertyName="decimalMode"
-        documentationPropertyType="TuiDecimalMode"
-        [documentationPropertyValues]="documentedComponent.decimalVariants"
-        [(documentationPropertyValue)]="documentedComponent.decimalMode"
-    >
-        <dl>
-            <dt>
-                <code>always</code>
-            </dt>
-            <dd>
-                number of digits after
-                <code>decimalSeparator</code>
-                is
-                <b>always</b>
-                equal to the precision.
-            </dd>
-
-            <dt>
-                <code>pad</code>
-            </dt>
-            <dd>pads trailing zeroes up to precision, if the number is fractional</dd>
-
-            <dt>
-                <code>not-zero</code>
-            </dt>
-            <dd>drops trailing zeroes</dd>
-        </dl>
-    </ng-template>
-    <ng-template
-        documentationPropertyMode="input"
-        documentationPropertyName="rounding"
-        documentationPropertyType="TuiRounding"
-        [documentationPropertyValues]="documentedComponent.roundingVariants"
-        [(documentationPropertyValue)]="documentedComponent.rounding"
-    >
-        Rounding
-    </ng-template>
-    <ng-template
-        documentationPropertyMode="input"
-        documentationPropertyName="precision"
-        documentationPropertyType="number"
-        [(documentationPropertyValue)]="documentedComponent.precision"
-    >
-        A number of digits after comma (
-        <code>Infinity</code>
-        for an untouched decimal part)
-    </ng-template>
-    <ng-template
-        documentationPropertyMode="input"
-        documentationPropertyName="thousandSeparator"
-        documentationPropertyType="string"
-        [(documentationPropertyValue)]="documentedComponent.thousandSeparator"
-    >
-        Symbol for separating thousands
-    </ng-template>
-    <ng-template
-        documentationPropertyMode="input"
-        documentationPropertyName="decimalSeparator"
-        documentationPropertyType="string"
-        [(documentationPropertyValue)]="documentedComponent.decimalSeparator"
-    >
-        Symbol for separating fraction
-    </ng-template>
-</tui-doc-documentation>
diff --git a/projects/demo/src/modules/components/abstract/number-format-documentation/index.ts b/projects/demo/src/modules/components/abstract/number-format-documentation/index.ts
deleted file mode 100644
index c43690f24723..000000000000
--- a/projects/demo/src/modules/components/abstract/number-format-documentation/index.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import {Component, inject} from '@angular/core';
-import {RouterLink} from '@angular/router';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {DemoRoute} from '@demo/routes';
-import {
-    TuiDocDocumentation,
-    TuiDocDocumentationPropertyConnector,
-} from '@taiga-ui/addon-doc';
-import {TuiLink} from '@taiga-ui/core';
-
-import {ABSTRACT_PROPS_ACCESSOR} from '../abstract-props-accessor';
-import type {AbstractExampleTuiNumberFormat} from '../number-format';
-
-@Component({
-    standalone: true,
-    selector: 'number-format-documentation',
-    imports: [
-        RouterLink,
-        TuiDocDocumentation,
-        TuiDocDocumentationPropertyConnector,
-        TuiLink,
-    ],
-    templateUrl: './index.html',
-    changeDetection,
-})
-export class NumberFormatDocumentation {
-    protected readonly documentedComponent = inject<AbstractExampleTuiNumberFormat>(
-        ABSTRACT_PROPS_ACCESSOR,
-    );
-
-    protected readonly routes = DemoRoute;
-}
diff --git a/projects/demo/src/modules/components/abstract/number-format.ts b/projects/demo/src/modules/components/abstract/number-format.ts
deleted file mode 100644
index 1829ab6f3800..000000000000
--- a/projects/demo/src/modules/components/abstract/number-format.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type {TuiRounding} from '@taiga-ui/cdk';
-import type {TuiDecimalMode} from '@taiga-ui/core';
-import {TUI_DEFAULT_NUMBER_FORMAT} from '@taiga-ui/core';
-
-import {AbstractExampleTuiControl} from './control';
-
-export abstract class AbstractExampleTuiNumberFormat extends AbstractExampleTuiControl {
-    public precision = TUI_DEFAULT_NUMBER_FORMAT.precision;
-
-    public readonly decimalVariants: TuiDecimalMode[] = ['always', 'pad', 'not-zero'];
-    public decimalMode = TUI_DEFAULT_NUMBER_FORMAT.decimalMode;
-
-    public readonly roundingVariants: TuiRounding[] = [
-        'truncate',
-        'round',
-        'ceil',
-        'floor',
-    ];
-
-    public rounding = TUI_DEFAULT_NUMBER_FORMAT.rounding;
-
-    public decimalSeparator = TUI_DEFAULT_NUMBER_FORMAT.decimalSeparator;
-    public thousandSeparator = TUI_DEFAULT_NUMBER_FORMAT.thousandSeparator;
-}
diff --git a/projects/demo/src/modules/components/abstract/supporting-documentation-component.ts b/projects/demo/src/modules/components/abstract/supporting-documentation-component.ts
index a6467e2dbbc4..a5fa099d1faa 100644
--- a/projects/demo/src/modules/components/abstract/supporting-documentation-component.ts
+++ b/projects/demo/src/modules/components/abstract/supporting-documentation-component.ts
@@ -1,10 +1,8 @@
 import type {AbstractExampleTuiControl} from './control';
 import type {AbstractExampleTuiHint} from './hint';
 import type {AbstractExampleTuiInteractive} from './interactive';
-import type {AbstractExampleTuiNumberFormat} from './number-format';
 
 export type TuiSupportingDocumentationComponent =
     | AbstractExampleTuiControl
     | AbstractExampleTuiHint
-    | AbstractExampleTuiInteractive
-    | AbstractExampleTuiNumberFormat;
+    | AbstractExampleTuiInteractive;
diff --git a/projects/demo/src/modules/components/input-number/index.html b/projects/demo/src/modules/components/input-number/index.html
index 1f2a2103e5b5..17a2f27967a0 100644
--- a/projects/demo/src/modules/components/input-number/index.html
+++ b/projects/demo/src/modules/components/input-number/index.html
@@ -176,11 +176,11 @@ <h3>There are also other components to input numbers:</h3>
                     [tuiHintContent]="hintContent"
                     [tuiHintDirection]="hintDirection"
                     [tuiNumberFormat]="{
-                        precision,
-                        decimalMode: decimalMode,
-                        rounding,
-                        thousandSeparator,
-                        decimalSeparator,
+                        decimalMode: numberFormatDoc.decimalMode(),
+                        rounding: numberFormatDoc.rounding(),
+                        thousandSeparator: numberFormatDoc.thousandSeparator(),
+                        decimalSeparator: numberFormatDoc.decimalSeparator(),
+                        precision: numberFormatDoc.precision(),
                     }"
                     [tuiTextfieldCleaner]="cleaner"
                     [tuiTextfieldCustomContent]="customContent"
@@ -232,6 +232,14 @@ <h3>There are also other components to input numbers:</h3>
                 Step to increase/decrease value with keyboard and buttons on the side
             </ng-template>
         </tui-doc-documentation>
+
+        <table tuiDocAPI>
+            <tbody
+                #numberFormatDoc
+                tuiDocNumberFormat
+            ></tbody>
+        </table>
+
         <inherited-documentation />
         <tui-doc-documentation heading="CSS customization">
             <ng-template
diff --git a/projects/demo/src/modules/components/input-number/index.ts b/projects/demo/src/modules/components/input-number/index.ts
index b131110fa629..ffb031178332 100644
--- a/projects/demo/src/modules/components/input-number/index.ts
+++ b/projects/demo/src/modules/components/input-number/index.ts
@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
 import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
+import {TuiDocNumberFormat} from '@demo/components/number-format';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {DemoRoute} from '@demo/routes';
 import {TuiDemo} from '@demo/utils';
@@ -8,8 +9,8 @@ import {TuiHint, TuiNumberFormat} from '@taiga-ui/core';
 import {TuiInputNumberModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
 
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor';
+import {AbstractExampleTuiControl} from '../abstract/control';
 import {InheritedDocumentation} from '../abstract/inherited-documentation';
-import {AbstractExampleTuiNumberFormat} from '../abstract/number-format';
 
 @Component({
     standalone: true,
@@ -17,6 +18,7 @@ import {AbstractExampleTuiNumberFormat} from '../abstract/number-format';
         InheritedDocumentation,
         ReactiveFormsModule,
         TuiDemo,
+        TuiDocNumberFormat,
         TuiHint,
         TuiInputNumberModule,
         TuiNumberFormat,
@@ -26,7 +28,7 @@ import {AbstractExampleTuiNumberFormat} from '../abstract/number-format';
     changeDetection,
     providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent)],
 })
-export default class PageComponent extends AbstractExampleTuiNumberFormat {
+export default class PageComponent extends AbstractExampleTuiControl {
     protected readonly routes = DemoRoute;
     protected docPages = DemoRoute;
 
@@ -41,6 +43,5 @@ export default class PageComponent extends AbstractExampleTuiNumberFormat {
     protected step = 0;
 
     public override cleaner = false;
-    public override precision = 2;
     public readonly control = new FormControl(6432, Validators.required);
 }
diff --git a/projects/demo/src/modules/components/input-range/index.html b/projects/demo/src/modules/components/input-range/index.html
index 4ee8d4ec5461..a174b6788e57 100644
--- a/projects/demo/src/modules/components/input-range/index.html
+++ b/projects/demo/src/modules/components/input-range/index.html
@@ -120,7 +120,12 @@
                     [rightValueContent]="rightValueContent"
                     [segments]="segments"
                     [steps]="steps"
-                    [tuiNumberFormat]="{decimalMode: decimalMode, rounding, thousandSeparator, decimalSeparator}"
+                    [tuiNumberFormat]="{
+                        decimalMode: numberFormatDoc.decimalMode(),
+                        rounding: numberFormatDoc.rounding(),
+                        thousandSeparator: numberFormatDoc.thousandSeparator(),
+                        decimalSeparator: numberFormatDoc.decimalSeparator(),
+                    }"
                     [tuiTextfieldLabelOutside]="labelOutside"
                     [tuiTextfieldSize]="size"
                 >
@@ -129,159 +134,184 @@
                 </tui-input-range>
             </ng-template>
         </tui-doc-demo>
-        <tui-doc-documentation>
-            <ng-template
-                documentationPropertyName="disabled"
-                documentationPropertyType="boolean"
-                [(documentationPropertyValue)]="disabled"
-            >
-                Disabled state (use
-                <code>formControl.disable()</code>
-                )
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="min"
-                documentationPropertyType="number | null"
-                [documentationPropertyValues]="minVariants"
-                [(documentationPropertyValue)]="min"
-            >
-                Min value
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="max"
-                documentationPropertyType="number | null"
-                [documentationPropertyValues]="maxVariants"
-                [(documentationPropertyValue)]="max"
-            >
-                Max value
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="quantum"
-                documentationPropertyType="number"
-                [documentationPropertyValues]="quantumVariants"
-                [(documentationPropertyValue)]="quantum"
-            >
-                Minimum indivisible value
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="steps"
-                documentationPropertyType="number"
-                [(documentationPropertyValue)]="steps"
-            >
-                Number of actual discrete slider steps
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="segments"
-                documentationPropertyType="number"
-                [(documentationPropertyValue)]="segments"
-            >
-                A number of visual segments
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="keySteps"
-                documentationPropertyType="TuiKeySteps"
-                [documentationPropertyValues]="keyStepsVariants"
-                [(documentationPropertyValue)]="keySteps"
-            >
-                Anchor points of non-uniform format between value and position
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="leftValueContent"
-                documentationPropertyType="PolymorpheusContent"
-                [documentationPropertyValues]="valueContentVariants"
-                [(documentationPropertyValue)]="leftValueContent"
-            >
-                A template for custom view of the left selected value.
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="rightValueContent"
-                documentationPropertyType="PolymorpheusContent"
-                [documentationPropertyValues]="valueContentVariants"
-                [(documentationPropertyValue)]="rightValueContent"
-            >
-                A template for custom view of the right selected value.
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="pluralize"
-                documentationPropertyType="Record<string, string>"
-                [documentationPropertyValues]="pluralizeVariants"
-                [(documentationPropertyValue)]="pluralize"
-            >
-                Plural forms for labels.
 
-                <p>
-                    Use object that mimics the
+        <table tuiDocAPI>
+            <tbody>
+                <tr
+                    name="disabled"
+                    tuiDocAPIItem
+                    type="boolean"
+                    [(value)]="disabled"
+                >
+                    Disabled state (use
+                    <code>formControl.disable()</code>
+                    )
+                </tr>
+
+                <tr
+                    name="[min]"
+                    tuiDocAPIItem
+                    type="number | null"
+                    [items]="minVariants"
+                    [(value)]="min"
+                >
+                    The lowest value in the range of permitted values
+                </tr>
+
+                <tr
+                    name="[max]"
+                    tuiDocAPIItem
+                    type="number | null"
+                    [items]="maxVariants"
+                    [(value)]="max"
+                >
+                    The greatest value in the range of permitted values
+                </tr>
+
+                <tr
+                    name="[quantum]"
+                    tuiDocAPIItem
+                    type="number"
+                    [items]="quantumVariants"
+                    [(value)]="quantum"
+                >
+                    Minimum indivisible value
+                </tr>
+
+                <tr
+                    name="[steps]"
+                    tuiDocAPIItem
+                    type="number"
+                    [(value)]="steps"
+                >
+                    Number of actual discrete slider steps
+                </tr>
+
+                <tr
+                    name="[segments]"
+                    tuiDocAPIItem
+                    type="number"
+                    [(value)]="segments"
+                >
+                    A number of visual segments (use
+                    <code>1</code>
+                    for no ticks)
+                </tr>
+
+                <tr
+                    name="[keySteps]"
+                    tuiDocAPIItem
+                    type="TuiKeySteps"
+                    [items]="keyStepsVariants"
+                    [(value)]="keySteps"
+                >
+                    Anchor points of non-uniform format between value and position
+                </tr>
+
+                <tr
+                    name="[leftValueContent]"
+                    tuiDocAPIItem
+                    type="PolymorpheusContent"
+                    [items]="valueContentVariants"
+                    [(value)]="leftValueContent"
+                >
+                    A template for custom view of the
+                    <strong>left</strong>
+                    selected value.
+                </tr>
+
+                <tr
+                    name="[rightValueContent]"
+                    tuiDocAPIItem
+                    type="PolymorpheusContent"
+                    [items]="valueContentVariants"
+                    [(value)]="rightValueContent"
+                >
+                    A template for custom view of the
+                    <strong>right</strong>
+                    selected value.
+                </tr>
+
+                <tr
+                    name="[pluralize]"
+                    tuiDocAPIItem
+                    type="Record<string, string>"
+                    [items]="pluralizeVariants"
+                    [(value)]="pluralize"
+                >
+                    Plural forms for labels.
+
+                    <p>
+                        Use object that mimics the
+                        <a
+                            href="https://unicode-org.github.io/icu/userguide/format_parse/messages/"
+                            tuiLink
+                        >
+                            ICU format
+                        </a>
+                        for Plural
+                    </p>
+                </tr>
+
+                <tr
+                    name="[readOnly]"
+                    tuiDocAPIItem
+                    type="boolean"
+                    [(value)]="readOnly"
+                >
+                    Component is read only
+                </tr>
+            </tbody>
+
+            <tbody
+                #numberFormatDoc
+                tuiDocNumberFormat
+                [hiddenOptions]="['precision']"
+            ></tbody>
+
+            <tbody>
+                <h6 class="tui-text_h6">
+                    Can be expanded with
                     <a
-                        href="https://unicode-org.github.io/icu/userguide/format_parse/messages/"
+                        target="_blank"
                         tuiLink
+                        [routerLink]="routes.TextfieldController"
                     >
-                        ICU format
+                        TuiTextfieldController
                     </a>
-                    for Plural
-                </p>
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="readOnly"
-                documentationPropertyType="boolean"
-                [(documentationPropertyValue)]="readOnly"
-            >
-                Component is read only
-            </ng-template>
-        </tui-doc-documentation>
+                </h6>
 
-        <h6 class="tui-text_h6">
-            Can be expanded with
-            <a
-                target="_blank"
-                tuiLink
-                [routerLink]="routes.TextfieldController"
-            >
-                TuiTextfieldController
-            </a>
-        </h6>
-
-        <p>
-            Requires you to import
-            <code>TuiTextfieldControllerModule</code>
-        </p>
+                <p>
+                    Requires you to import
+                    <code>TuiTextfieldControllerModule</code>
+                </p>
 
-        <tui-doc-documentation>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="tuiTextfieldLabelOutside"
-                documentationPropertyType="boolean"
-                [(documentationPropertyValue)]="labelOutside"
-            >
-                Label is outside a component and made with
-                <a
-                    tuiLink
-                    [routerLink]="routes.Label"
+                <tr
+                    name="[tuiTextfieldLabelOutside]"
+                    tuiDocAPIItem
+                    type="boolean"
+                    [(value)]="labelOutside"
                 >
-                    <code>Label</code>
-                </a>
-            </ng-template>
+                    Label is outside a component and made with
+                    <a
+                        tuiLink
+                        [routerLink]="routes.Label"
+                    >
+                        <code>Label</code>
+                    </a>
+                </tr>
 
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="tuiTextfieldSize"
-                documentationPropertyType="TuiSizeL"
-                [documentationPropertyValues]="sizeVariants"
-                [(documentationPropertyValue)]="size"
-            >
-                Size
-            </ng-template>
-        </tui-doc-documentation>
-        <number-format-documentation />
+                <tr
+                    name="[tuiTextfieldSize]"
+                    tuiDocAPIItem
+                    type="TuiSizeL"
+                    [items]="sizeVariants"
+                    [(value)]="size"
+                >
+                    Size
+                </tr>
+            </tbody>
+        </table>
     </ng-template>
 
     <tui-setup *pageTab />
diff --git a/projects/demo/src/modules/components/input-range/index.ts b/projects/demo/src/modules/components/input-range/index.ts
index 3f4a9f365703..ac49a71d0426 100644
--- a/projects/demo/src/modules/components/input-range/index.ts
+++ b/projects/demo/src/modules/components/input-range/index.ts
@@ -1,9 +1,9 @@
 import {Component} from '@angular/core';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {TuiDocNumberFormat} from '@demo/components/number-format';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {DemoRoute} from '@demo/routes';
 import {TuiDemo} from '@demo/utils';
-import {tuiDocExcludeProperties} from '@taiga-ui/addon-doc';
 import type {TuiContext} from '@taiga-ui/cdk';
 import {tuiProvide} from '@taiga-ui/cdk';
 import type {TuiSizeL} from '@taiga-ui/core';
@@ -12,27 +12,23 @@ import type {TuiKeySteps} from '@taiga-ui/kit';
 import {TuiInputRangeModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
 
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor';
-import {AbstractExampleTuiNumberFormat} from '../abstract/number-format';
-import {NumberFormatDocumentation} from '../abstract/number-format-documentation';
+import {AbstractExampleTuiControl} from '../abstract/control';
 
 @Component({
     standalone: true,
     imports: [
-        NumberFormatDocumentation,
         ReactiveFormsModule,
         TuiDemo,
+        TuiDocNumberFormat,
         TuiInputRangeModule,
         TuiNumberFormat,
         TuiTextfieldControllerModule,
     ],
     templateUrl: './index.html',
     changeDetection,
-    providers: [
-        tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent),
-        tuiDocExcludeProperties(['precision']),
-    ],
+    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent)],
 })
-export default class PageComponent extends AbstractExampleTuiNumberFormat {
+export default class PageComponent extends AbstractExampleTuiControl {
     protected readonly routes = DemoRoute;
     protected minVariants: readonly number[] = [0, 5, 7.77, -10];
 
diff --git a/projects/demo/src/modules/components/input-slider/index.html b/projects/demo/src/modules/components/input-slider/index.html
index 0538555605a9..4fd92fbce3dd 100644
--- a/projects/demo/src/modules/components/input-slider/index.html
+++ b/projects/demo/src/modules/components/input-slider/index.html
@@ -113,7 +113,12 @@
                     [tuiHintAppearance]="hintAppearance"
                     [tuiHintContent]="hintContent"
                     [tuiHintDirection]="hintDirection"
-                    [tuiNumberFormat]="{decimalMode: decimalMode, rounding, thousandSeparator, decimalSeparator}"
+                    [tuiNumberFormat]="{
+                        decimalMode: numberFormatDoc.decimalMode(),
+                        rounding: numberFormatDoc.rounding(),
+                        thousandSeparator: numberFormatDoc.thousandSeparator(),
+                        decimalSeparator: numberFormatDoc.decimalSeparator(),
+                    }"
                     [tuiTextfieldCleaner]="cleaner"
                     [tuiTextfieldCustomContent]="customContentSelected"
                     [tuiTextfieldIconLeft]="iconStart"
@@ -127,87 +132,105 @@
                 </tui-input-slider>
             </ng-template>
         </tui-doc-demo>
-        <tui-doc-documentation>
-            <ng-template
-                documentationPropertyName="disabled"
-                documentationPropertyType="boolean"
-                [(documentationPropertyValue)]="disabled"
-            >
-                Disabled state (use
-                <code>formControl.disable()</code>
-                )
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="min"
-                documentationPropertyType="number"
-                [documentationPropertyValues]="minVariants"
-                [(documentationPropertyValue)]="min"
-            >
-                Min value
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="max"
-                documentationPropertyType="number"
-                [documentationPropertyValues]="maxVariants"
-                [(documentationPropertyValue)]="max"
-            >
-                Max value
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="quantum"
-                documentationPropertyType="number"
-                [documentationPropertyValues]="quantumVariants"
-                [(documentationPropertyValue)]="quantum"
-            >
-                Minimum indivisible value
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="steps"
-                documentationPropertyType="number"
-                [(documentationPropertyValue)]="steps"
-            >
-                Number of actual discrete slider steps
 
-                <p>
-                    If property is not set (i.e. equals to default value
-                    <strong>0</strong>
-                    ), number of steps equals
-                    <code>(max&nbsp;-&nbsp;min)&nbsp;/&nbsp;quantum</code>
-                </p>
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="segments"
-                documentationPropertyType="number"
-                [(documentationPropertyValue)]="segments"
-            >
-                A number of visual segments (use
-                <code>1</code>
-                for no ticks)
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="keySteps"
-                documentationPropertyType="TuiKeySteps"
-                [documentationPropertyValues]="keyStepsVariants"
-                [(documentationPropertyValue)]="keySteps"
-            >
-                Key steps to bind slider position and value
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="valueContent"
-                documentationPropertyType="PolymorpheusContent"
-                [documentationPropertyValues]="valueContentVariants"
-                [(documentationPropertyValue)]="valueContent"
-            >
-                A template for custom view of selected value.
-            </ng-template>
-        </tui-doc-documentation>
+        <table tuiDocAPI>
+            <tbody>
+                <tr
+                    name="disabled"
+                    tuiDocAPIItem
+                    type="boolean"
+                    [(value)]="disabled"
+                >
+                    Disabled state (use
+                    <code>formControl.disable()</code>
+                    )
+                </tr>
+
+                <tr
+                    name="[min]"
+                    tuiDocAPIItem
+                    type="number"
+                    [items]="minVariants"
+                    [(value)]="min"
+                >
+                    The lowest value in the range of permitted values
+                </tr>
+
+                <tr
+                    name="[max]"
+                    tuiDocAPIItem
+                    type="number"
+                    [items]="maxVariants"
+                    [(value)]="max"
+                >
+                    The greatest value in the range of permitted values
+                </tr>
+
+                <tr
+                    name="[quantum]"
+                    tuiDocAPIItem
+                    type="number"
+                    [items]="quantumVariants"
+                    [(value)]="quantum"
+                >
+                    Minimum indivisible value
+                </tr>
+
+                <tr
+                    name="[steps]"
+                    tuiDocAPIItem
+                    type="number"
+                    [(value)]="steps"
+                >
+                    Number of actual discrete slider steps
+
+                    <p>
+                        If property is not set (i.e. equals to default value
+                        <strong>0</strong>
+                        ), number of steps equals
+                        <code>(max&nbsp;-&nbsp;min)&nbsp;/&nbsp;quantum</code>
+                    </p>
+                </tr>
+
+                <tr
+                    name="[segments]"
+                    tuiDocAPIItem
+                    type="number"
+                    [(value)]="segments"
+                >
+                    A number of visual segments (use
+                    <code>1</code>
+                    for no ticks)
+                </tr>
+
+                <tr
+                    name="[keySteps]"
+                    tuiDocAPIItem
+                    type="TuiKeySteps"
+                    [items]="keyStepsVariants"
+                    [(value)]="keySteps"
+                >
+                    Anchor points of non-uniform format between value and position
+                </tr>
+
+                <tr
+                    name="[valueContent]"
+                    tuiDocAPIItem
+                    type="PolymorpheusContent"
+                    [items]="valueContentVariants"
+                    [(value)]="valueContent"
+                >
+                    A template for custom view of selected value.
+                </tr>
+            </tbody>
+
+            <tbody
+                #numberFormatDoc
+                tuiDocNumberFormat
+                [hiddenOptions]="['precision']"
+            ></tbody>
+        </table>
+
         <inherited-documentation />
     </ng-template>
 
diff --git a/projects/demo/src/modules/components/input-slider/index.ts b/projects/demo/src/modules/components/input-slider/index.ts
index feb22515a607..d6cbc6ffb4d1 100644
--- a/projects/demo/src/modules/components/input-slider/index.ts
+++ b/projects/demo/src/modules/components/input-slider/index.ts
@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {TuiDocNumberFormat} from '@demo/components/number-format';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {DemoRoute} from '@demo/routes';
 import {TuiDemo} from '@demo/utils';
@@ -12,8 +13,8 @@ import type {TuiKeySteps} from '@taiga-ui/kit';
 import {TuiInputSliderModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
 
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor';
+import {AbstractExampleTuiControl} from '../abstract/control';
 import {InheritedDocumentation} from '../abstract/inherited-documentation';
-import {AbstractExampleTuiNumberFormat} from '../abstract/number-format';
 
 @Component({
     standalone: true,
@@ -21,6 +22,7 @@ import {AbstractExampleTuiNumberFormat} from '../abstract/number-format';
         InheritedDocumentation,
         ReactiveFormsModule,
         TuiDemo,
+        TuiDocNumberFormat,
         TuiHint,
         TuiInputSliderModule,
         TuiNumberFormat,
@@ -33,7 +35,7 @@ import {AbstractExampleTuiNumberFormat} from '../abstract/number-format';
         tuiDocExcludeProperties(['precision']),
     ],
 })
-export default class PageComponent extends AbstractExampleTuiNumberFormat {
+export default class PageComponent extends AbstractExampleTuiControl {
     protected readonly routes = DemoRoute;
     protected readonly minVariants: readonly number[] = [0, 1, 5, 7.77, -10];
 
diff --git a/projects/demo/src/modules/pipes/format-number/index.html b/projects/demo/src/modules/pipes/format-number/index.html
index 3dec61985ed6..e869d86b67a3 100644
--- a/projects/demo/src/modules/pipes/format-number/index.html
+++ b/projects/demo/src/modules/pipes/format-number/index.html
@@ -33,17 +33,29 @@
                 [formControl]="control"
                 [tuiTextfieldLabelOutside]="true"
             />
-            Formatted number:
-            <b>
+            <strong>Formatted number:</strong>
+            <br />
+            <code>
                 {{
                     control.value ?? 0
                         | tuiFormatNumber
-                            : {precision, decimalMode: decimalMode, rounding, thousandSeparator, decimalSeparator}
+                            : {
+                                  precision: numberFormatDoc.precision(),
+                                  decimalMode: numberFormatDoc.decimalMode(),
+                                  rounding: numberFormatDoc.rounding(),
+                                  thousandSeparator: numberFormatDoc.thousandSeparator(),
+                                  decimalSeparator: numberFormatDoc.decimalSeparator(),
+                              }
                         | async
                 }}
-            </b>
+            </code>
         </div>
-        <number-format-documentation />
+        <table tuiDocAPI>
+            <tbody
+                #numberFormatDoc
+                tuiDocNumberFormat
+            ></tbody>
+        </table>
     </ng-template>
 
     <tui-setup *pageTab />
diff --git a/projects/demo/src/modules/pipes/format-number/index.ts b/projects/demo/src/modules/pipes/format-number/index.ts
index eab79442a12f..a79c0c55e675 100644
--- a/projects/demo/src/modules/pipes/format-number/index.ts
+++ b/projects/demo/src/modules/pipes/format-number/index.ts
@@ -1,31 +1,26 @@
 import {Component} from '@angular/core';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {TuiDocNumberFormat} from '@demo/components/number-format';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {DemoRoute} from '@demo/routes';
 import {TuiDemo} from '@demo/utils';
-import {tuiProvide} from '@taiga-ui/cdk';
 import {TuiFormatNumberPipe} from '@taiga-ui/core';
 import {TuiInputNumberModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
 
-import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/abstract-props-accessor';
-import {AbstractExampleTuiNumberFormat} from '../../components/abstract/number-format';
-import {NumberFormatDocumentation} from '../../components/abstract/number-format-documentation';
-
 @Component({
     standalone: true,
     imports: [
-        NumberFormatDocumentation,
         ReactiveFormsModule,
         TuiDemo,
+        TuiDocNumberFormat,
         TuiFormatNumberPipe,
         TuiInputNumberModule,
         TuiTextfieldControllerModule,
     ],
     templateUrl: './index.html',
     changeDetection,
-    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent)],
 })
-export default class PageComponent extends AbstractExampleTuiNumberFormat {
+export default class PageComponent {
     protected readonly routes = DemoRoute;
     public readonly control = new FormControl(100);
 }