Taiga UI 5.0 is out!

Block KIT

Examples API GitHub

On this page

See also

Checkbox, Radio, Switch, Label

Block is a special presentation of a checkbox/radiobutton which can display actual control or be a control itself

Sizes 

    
      
    

      
      
    

  
    
      <form [formGroup]="form">
    <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]="form">
    <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>

    

      
      
    

  
    
      form {
    display: flex;
    inline-size: max-content;
    align-items: flex-start;
    gap: 1rem;
    margin-block-end: 1rem;
}

Groups

Horizontal group

Vertical group

Without checkbox indicators

    
      
    

      
      
    

  
    
      <h3 class="title">Horizontal group</h3>
<form
    tuiGroup
    class="group"
    [collapsed]="true"
    [formGroup]="form"
>
    <label tuiBlock>
        <input
            formControlName="value"
            tuiRadio
            type="radio"
            value="oranges"
        />
        Oranges
    </label>
    <label tuiBlock>
        <input
            formControlName="value"
            tuiRadio
            type="radio"
            value="apples"
        />
        Apples
    </label>
    <label tuiBlock>
        <input
            formControlName="value"
            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]="form"
>
    <label tuiBlock>
        <input
            formControlName="value"
            tuiRadio
            type="radio"
            value="oranges"
        />
        Oranges
    </label>
    <label tuiBlock>
        <input
            formControlName="value"
            tuiRadio
            type="radio"
            value="apples"
        />
        Apples
    </label>
    <label tuiBlock>
        <input
            formControlName="value"
            tuiRadio
            type="radio"
            value="pineapples"
        />
        Pineapples
    </label>
</form>
<h3 class="title">Without checkbox indicators</h3>
<form
    tuiGroup
    class="group"
    [collapsed]="true"
    [formGroup]="form"
>
    <label
        appearance=""
        tuiBlock
    >
        <input
            formControlName="value"
            tuiBlock
            type="radio"
            value="oranges"
        />
        Oranges
    </label>
    <label
        appearance=""
        tuiBlock
    >
        <input
            formControlName="value"
            tuiBlock
            type="radio"
            value="apples"
        />
        Apples
    </label>
    <label
        appearance=""
        tuiBlock
    >
        <input
            formControlName="value"
            tuiBlock
            type="radio"
            value="pineapples"
        />
        Pineapples
    </label>
</form>

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.less';

.group {
    max-inline-size: 33rem;
    margin-block-end: 1.5rem;
}

.title {
    font: var(--tui-typography-heading-h5);
    margin: 0 0 1rem;
}

Custom 

    
      
    

      
      
    

  
    
      <form [formGroup]="form">
    <label tuiBlock>
        <div tuiAvatar="@tui.user">
            <img
                alt=""
                src="https://avatars.githubusercontent.com/u/11832552"
            />
        </div>
        Heading
        <input
            formControlName="testValue1"
            tuiCheckbox
            type="checkbox"
        />
    </label>
    <label
        appearance=""
        tuiBlock
    >
        <div tuiAvatar="@tui.user">
            <img
                alt=""
                src="https://avatars.githubusercontent.com/u/11832552"
            />
        </div>
        <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-inline-start]="'auto'"
        />
    </label>
</form>

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.less';

form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}
GitHub StackBlitz