Block KIT

    
    

        
            Copy
        
        
    

    
<form [formGroup]="testForm">
    <label tuiBlock="s">
        Qiwi
        <input
            formControlName="testValue2"
            size="s"
            tuiCheckbox
            type="checkbox"
        />
    </label>
    <label tuiBlock="m">
        Oranges
        <input
            formControlName="testValue3"
            size="s"
            tuiCheckbox
            type="checkbox"
        />
    </label>
    <label tuiBlock>
        Watermelons
        <input
            formControlName="testValue4"
            tuiCheckbox
            type="checkbox"
        />
    </label>
</form>
 
<form [formGroup]="testForm">
    <label tuiBlock="s">
        <input
            formControlName="testValue5"
            size="s"
            tuiRadio
            type="radio"
            value="qiwi"
        />
        <span tuiTitle>
            <span>
                Qiwi
                <tui-icon tuiTooltip="Not the bird" />
            </span>
            <span tuiSubtitle>Green and sour</span>
        </span>
    </label>
    <label tuiBlock="m">
        <input
            formControlName="testValue5"
            size="s"
            tuiRadio
            type="radio"
            value="oranges"
        />
        <span tuiTitle>
            <span>
                Oranges
                <tui-icon tuiTooltip="Famously don't rhyme with things" />
            </span>
            <span tuiSubtitle>Best for fresh squeeze</span>
        </span>
    </label>
    <label tuiBlock>
        <input
            formControlName="testValue5"
            tuiRadio
            type="radio"
            value="watermelons"
        />
        <span tuiTitle>
            <span>
                Watermelons
                <tui-icon tuiTooltip="Preferably seedless" />
            </span>
            <span tuiSubtitle>Cool and refreshing</span>
        </span>
    </label>
</form>
    

        
            Copy
        
        
    

    
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {TuiIcon, TuiTitle} from '@taiga-ui/core';
import {TuiBlock, TuiCheckbox, TuiRadio, TuiTooltip} from '@taiga-ui/kit';
 
@Component({
    standalone: true,
    exportAs: "Example1",
    imports: [
        ReactiveFormsModule,
        TuiBlock,
        TuiCheckbox,
        TuiIcon,
        TuiRadio,
        TuiTitle,
        TuiTooltip,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class Example {
    protected readonly testForm = new FormGroup({
        testValue1: new FormControl(true),
        testValue2: new FormControl({value: false, disabled: true}),
        testValue3: new FormControl({value: true, disabled: true}),
        testValue4: new FormControl(false),
        testValue5: new FormControl(),
    });
}
    

        
            Copy
        
        
    

    
    

        
            Copy
        
        
    

    
<h3 class="title">Horizontal group</h3>
<form
    tuiGroup
    class="group"
    [collapsed]="true"
    [formGroup]="testForm"
>
    <label tuiBlock>
        <input
            formControlName="testValue"
            tuiRadio
            type="radio"
            value="oranges"
        />
        Oranges
    </label>
    <label tuiBlock>
        <input
            formControlName="testValue"
            tuiRadio
            type="radio"
            value="apples"
        />
        Apples
    </label>
    <label tuiBlock>
        <input
            formControlName="testValue"
            tuiRadio
            type="radio"
            value="pineapples"
        />
        <span tuiFade>Pineapples</span>
    </label>
</form>
<h3 class="title">Vertical group</h3>
<form
    orientation="vertical"
    tuiGroup
    class="group"
    [collapsed]="true"
    [formGroup]="testForm"
>
    <label tuiBlock>
        <input
            formControlName="testValue"
            tuiRadio
            type="radio"
            value="oranges"
        />
        Oranges
    </label>
    <label tuiBlock>
        <input
            formControlName="testValue"
            tuiRadio
            type="radio"
            value="apples"
        />
        Apples
    </label>
    <label tuiBlock>
        <input
            formControlName="testValue"
            tuiRadio
            type="radio"
            value="pineapples"
        />
        Pineapples
    </label>
</form>
<h3 class="title">Without checkbox indicators</h3>
<form
    tuiGroup
    class="group"
    [collapsed]="true"
    [formGroup]="testForm"
>
    <label
        appearance=""
        tuiBlock
    >
        <input
            formControlName="testValue"
            tuiBlock
            type="radio"
            value="oranges"
        />
        Oranges
    </label>
    <label
        appearance=""
        tuiBlock
    >
        <input
            formControlName="testValue"
            tuiBlock
            type="radio"
            value="apples"
        />
        Apples
    </label>
    <label
        appearance=""
        tuiBlock
    >
        <input
            formControlName="testValue"
            tuiBlock
            type="radio"
            value="pineapples"
        />
        Pineapples
    </label>
</form>
    

        
            Copy
        
        
    

    
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {TuiGroup} from '@taiga-ui/core';
import {TuiBlock, TuiFade, TuiRadio} from '@taiga-ui/kit';
 
@Component({
    standalone: true,
    exportAs: "Example2",
    imports: [ReactiveFormsModule, TuiBlock, TuiFade, TuiGroup, TuiRadio],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class Example {
    protected readonly testForm = new FormGroup({
        testValue: new FormControl('orange'),
    });
}
    

        
            Copy
        
        
    

    
    

        
            Copy
        
        
    

    
<form [formGroup]="testForm">
    <label tuiBlock>
        <tui-avatar src="https://avatars.githubusercontent.com/u/11832552" />
        Heading
        <input
            formControlName="testValue1"
            tuiCheckbox
            type="checkbox"
        />
    </label>
    <label
        appearance=""
        tuiBlock
    >
        <tui-avatar src="https://avatars.githubusercontent.com/u/11832552" />
        <span
            tuiTitle
            [style.margin-block.rem]="-0.5"
        >
            <span tuiSubtitle>Taiga UI</span>
            Alex Inkin
        </span>
        <tui-icon icon="@tui.heart" />
        <input
            formControlName="testValue2"
            tuiBlock
            type="checkbox"
        />
    </label>
    <label
        appearance="secondary"
        tuiBlock
    >
        <span tuiTitle>
            Heading
            <span tuiSubtitle>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi atque incidunt itaque iusto natus
                quaerat quia similique veniam?
            </span>
        </span>
        <input
            formControlName="testValue3"
            tuiSwitch
            type="checkbox"
        />
    </label>
    <label
        tuiBlock="m"
        [style.align-self]="'stretch'"
    >
        <input
            formControlName="testValue3"
            size="s"
            tuiSwitch
            type="checkbox"
        />
        Enable
        <tui-icon
            tuiTooltip="Enabling this will cause trouble"
            [style.margin-left]="'auto'"
        />
    </label>
</form>
    

        
            Copy
        
        
    

    
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {TuiIcon, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar, TuiBlock, TuiCheckbox, TuiSwitch, TuiTooltip} from '@taiga-ui/kit';
 
@Component({
    standalone: true,
    exportAs: "Example3",
    imports: [
        ReactiveFormsModule,
        TuiAvatar,
        TuiBlock,
        TuiCheckbox,
        TuiIcon,
        TuiSwitch,
        TuiTitle,
        TuiTooltip,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class Example {
    protected readonly testForm = new FormGroup({
        testValue1: new FormControl(false),
        testValue2: new FormControl(false),
        testValue3: new FormControl(false),
        testValue4: new FormControl(false),
    });
}
    

        
            Copy